Die Seitengeschwindigkeit ist ein wichtiger Performance Indikator für Deine Website. Indem Du HTML und anderen Website Code komprimierst, kannst Du Deine Pagespeed erheblich steigern. Wir erklären wie es geht...
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.
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.
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.
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.
Je nach Server lässt sich die Komprimierung über eine entsprechende Konfigurationsdatei aktivieren.
Abbildung 1: Diagramm zur Gzip-Komprimierung
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:
<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
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:
“<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”
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.
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.
<?php ob_start("ob_gzhandler"); ?>
<html>
<body>
<p>This should be a compressed page.</p>
</body>
</html>
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.
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.
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.
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.
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
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:
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.
Optimiere Deine Website mit Ryte!
Veröffentlicht am 16.03.2022 von Christoph Baur.
Christoph Baur ist Gründer und Geschäftsführer der Münchener Digital Marketing Agentur Bits & Passion GmbH, Lehrbeauftragter für Suchmaschinenmarketing an der Hochschule Augsburg und stolzes Mitglied der SEMY Award Jury. Christoph beschäftigt sich bereits seit 2003 mit SEO und Online Marketing. Sein Fokus liegt auf Strategie und Technical SEO.