HTML komprimieren – so reduzierst Du Deinen Website Code

Website Besucher erwarten neben qualitativ-hochwertigem Content eine optimale User Experience mit schnell erreichbaren Inhalten. Die gute Nachricht: Bereits mit wenigen Zeilen Code und kleinen Kniffen lassen sich Webseiten um 40% bis 70%, in Ausnahmefällen sogar noch weiter, komprimieren. Wie das geht, stelle ich in diesem Artikel vor.

Warum den Website Code komprimieren?

Nun kann man sich die Frage stellen: Warum sollte ich in Zeiten von Streaming und Co. den Quellcode meiner Website komprimieren, wenn dieser unkomprimiert “nur” einige hundert Kilobyte groß ist? Die Antwort ist simpel: Weil schneller ladende Webseiten eine bessere User Experience bieten, die sich wiederum positiv auf die Verweildauer auf der Seite, die Anzahl aufgerufener Seiten pro Besucher, die und – besonders wichtig – auf die Conversion Rate auswirkt.

Die Conversation Rate ist deshalb so entscheidend, weil sie sich zum Beispiel für Onlineshops unmittelbar auf den Unternehmenserfolg auswirkt.

So kostet dem E-Commerce-Riesen Amazon eine Ladezeitverzögerung von 100ms rund 1% Umsatz. Hochgerechnet auf ein ganzes Geschäftsjahr würden sich somit Opportunitätskosten in Höhe von rund 245 Millionen US Dollar ergeben. Diese Zahlen zeigen eindrucksvoll, welchen Einfluss die Ladegeschwindigkeit einer Website haben kann.

Hinzu kommt, dass immer mehr Nutzer über das mobile Netz im Internet surfen, während die Abdeckung mit LTE und 4G noch ausbaufähig ist. Deshalb sind gerade im manchmal ziemlich langsamen mobilen Internet sind schnellere Seitengeschwindigkeiten von großer Bedeutung.

Wie komprimiert man HTML, CSS und JavaScript?

Eine Komprimierung des Website Codes lässt sich durch das komprimierte Ausliefern der Daten mittels Gzip oder Deflate erreichen. Dadurch werden Kosten und Bandbreite gespart und somit die Ladezeiten reduziert.

Was bedeutet das? Die Idee der Komprimierung besteht darin, die angeforderten Daten verdichtet an den Client zu übertragen, um so die Transferzeit zu reduzieren. Die beiden geläufigsten Komprimierungsmethoden im Web sind Gzip und Deflate. Beim Komprimierungsprozess werden ähnliche Strings innerhalb eines Dokuments lokalisiert und durch temporäre Strings mit gleichem Platzhalter ersetzt.

Damit eignen sich die beiden Verfahren hervorragend zur Komprimierung von HTML-, CSS– und JavaScript-Dateien, da sie häufig viele gleiche Strings und in der Regel viele Leerzeilen und Leerzeichen enthalten. Beide Methoden lassen sich mit verhältnismäßig geringem Aufwand umsetzen bzw. aktivieren.

Wie die Website Code Komprimierung funktioniert

Damit Daten komprimiert ü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 kann entweder nur eine oder aber mehrere Komprimierungsmethoden angegeben werden. Wichtig ist, dass es sich hierbei immer nur um eine Anfrage (engl. Request), nicht aber um eine Forderung handelt. Dadurch muss der Server nicht mit komprimierten Daten antworten. Liegen die Daten nicht in komprimierter Form vor, so werden sie einfach unkomprimiert an den anfragenden Client übertragen.

Heute unterstützen rund 90% aller Browser Komprimierung. Einfluss auf die “Accept-Encoding”-Einstellung, also die erlaubten Komprimierungsmethoden des Browsers, besteht in der Regel nicht. Entweder unterstützt der Browser die Komprimierung von Daten oder er unterstützt sie nicht.

Der Server antwortet auf den HTTP Request des Clients mit der sogenannten HTTP Response. Unterstützt der Server die Komprimierung, so werden die Daten komprimiert an den Client übertragen. Im Header der HTTP Response meldet der Server dann zum Beispiel “Content-Encoding: gzip”. Im anderen Fall wird die angeforderte Ressource unkomprimiert an den Client übermittelt.

Wie lässt sich die Komprimierung aktivieren?

Je nach Server lässt sich die Komprimierung über eine entsprechende Konfigurationsdatei aktivieren.

Abbildung 1: Diagramm zur Gzip-Komprimierung

Aktivierung der Code Komprimierung mittels .htaccess-Konfigurationsdatei

Auf NCSA-kompatiblen Webservern (z. B. Apache, dem weitverbreitesten Webserver) lässt sich die Gzip Komprimierung mittels .htaccess-Konfigurationsdatei installieren. Dazu muss folgender Code in die .htaccess-Datei eingefügt werden:

Zunächst wird mittels “<IfModule mod_deflate.c>” abgefragt, ob das Erweiterungsmodul mod_deflate installiert ist. Ist dies der Fall, wird mittels “<FilesMatch”\\.(js|css|html|xml)$”>” festgelegt, für welche Dateitypen der nachfolgende Filter angewendet werden soll. Im Beispiel wird nach JavaScript-, CSS-, HTML- und XML-Dateien gefiltert.

Mit “SetOutputFilter DEFLATE” wird dann bestimmt, dass alle Dateien, die auf das zuvor angegebene Muster passen, mit dem DEFLATE-Filter ausgeliefert werden. Anschließend wird das Matching und die Abfrage des Moduls wieder geschlossen.

Theoretisch lässt sich dieser Filter auch noch auf andere Dateitypen (z. B. Bilddateien vom Typ .jpg, .gif oder .png) anwenden. Das File-Matching müsste dazu wie folgt angepasst werden:

Allerdings solltest Du beachten, dass diese Formate in der Regel bereits komprimiert sind und es durch die erneute Komprimierung häufig zu einem Qualitätsverlust der Bilddateien kommt. Es wird daher empfohlen, Binärdateien wie Bilder bereits vor dem Hochladen zu komprimieren und auf das Komprimieren mittels gzip zu verzichten. Dazu können beispielsweise spezielle Tools wie JPEGmini.com verwendet werden.

Aktivierung der Code Komprimierung mittels PHP

Wenn Du keinen Zugriff auf die .htaccess-Datei Deines Servers hast oder nur einzelne Dateien gzip-komprimiert übertragen möchtest, kannst Du die Komprimierung durch den Einsatz folgenden Codes aktivieren:

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

Diese Funktion sollte möglichst vor der ersten Ausgabe von HTML-Code platziert werden.

Beispiel:

Grenzen der Code Komprimierung

Doch aufgepasst, bei der Komprimierung können auch Fehler gemacht werden. Du solltest folgende Punkte beachten:

1. Eine Komprimierung sollte nur auf Dateitypen bzw. Dateien angewendet werden, die nicht schon komprimiert sind. Bilddateien sind in der Regel bereits verkleinert und sollten daher nicht zusätzlich mittels gzip komprimiert werden. Durch die erneute Komprimierung kann es sogar zu einem gegenteiligen Effekt kommen und man erhält eine höhere Dateigröße oder der Komprimierungsprozess beansprucht unnötig viel Speicher.

2. Eine Komprimierung sollte nur bei Dateien angewendet werden, die eine entsprechende Größe aufweisen. Bei Dateien, die nur wenige Byte groß sind, kann eine Komprimierung dazu führen, dass die Datei sogar größer wird, als die Originaldatei.

3. Bei der Komprimierungsstufe solltest Du darauf achten, dass nicht zu stark komprimiert wird. Häufig ist zwischen schwach, normal und stark komprimierten Dateien kaum ein großer Unterschied hinsichtlich der Dateigröße festzustellen. Eine mittlere oder starke Komprimierung benötigt jedoch deutlich mehr Rechenleistung.

4. Da beim Komprimierungsprozess gleiche bzw. sich wiederholende Strings ersetzt werden, wird durch den Einsatz von Variablen und Klassenbezeichnungen (z. B. in CSS und HTML-Dateien) ein höherer Komprimierungserfolg erzielt, als wenn alle Variablen und Klassen unterschiedlich benannt sind und somit wenig Potential zur Komprimierung bieten.

Weitere Optimierungsmaßnahmen im Hinblick auf schlanken Code

Minifying HTML: Entfernen unnötiger Zeichen

Um den Quellcode übersichtlich und verständlich zu halten, arbeiten Entwickler in der Regel mit Zeilenumbrüchen, Leerzeichen, Einzügen und anderen Zeichen, die dafür sorgen, dass der Quellcode leicht zu lesen ist. Um den Quellcode später besser warten zu können, werden besonders komplizierte Konstrukte und Abschnitte häufig 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. Die Reduzierung unnötiger Zeichen wird als “Minifying” bezeichnet und hilft uns, wertvolle Bytes zu sparen. Wie viel Bytes sich durch Minifying einsparen lassen, zeigt eindrucksvoll das nachfolgende Beispiel anhand der freien JavaScript-Bibliothek jQuery.

Während die Original-Datei des Frameworks in der Version 2.1.4 rund 242kb groß ist (jQuery 2.1.4.js (unkomprimiert)), beträgt die Dateigröße der um unnötige Zeichen und Kommentare reduzierte Datei nur rund 82kb (jQuery 2.1.4.min.js (komprimiert)). Nur durch Minifying – also das Reduzieren unnötiger Zeichen – lässt sich die Dateigröße um rund 66% senken. Ein beachtliches Ergebnis.

Abbildung 2: Quellcode vor und nach dem Minifying und Uglifying

Minifying funktioniert sowohl für HTML- als auch für CSS- und JavaScript-Dateien.

Übrigens lässt sich die reduzierte jQuery-Datei mittels Gzip-Komprimierung um weitere 65% verkleinern. Aus den ursprünglich 242kb werden somit sagenhafte 29,5kb.

Tools zum Reduzieren von Ressourcen

Um CSS-Code zu reduzieren, kannst Du beispielsweise den YUI Compressor oder cssmin.js verwenden. Ebenso gibt es einige Tools, mit welchen sich JavaScript-Code reduzieren lässt. Google PageSpeed Insights empfiehlt hierzu Closure Compiler, JSMin oder YUI Compressor.

Hinweis: Da die verwendeten Zeilenumbrüche, Leerzeichen und Kommentare durchaus wichtig für den Entwickler und die schnelle unkomplizierte Wartung sind, empfehle ich,  die Dateien sowohl im Original-Zustand (mit den unnötigen Zeichen) als auch im optimierten/reduzierten Zustand vorzuhalten. Somit lässt sich der Code leicht pflegen, für den Crawler aber deutlich schneller downloaden.

CSS- und JavaScript-Dateien zusammenfassen

Häufig werden im HTML-Header einer Website gleich mehrere CSS- und JavaScript-Dateien geladen. Jeder dieser Aufrufe stellt einen HTTP Request dar, der vom Browser verarbeitet werden muss. Zu beachten ist dabei, dass moderne Browser standardmäßig nur 2-8 HTTP Requests von derselben Domain gleichzeitig bearbeiten können, alle anderen Requests müssen warten. Eine Tabelle mit den genauen Werten aller Browser findet sich hier.

Da eine einzelne Website jedoch bis zu mehreren hundert HTTP Requests benötigen kann, entsteht hierdurch ein gewaltiges Nadelöhr. Dies lässt sich verhindern, indem Du alle CSS-Dateien in einer Datei zusammenfasst, wodurch zum Ladennur ein HTTP Request benötigt wird.

Gleiches gilt für JavaScript-Dateien die via <script>-Element geladen werden. Auch hier solltest Du darauf achten, dass alle JavaScript-Dateien – sofern technisch möglich – zu einer Datei zusammengefasst werden.

Wichtig ist dabei, dass häufig pro Seitenart (z.B. Magazin-Unterseite vs. Produktdetailseite) unterschiedliche JavaScript-Funktionen und damit unterschiedliche JavaScript-Dateien benötigt werden. In diesem Fall ist es sinnvoll, pro Seitenart nur die JavaScript- und CSS-Dateien zu laden, die tatsächlich benötigt werden. Eine Zusammenfassung aller JavaScript-Dateien zu einer einzigen kann hier von Nachteil sein.

Außerdem kann sich der Einsatz von Subdomains oder eines Content Delivery Networks (CDN) lohnen. Scripts und Ressourcen, die nicht sofort benötigt werden, können per AJAX nachgeladen werden.

Website Komprimierung mit Ryte prüfen

Wenn Du Dir nicht sicher bist, wie es um die Größen Deiner Website-Files steht, kannst Du diese ganz einfach in Ryte Web Performance prüfen. Der "Komprimierung"-Report bietet für alle Dokumenttypen eine Übersicht der aktiven Komprimierungen. In der Tabellenübersicht kannst Du Dir über Tabelle anpassen > Dateigröße zusätzlich die Dateigrößen aller vorhandenen Dokumente anzeigen lassen.

Abbildung 3: Website Komprimierung prüfen mit Ryte

Zusammenfassung: Komprimierung von Website-Code

In diesem Artikel habe ich verschiedene Methoden zur Komprimierung von Website Code vorgestellt, die Dir hoffentlich dabei helfen, Deine Website schlank und schnell zu halten. im Überblick:

• Durch die Auslieferung der Daten mittels Gzip oder Deflate lässt sich eine deutliche Verbesserung der Website Ladezeit erreichen. Beide Verfahren eignen sich hervorragend zur Komprimierung von HTML-, CSS- und JavaScript-Dateien.

• Minifying ist eine weitere, sinnvolle Möglichkeit, um Website Code schlank zu halten. Da der Crawler der Suchmaschine die für den Entwickler hilfreichen Zeilenumbrüche, Einzüge usw. im Quellcode nicht benötigt, können diese unnötigen Zeichen reduziert werden.

• Mithilfe praktischer Tools kann CSS- sowie JavaScript-Code reduziert werden. Auch dadurch lassen sich zahlreiche Bytes sparen.

• Um zu verhindern, dass eine Website zu viele HTTP Requests benötigt, lassen sich CSS- und JavaScript-Dateien zusammenfassen. Diese stellen somit nur noch je einen HTTP-Request dar, was zusätzlich Ressourcen schont.

Mit diesen Tipps kannst Du schon mit wenigen Zeilen Code und kleinen Eingriffen eine Entschlankung Deines Website Codes erreichen. Da die Ladezeit der Website einen wichtigen SEO- und Rankingfaktor darstellt, solltest Du Dich unbedingt mit diesem Thema auseinander setzen. Denn wie schon erklärt, führt die Komprimierung des Codes zu einer verbesserten User Experience, die sich positiv auf die Conversion Rate Deiner Website und somit auf Deinen digitalen Erfolg auswirkt.