So komprimieren Sie HTML und anderen Website-Code

Website-Benutzer erwarten, dass Inhalte von hoher Qualität und schnell zugänglich sind. Dies ist wichtig für ein optimales Benutzererlebnis. Die gute Nachricht ist, dass es mit ein paar Codezeilen und einigen kleinen Tricks durchaus möglich ist, HTML und anderen Website-Code um 40 % bis 70 % (und in einigen Fällen sogar noch mehr) zu komprimieren. In diesem Artikel zeige ich dir, wie das geht.

>> Pagespeed-Optimierung: So verbessern Sie Ihre Ladezeiten <<

Warum Website-Code komprimieren?

Jetzt können Sie sich die Frage stellen: Warum sollte ich den Quellcode meiner Website komprimieren? Unkomprimiert ist es immerhin nur ein paar hundert Kilobyte groß.

Die Antwort ist ganz einfach: Denn schneller ladende Webseiten bieten ein besseres Nutzererlebnis, was sich wiederum positiv auf die Conversion Rate, die Verweildauer auf der Seite, die Seitenaufrufe und die Absprungrate auswirkt. Besonders wichtig ist die Conversion Rate, die sich in Branchen wie E-Commerce direkt auf den Erfolg auswirkt.

Dem E-Commerce-Riesen Amazon beispielsweise kostet eine Ladezeitverzögerung von 100 ms etwa 1 % Umsatz. Hochgerechnet auf ein volles Geschäftsjahr würde dies zu Kosten von etwa 245 Millionen US-Dollar führen. Diese Zahlen zeigen die drastischen Auswirkungen, die die Ladegeschwindigkeit einer Website haben kann.

Berücksichtigen Sie auch den Anteil der Nutzer, die mobil im Internet surfen. Die Abdeckung von LTE- und 4G-Funknetzen hat hier noch viel Luft nach oben. Das bedeutet, dass das mobile Internet oft ziemlich langsam ist, was schnellere Seitengeschwindigkeiten noch wichtiger macht.

Eine deutliche Verbesserung der Ladezeit lässt sich beispielsweise durch den Einsatz von Gzip- oder Deflate-Komprimierungstechnologien erzielen. Das spart Geld und Bandbreite.

Ist es möglich, HTML, CSS und JavaScript zu komprimieren?

Die Komprimierung komprimiert die angeforderten Daten zum Client, um die Übertragungszeit zu verkürzen. Die beiden gängigsten Komprimierungsmethoden im Web sind Gzip und Deflate. Der Komprimierungsprozess findet ähnliche Zeichenfolgen innerhalb eines Dokuments und ersetzt sie durch temporäre Zeichenfolgen mit demselben Platzhalter.

Daher eignen sich die beiden Methoden ideal zum Komprimieren von HTML-, CSS- und JavaScript-Dateien, da sie oft viele identische Zeichenketten und meist viele Leerzeilen und Leerzeichen enthalten. Beide Verfahren lassen sich mit relativ geringem Aufwand implementieren bzw. aktivieren.

Wie die Website-Code-Komprimierung funktioniert

Damit komprimierte Daten übertragen werden können, muss der Browser des Clients zunächst die komprimierte Übertragung der Daten anfordern. Dies geschieht über einen HTTP-Request mit der Angabe „Accept-Encoding: gzip, deflate“. Es können entweder nur eine oder mehrere Komprimierungsmethoden angegeben werden, und das Beispiel akzeptiert sowohl gzip- als auch deflate-komprimierte Daten.

Wichtig ist, dass dies nur eine Anfrage und keine Aufforderung ist – der Server muss also nicht mit komprimierten Daten antworten. Liegen die Daten nicht komprimiert vor, werden sie einfach unkomprimiert an den anfragenden Client gesendet.

Etwa 90 % aller Browser unterstützen die Komprimierung. Einfluss auf die „Accept-Encoding“-Einstellung, oder die erlaubten Komprimierungsmethoden des Browsers, besteht in der Regel nicht. Entweder unterstützt der Browser die Datenkomprimierung oder nicht.

Der Server antwortet auf die HTTP-Anfrage des Clients mit einer sogenannten „HTTP-Response“. Wenn der Server Komprimierung unterstützt, werden die Daten dann komprimiert an den Client übertragen. Im Header der HTTP-Response meldet der Server dann beispielsweise „Content-Encoding: gzip“. Andernfalls wird die angeforderte Ressource unkomprimiert an den Client gesendet.

Wie wird die Website-Code-Komprimierung aktiviert?

Je nach Server kann die Code-Komprimierung über eine entsprechende Konfigurationsdatei aktiviert werden.

Abbildung 1: Diagramm der Gzip-Komprimierung

Aktivierung der Code-Komprimierung mit .htaccess

Auf NCSA-kompatiblen Webservern (z. B. Apache, dem am weitesten verbreiteten Webserver) kann die Gzip-Komprimierung mithilfe der Konfigurationsdatei .htaccess installiert werden. Dazu muss folgender Code in die .htaccess-Datei eingefügt werden:

<IfModul mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</WennModul>

Zuerst wird mit „<IfModule mod_deflate.c>“ getestet, ob das Erweiterungsmodul mod_deflate installiert ist. Wenn ja, bestimmt die Verwendung von „<FilesMatch“\\.(js|css|html|xml)$“>“, auf welche Dateitypen der Filter angewendet werden soll.

Das Beispiel filtert nach JavaScript-, CSS-, HTML- und XML-Dateien. Mit „SetOutputFilter DEFLATE“ wird dann bestimmt, dass alle Dateien, die dem zuvor festgelegten Muster entsprechen, mit dem DEFLATE-Filter versendet werden. Anschließend wird das Matching und die Abfrage des Moduls wieder geschlossen.

Theoretisch lässt sich dieser Filter auch auf andere Datentypen (z. B. .jpg-, .gif- oder .png-Bilddateien) anwenden. Der Dateiabgleich müsste wie folgt angepasst werden:

„<FilesMatch“\\.(js|css|html|xml|png|jpg|gif)$“>“

Hierbei ist jedoch zu beachten, dass diese Formate in der Regel bereits komprimiert sind und die erneute Komprimierung häufig zu Qualitätsverlusten bei Bilddateien führt. Es wird daher empfohlen, Binärdateien (z. B. Bilder) vor dem Hochladen zu komprimieren und davon abzusehen, sie mit gzip zu komprimieren. Hierfür können Tools wie JPEGmini oder TinyPNG verwendet werden.

Aktivierung der Codekomprimierung mit PHP

Wenn Sie keinen Zugriff auf die .htaccess-Datei des Servers haben oder nur einzelne gzip-komprimierte Dateien übertragen möchten, haben Sie die Möglichkeit, die Komprimierung mit den folgenden Codes zu aktivieren:

<?php ob_start("ob_gzhandler"); ?>

Diese Funktion sollte nach Möglichkeit vor dem ersten HTML-Code platziert werden.

Beispiel:

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<Körper>
<p>Dies sollte eine komprimierte Seite sein.</p>
</body>
</html>

5 Fallstricke beim Komprimieren von Website-Code

Das Komprimieren von HTML und anderem Website-Code kann ebenfalls Fehler oder Risiken verursachen. Über folgende Punkte sollten Sie nachdenken:

1. Bei der Verwendung von Gzip über https können Sicherheitslücken ausnutzbar gemacht werden. Dies kann bei Dateien mit vertraulichen Informationen zu Problemen führen. Das Komprimieren von Dateitypen, die sensible Informationen enthalten, mit Gzip wird daher nicht empfohlen.

2. Die Komprimierung sollte nur auf Dateitypen oder Dateien angewendet werden, die nicht bereits komprimiert sind. Bilddateien sind in der Regel bereits herunterskaliert und sollten daher nicht zusätzlich per gzip komprimiert werden. Die erneute Komprimierung kann sogar den gegenteiligen Effekt haben und Sie können am Ende eine größere Dateigröße erhalten, oder der Komprimierungsprozess nimmt zu viel Speicherplatz in Anspruch.

3. Die Komprimierung sollte nur auf Dateien mit angemessener Größe angewendet werden. Bei Dateien, die nur wenige Bytes groß sind, kann die Komprimierung dazu führen, dass die Datei noch größer als die Originaldatei wird.

4. Achten Sie während der Kompressionsphase darauf, nicht zu stark zu komprimieren. Oft gibt es kaum Unterschiede in der Dateigröße zwischen schwachen, normalen und stark komprimierten Dateien. Mittlere oder starke Komprimierung erfordert jedoch deutlich mehr Rechenleistung.

5. Da der Komprimierungsprozess identische oder sich wiederholende Zeichenfolgen ersetzt, führt die Verwendung von Variablen- und Klassennamen (z. B. in CSS- und HTML-Dateien) zu einem höheren Komprimierungserfolg, als wenn alle Variablen und Klassen unterschiedlich benannt werden, und hat daher wenig Potenzial Kompression bieten.

Weitere Optimierungsmaßnahmen für schlanke Codes

Minimierung von HTML und andere Strategien

Um den Quellcode klar und prägnant zu halten, arbeiten Entwickler normalerweise mit Zeilenumbrüchen, Leerzeichen, Einzügen und anderen Zeichen, die den Quellcode leicht lesbar machen. Um den Quellcode später besser pflegen zu können, werden besonders komplizierte Konstrukte und Abschnitte oft mit Hilfe von Kommentaren dokumentiert.

Was für den Entwickler äußerst hilfreich ist, wird vom Suchmaschinen-Crawler nicht benötigt und sollte daher entfernt werden. Das Ausschneiden unnötiger Zeichen wird als „Minifizieren“ bezeichnet und hilft, wertvolle Bytes zu sparen. Wie viele Bytes durch das Minifying eingespart werden, zeigt eindrucksvoll das folgende Beispiel anhand der kostenlosen JavaScript-Bibliothek jQuery.

Während die Originaldatei des Frameworks in der Version 2.1.4 eine Größe von ca. 242kb hat (jQuery 2.1.4.js (unkomprimiert)), beträgt die reduzierte Dateigröße nach dem Entfernen unnötiger Zeichen und Kommentare nur noch ca. 82kb (jQuery 2.1.4. min.js (komprimiert)). Nur durch das Minimieren – also durch das Reduzieren unnötiger Zeichen – kann die Dateigröße um etwa 66 % reduziert werden. Ein bemerkenswertes Ergebnis.

Quellcode vor und nach dem Minifizierungsprozess

Minifying funktioniert für HTML-, CSS- und JavaScript-Dateien.

Darüber hinaus kann die reduzierte jQuery-Datei durch die Gzip-Komprimierung um weitere 65 % reduziert werden. Aus den ursprünglichen 242kb sind am Ende nur unglaubliche 29,5kb.

Tools zum Reduzieren von CSS- und JavaScript-Code

Um CSS-Code zu reduzieren, können Sie beispielsweise YUI Compressor oder cssmin.js verwenden. Es gibt auch mehrere Tools, mit denen JavaScript-Code reduziert werden kann. Google PageSpeed ​​Insights empfiehlt Closure Compiler, JSMin oder YUI Compressor.

Tipp: Da die verwendeten Zeilenumbrüche, Leerzeichen und Kommentare sehr wichtig für den Entwickler und für die schnelle, unkomplizierte Pflege sind, empfiehlt es sich, sowohl die Datei im Originalzustand (mit den unnötigen Zeichen) als auch die Datei im optimierten / reduzierten Zustand zu belassen . So lässt sich der Code einfach warten, ist aber für Crawler auch deutlich schneller herunterzuladen.

Kombinieren von CSS- und JavaScript-Dateien

Oft werden mehrere CSS- und JavaScript-Dateien in den HTML-Header einer Website geladen. Bei jedem Aufruf handelt es sich um einen HTTP-Request, der vom Browser verarbeitet werden muss. Moderne Browser können nur 2-8 HTTP-Anfragen von derselben Domain gleichzeitig verarbeiten – alle anderen Anfragen müssen warten.

Da eine einzelne Website bis zu mehreren hundert HTTP-Anfragen erfordern kann, entsteht ein riesiger Engpass. Dies kann beispielsweise dadurch verhindert werden, dass alle CSS-Dateien in einer Datei zusammengefasst werden und somit nur einen HTTP-Request darstellen.

Gleiches gilt für JavaScript-Dateien, die über das <script>-Element geladen werden. Auch hier sollten Sie, sofern technisch möglich, darauf achten, alle JavaScript-Dateien zu einer Datei zusammenzufassen.

Zu beachten ist, dass oft jeder Seitentyp (z. B. unterer Teil einer Zeitschrift vs. Produktdetailseite) unterschiedliche JavaScript-Funktionen und damit unterschiedliche JavaScript-Dateien benötigt. In diesem Fall ist es sinnvoll, pro Seitentyp nur die tatsächlich benötigten JavaScript- und CSS-Dateien zu laden. Das Gruppieren aller JavaScript-Dateien in einer einzigen kann in diesem Fall Nachteile haben.

Darüber hinaus kann die Nutzung von Subdomains oder eines Content Delivery Networks (CDN) sinnvoll sein. Nicht sofort benötigte Skripte und Ressourcen können mit AJAX nachgeladen werden.

Zusammenfassung zum Komprimieren von Website-Code

Durch die Auslieferung der Website-Daten mittels Gzip oder Deflate kann eine deutliche Verbesserung der Ladezeit erreicht werden. Beide Methoden eignen sich hervorragend zum Komprimieren von HTML-, CSS- und JavaScript-Dateien. Darüber hinaus ist das Minimieren eine weitere nützliche Methode, um den Code schlank zu halten.

Da Suchmaschinen-Crawler die hilfreichen Zeilenumbrüche, Einzüge etc. der Entwickler im Quellcode nicht benötigen, können Sie diese unnötigen Zeichen einsparen. Es gibt auch hilfreiche Tools, die CSS- und JavaScript-Code reduzieren. Dadurch können auch viele Bytes eingespart werden.

Um zu verhindern, dass eine Website zu viele HTTP-Anfragen benötigt, können CSS- und JavaScript-Dateien zusammengefasst werden. Diese stellen nur einen HTTP-Request dar, was zusätzliche Ressourcen spart.

Dadurch kann bereits mit wenigen Codezeilen und kleinen Eingriffen auf der Website eine optimale Verschlankung des Codes erreicht werden. Da die Ladezeit der Website ein wichtiger SEO- und Rankingfaktor ist, sollte sich jeder Webmaster im Laufe der Zeit mit diesem Thema auseinandersetzen.

Die Komprimierung des Website-Codes sorgt für ein verbessertes Nutzererlebnis, das sich positiv auf andere Metriken wie Conversion-Rate oder Verweildauer auswirkt. Dies wiederum stellt einen wichtigen Aspekt für den gesamten Unternehmenserfolg dar und führt zu zufriedenen Anwendern.