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 (HyperText Markup Language) ist eine standardisierte Auszeichnungssprache für Dokumente im World Wide Web. Die meisten Webseiten enthalten eine Beschreibung des Markups in HTML (oder XHTML). Die HTML-Sprache wird von Browsern interpretiert; Der resultierende formatierte Text wird auf dem Bildschirm eines Computerbildschirms oder eines mobilen Geräts angezeigt.

Die HTML-Sprache ist eine SGML (standard generalized markup language) -Anwendung und entspricht dem internationalen Standard ISO 8879. XHTML ist eine strengere Version von HTML, sie folgt allen XML-Beschränkungen und XHTML kann tatsächlich als eine XML-Sprachanwendung für den Hypertext-Markup-Bereich behandelt werden. Im World Wide Web werden HTML-Seiten in der Regel über HTTP- oder HTTPS-Protokolle vom Browser als Klartext oder Verschlüsselung in Browser übertragen.

Das wichtigste Detail der Optimierung der Webressource für eine lange Zeit ist die Minimierung der HTML- und CSS-JS-Dateien, die zum Zeitpunkt des Site-Besuchs 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 die Auslastung der Website leicht beschleunigen. Die Minimierung erfolgt durch Entfernen unnötiger Leerzeichen, Tabulatoren und leerer Zeilen. Wir werden Ihnen sagen, wie dies auf Ihren Websites "on the fly" gemacht werden kann.

Minimiere den HTML-Code

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

Sehen Sie sich den Quellcode dieser Site an, um zu sehen, wie er im Ergebnis 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 diskutiert wird).

Dies wird mit zwei kleinen PHP-Einfügungen implementiert, die die gebräuchlichsten regulären Ausdrücke verwenden.

Der erste Teil muss ganz am Anfang des Quellcodes Ihrer Site eingefügt werden (also kurz vor <! 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 zur Ausnahme hinzugefügt, d. H. wird nicht minimiert, dies ist für die korrekte Darstellung von Codebeispielen notwendig.

Wie für die verbundenen JS- und CSS-Dateien sowie deren Einbeziehung in den Code, der in den <script> </ script> bzw. <style> </ style> -Tags eingefügt wird, bleiben sie unbehindert (Sie können dies auf der Quellseite der Blog-Seiten sehen).

Ich würde mich freuen, wenn jemand in den Kommentaren Ihnen sagen würde, wie Sie diesen Mangel beheben können, ohne die Leistung von Skripten zu beeinträchtigen.

Minimierung von 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 übersprungen werden.

Sie können beide einzelnen Dateien minimieren und mehrere Dateien zu einem zusammenfassen, wodurch die Anzahl der Anforderungen an den Server reduziert wird.

Es ist einfach verbunden:

  • 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 .
  • Wir gehen zur Adresse http: // your_site / min / builder / und geben den Benutzernamen und das Passwort admin ein . Ein Tool wird geöffnet, um Links zu Dateien zu erhalten, die den Minimizer durchlaufen haben.
  • Geben Sie die relativen Pfade zu den gewünschten 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. Setzen Sie dazu in der config.php die Änderung in der Zeichenfolge $ min_enableBuilder = true auf true to false um . .

Wenn Sie mehrere Dateien des gleichen Typs haben, empfehle ich die Gruppierung (dafür wird die Datei /min/groupsConfig.php bearbeitet ). Im Build und in der Datei selbst werden Beispiele gezeigt, wie mehrere CSS- oder JS-Dateien kombiniert werden können. Übrigens, selbst wenn Sie nur eine Datei haben und den Pfad minimieren möchten, können Sie auch Gruppierung verwenden.

Zum Beispiel:

  • Die Quelldatei ist 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 eine andere Funktion von Minify, die jemand brauchen könnte. Auf einigen Servern muss sich der Minimizer in der .htaccess- Datei (im Ordner / min / ) befinden, um das Zeichen # (Kommentarmarke) in der Zeile #RewriteBase / min zu entfernen. Die RewriteBase-Direktive legt die Basis-URL für die Transformationen im Kontext des Verzeichnisses fest.

Über dimox.name & wiki