This page has been robot translated, sorry for typos if any. Original content here.

Minimierung von HTML-Code und CSS-JS-Dateien auf der Website

Минимизация HTML кода и CSS-JS файлов на сайте

HTML (aus dem Englischen. HyperText Markup Language - "Hypertext Markup Language") ist eine standardisierte Auszeichnungssprache für Dokumente im World Wide Web. Die meisten Webseiten enthalten HTML (oder XHTML) Markup. HTML wird von Browsern interpretiert; formatierter Text, der sich aus der Interpretation ergibt, wird auf dem Bildschirm eines Computers oder mobilen Geräts angezeigt.

HTML ist eine SGML-Anwendung (standardisierte verallgemeinerte Auszeichnungssprache) und entspricht dem internationalen Standard ISO 8879. XHTML ist eine strengere Version von HTML, sie folgt allen Beschränkungen von XML und XHTML kann tatsächlich als eine Anwendung der XML-Sprache auf Hypertext-Markup angesehen werden. Im World Wide Web werden HTML-Seiten vom HTTP- oder HTTPS-Protokoll des Browsers in der Regel in Browsern im Klartext oder mit Verschlüsselung übertragen.

Der wichtigste Teil der Optimierung einer Web-Ressource für eine lange Zeit ist die Minimierung von HTML- und CSS-JS-Dateien, die zum Zeitpunkt des Besuchs der Website an den Browser übertragen werden. Sie können alles komprimieren, HTML-Code-Seiten, CSS-Dateien und JS-Dateien. Diese Maßnahmen können die Größe des resultierenden Codes erheblich reduzieren und das Laden der Site ein wenig beschleunigen. Die Minimierung ist auf das Entfernen von zusätzlichen Leerzeichen, Tabulatoren und Leerzeilen zurückzuführen. Lassen Sie uns Ihnen sagen, wie dies auf Ihren Websites im laufenden Betrieb getan werden kann.

HTML-Minimierung

Минимизация HTML кода и CSS-JS файлов на сайте

Sehen Sie sich den Quellcode dieser Site an, um zu sehen, wie er aussehen wird. Wie Sie sehen können, ist fast der gesamte HTML-Code der Seite nicht formatiert und "zu einem Heap zusammengefügt" (warum "fast" im Folgenden beschrieben wird).

Dies wird mit Hilfe von zwei kleinen PHP-Code-Einfügungen erreicht, die die regulären regulären Ausdrücke verwenden.

Der erste Teil muss ganz am Anfang des Quellcodes Ihrer Site eingefügt werden (also direkt vor dem <! DOCTYPE ...> ):

 <? php
 / *
 * HTML-Minimierung
 * /
 ob_start ();
 ?>

Und der zweite Teil muss im Gegenteil am Ende des Quellcodes der Website eingefügt werden, d. H. nach dem </ body> -Tag :

 <? php / * * HTML-Minimierung * / $ out = ob_get_clean ();  $ out = preg_replace ('/ (?! [^ <] * <\ / pre>) [\ n \ r \ t] + /', "\ n", $ out);  $ out = preg_replace ('/ {2,} /', '', $ out);  $ out = preg_replace ('/> [\ n] + /', '>', $ out);  echo $ out;  ?> 

Wichtig: Der Inhalt des pre- Tags wird der Ausnahme hinzugefügt, d. H. Es ist nicht minimiert, es ist notwendig für die korrekte Anzeige von Codebeispielen.

Wie für die verbundenen JS- und CSS-Dateien sowie deren Einbindung in den Code, die jeweils in die Tags <script> </ script> und <style> </ style> eingefügt werden, bleiben sie nicht minimiert (Sie können sie in den Quellseiten des Blogs sehen).

Ich würde mich freuen, wenn jemand in den Kommentaren Ihnen sagt, wie man diesen Nachteil richtig beseitigt, ohne die Arbeitsfähigkeit der Skripte zu beeinträchtigen.

Minimieren Sie CSS-Dateien und JS-Dateien mit Minify

Минимизация HTML кода и CSS-JS файлов на сайте

Verwenden Sie dazu das wunderbare kostenlose Tool Minify . Dies ist eine PHP-Anwendung, die auf der Website in einen separaten Daddy gestellt wird und über die alle notwendigen Dateien übergeben werden.

Es ist möglich, einzelne Dateien zu minimieren und mehrere Dateien in einem zu gruppieren, wodurch die Anzahl der Anfragen an den Server reduziert wird.

Es verbindet einfach:

  • Kopieren Sie den Ordner / min / in das Stammverzeichnis Ihrer Site.
  • Öffnen Sie die Datei /min/config.php in einem Texteditor und in der Zeile $ min_enableBuilder = false; ändere falsch in wahr .
  • Gehen Sie zur Adresse http: // your_site / min / builder / und geben Sie den Benutzernamen und das Passwort admin ein . Ein Tool wird geöffnet, um Links zu Dateien zu erhalten, die den Minimizer passieren.
  • Geben Sie relative Pfade zu den erforderlichen Dateien an, klicken Sie auf "Aktualisieren" und erhalten Sie Links zu den minimierten Versionen.
  • Nachdem Sie alle erforderlichen Links erhalten haben, ist es besser, den Zugriff auf den Builder zu schließen. Dazu ändern wir in der config.php in der Zeile $ min_enableBuilder = true; .

Wenn Sie mehrere Dateien desselben Typs haben, empfehle ich die Gruppierung (zu diesem Zweck wird die Datei /min/groupsConfig.php bearbeitet ). Im Builder und in dieser Datei selbst werden Beispiele gezeigt, wie mehrere CSS- oder JS-Dateien kombiniert werden können. Übrigens, auch wenn Sie nur eine Datei haben und Sie den Pfad zu dieser bei der Minimierung verkürzen möchten, können Sie auch Gruppierung verwenden.

Zum Beispiel:

  • Quelldatei - http://www.shram.kiev.ua/templates3/css/style.css
  • Gruppierung in GruppenConfig.php :
     Array zurückgeben (
      'style.css' => array ('// templates3 / css / style.css'),
     );
    
  • Das Ergebnis ist http://www.shram.kiev.ua/min/f=/templates3/css/style.css

Es gibt noch eine andere Minify-Funktion, die jemand benötigt. Damit der Minimierer auf einigen Servern ordnungsgemäß funktioniert, muss das # (Kommentarzeichen) in der Zeile #RewriteBase / min in der .htaccess- Datei (die sich im Ordner / min / befindet ) entfernt werden. Die rewritebase-Direktive legt die Basis-URL für Conversions im Kontext eines Verzeichnisses fest.

Über dimox.name & wiki