Schnell, schneller, ausreichend

Mithilfe eines Ampelsystems teilt Google die Werte in „gut“, „neutral“ und „schlecht“ ein. Den PageSpeed von 0 bis 64 kennzeichnet Google als schlecht, den Wert von 65 bis 84 als neutral und ab dem Wert 85 vergibt Google eine positive Bewertung.

Um eine durchschnittliche Bewertung der Shops gewährleisten zu können, wurde ein Mittelwert aus Startseite, Kategorieseiten und Produktseiten erhoben. Dabei wurde nur der PageSpeed für die Desktop-Variante berücksichtigt. Anbei der aktuelle Stand deutscher Top 100 Online-Shops im Bereich der PageSpeed-Bewertung:

Auf den ersten Blick kann man erkennen, dass über 55 % der Top 100 Online-Shops eine neutrale Bewertung erhalten. Nur 6 % der Online-Shops werden von Google als positiv bewertet. Erschreckend ist die Tatsache, dass fast 40 % der Shops von Google als „schlecht“ in Bezug auf die Ladezeit eingestuft werden.

Der durchschnittliche PageSpeed-Wert aller Top 100 Online-Shops liegt momentan bei 68 von 100 und befindet sich damit noch knapp im neutralen Bereich.

In Sachen PageSpeed-Bewertung sieht es für die Top 100 Online-Shops somit nicht besonders rosig aus. Um die Ursachen hinter den Ergebnissen verstehen zu können, ist es notwendig, sich die größten von Google vorgeschlagenen Optimierungshebel anzusehen:

Man kann sehr gut erkennen, dass das Thema „JavaScript- und CSS-Rendering“ 74 % der Online-Shops betrifft und somit das Hauptproblem der Google-PageSpeed-Optimierung darstellt, dicht gefolgt von den Optimierungsmaßnahmen „Browser-Caching“ mit 62 % und „Bilder optimieren“ mit 44 %. Die Optimierungsmaßnahme „Komprimierung aktivieren“ betrifft immerhin noch 9 % aller Top 100 Online-Shops. Weitere Maßnahmen betreffen einzelne Shops oder fallen nur leicht ins Gewicht.

Im Nachfolgenden werden die vier Optimierungsmaßnahmen kurz erklärt und es wird auf die Probleme in Verbindung mit Online-Shops näher eingegangen.

JS- und CSS-Rendering optimieren

Werden JavaScript- und CSS-Dateien im Quellcode nicht richtig positioniert, kann es dazu kommen, dass diese Dateien das Rendering der Seite – also den Seitenaufbau – blockieren. Durch die Blockierung des Renderings verlängert sich die Zeit, in welcher sich der für den User sichtbare Bereich (above the fold) aufbaut. Im schlimmsten Fall erhält der Besucher beim Aufbau der Seite für die ersten Sekunden nur eine leere Seite. Erst danach werden Stück für Stück die Inhalte von oben nach unten geladen. Folgende Grafik soll den sogenannten „Rendering Path“ nochmals verdeutlichen:

Zunächst wird die HTML-Datei vom Server angefordert und heruntergeladen. Danach beginnt der Browser, die HTML-Datei zu lesen, und bemerkt zwei CSS-Dateien. Das Rendering wird gestoppt, da die CSS-Dateien zunächst heruntergeladen werden müssen. Danach stößt der Browser auf zwei JavaScript-Dateien und muss auch diese zunächst herunterladen. Erst danach lädt der Browser die Webseite weiter und beginnt somit, die ersten Bilder zu laden.

Das Rendering kann bereits bei einer geringen Anzahl an CSS- sowie JavaScript-Dateien enorm verzögert werden. Nicht selten verwenden Webseiten deutlich mehr Ressourcen und positionieren diese wild verteilt im Quellcode. Je nach Webseite muss hier der Rendering Path genau analysiert werden, um Optimierungsmöglichkeiten vorschlagen zu können.

Ziel hierbei ist es, nicht die gesamte Ladezeit zu optimieren, sondern das Anzeigen des sichtbaren Bereichs (above the fold) zu beschleunigen. Es müssen daher sämtliche Dateien, die für diesen Bereich zuständig sind, bevorzugt geladen werden. Dateien, die für die Darstellung des „Above the fold“-Bereichs nicht benötigt werden, sollten innerhalb des Quelltextes an das Ende verschoben oder im Hintergrund (asynchron) geladen werden.

Sieht man sich bspw. den Online-Shop von QVC etwas genauer an, bemängelt Google, dass insgesamt 25 blockierende JavaScript-Ressourcen und sieben blockierende CSS-Ressourcen an einer Verzögerung des Renderings beteiligt sind.

Schwer ist es bei dieser Optimierungsmaßnahme, pauschale Aussagen zu treffen. Allgemein kann jedoch Folgendes gesagt werden:

• JavaScript und CSS sollten stets nur notwendigen Code beinhalten, also aufgeräumt sein.
• Sämtlicher Code sollte in möglichst wenig unterschiedlichen Dateien bereitgestellt werden. Eine Anzahl von 25 unterschiedlichen JavaScript-Dateien wie im oberen Beispiel sollte vermieden werden.
• JavaScript sollte – wenn möglich – am Ende des Quellcodes geladen werden.
• Das notwendige CSS für den sichtbaren Bereich der jeweiligen Seite sollte im Bestfall direkt im Head der Seite – wenn möglich auch inline (direkt im Quellcode) – geladen werden. Der restliche CSS-Code sollte am Ende des Quellcodes aufgerufen werden.

Es muss jedoch unbedingt erwähnt werden, dass die Umsetzung dieser Optimierungsmaßnahme bei Online-Shops oftmals sehr große technische Herausforderungen mit sich bringt. Sämtliche JavaScript- und CSS-Dateien müssen auseinandergenommen, auf Funktionalität überprüft und in kritische und unkritische Ressourcen aufgeteilt werden. Besonders für CSS-Dateien ist es ein komplexer Prozess, für jede Unterseite automatisiert festzustellen, welche Regeln gerade für den Content im sichtbaren Bereich (above the fold) benötigt werden und welche nicht.

Empfehlenswert ist es, die Optimierungsmaßnahme direkt in einen Shop-Relaunch zu integrieren und das Rendering von Grund auf zu planen. Auf diesem Wege kann das Rendering der Seite grundlegend überarbeitet und nach einer ladezeitorientierten Logik neu aufgebaut werden.

Durch die Positionierung von Ressourcen kann das Rendering einer Seite deutlich verbessert werden. Je nach Online-Shop ist dies jedoch nur mit enormen technischen Herausforderungen umzusetzen.

Browser-Caching nutzen

Beim Besuch einer Seite speichert der Browser die Seite und deren einzelne Ressourcen (CSS, JS oder Bilder) im Zwischenspeicher (Cache) ab. Besucht man die Seite ein weiteres Mal, fragt der Browser beim Server nach, ob sich die jeweiligen Dateien geändert haben. Falls diese sich verändert haben, werden die Dateien neu angefordert. Haben sich die Dateien jedoch nicht verändert, lädt der Browser die Seite direkt aus dem Cache. Dadurch müssen diese Ressourcen nicht bei jedem Seitenaufruf neu vom Server angefordert werden, sondern werden direkt von der lokalen Festplatte des Nutzers geladen. Dies ermöglicht es, eine große Anzahl an PageSpeed raubenden Dateianforderungen (HTTP Requests) einzusparen.

Google PageSpeed empfiehlt für Ressourcen mindestens eine Haltbarkeit von einer Woche. Bei einigen Ressourcen kann es jedoch durchaus sinnvoll sein, höhere Zeiträume zu definieren.

Wichtig: Werden Änderungen innerhalb dieser Woche bspw. an CSS-Dateien durchgeführt, erhalten wiederkehrende Besucher diese im Zeitraum von einer Woche nicht. Dies kann man jedoch durch eine Versionierung der Dateinamen lösen. Anstatt die CSS-Datei nur style.css zu nennen, kann man diese bspw. nach dem letzten Änderungsdatum style-20-05-15.css benennen. Sobald der Name einer Datei geändert wird, greift die Caching-Zeit nicht mehr.

Sieht man sich bspw. den Online-Shop von MyToys im PageSpeed Insights Tool an, fällt sofort auf, dass sämtlichen Dateiformaten kein bzw. nur ein kurzes Ablaufdatum gegeben wurde. Die Dateiformate besitzen eine Caching-Zeit von unter 8,5 Stunden:

Mytoys könnte dieses Problem relativ einfach und ohne großen Aufwand mithilfe einer Anweisung innerhalb der .htaccess-Datei lösen. Das Browser-Caching lässt sich über die .htaccess-Datei mit dem Modul expires.c definieren:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html „access plus 1 week“
    ExpiresByType text/css „access plus 1 week“
    ExpiresByType application/javascript „access plus 1 month“
    ExpiresByType application/x-javascript „access plus 1 month“
    ExpiresByType image/jpeg „access plus 6 month“
    ExpiresByType image/png „access plus 6 month“
    ExpiresByType image/gif „access 1 year"
    ExpiresByType application/pdf „access 1 month"
    ExpiresByType image/x-icon „access plus 1 year“
</IfModule>

Mithilfe des oberen Codes erhalten die genannten Dateiformate verschiedene Caching-Laufzeiten, die mindestens über einer Woche liegen.

Zudem sollte man wissen, dass das Google PageSpeed Insights Tool auch Dateien von fremden Servern zeigt und die Caching-Laufzeit bemängelt. Auf die Caching-Laufzeit von Fremddateien haben Sie jedoch keinen Zugriff und müssen daher damit leben.

Browser-Caching lässt sich relativ einfach und schnell über die .htaccess-Datei aktivieren und bietet somit die Möglichkeit, mit wenig Aufwand vor allem die Ladezeit für wiederkehrende Besucher zu reduzieren.

Bilder optimieren

Bilder sind eine der größten Ressourcen, welche eine Webseite zu laden hat. Laut httparchive.org/interesting.php verursachen Bilder über 60 % der Dateigröße aller Ressourcen. Zudem findet man vor allem in Online-Shops immer größere und aufgrund von Technikneuerungen wie Retina-Displays auch immer hochwertigere Bilder. Daher bieten Bilder meist großes Potenzial bei der Optimierung der Ladezeit.

Der PageSpeed-Wert von kfzteile24.de entspricht für die Startseite nur 30 von 100. Das Optimieren von Bildern wird hierbei von Google als die wichtigste Maßnahme definiert – nicht verwunderlich, bei einer möglichen Einsparung von 1,2 MB (entspricht 40 %).

Bei kfzteile24.de stößt man gleich auf die erste Regel der Bilderoptimierung: Bilder müssen in der Bildabmessung abgespeichert werden, in welcher sie später Verwendung finden (nicht kleiner und nicht größer). Aktuell werden Bilder in einer Größe geladen, in welcher Sie später überhaupt nicht verwendet werden. Man lädt somit eine große Datei und braucht diese danach nur als kleines Bild.

Neben der Bildabmessung kann auch durch die Auswahl des richtigen Bildformates Dateigröße eingespart werden. Die zwei gängigsten Bildformate, welche man je nach Zweck im Internet verwendet, sind JPEG und PNG. Das Bildformat GIF wurde weitestgehend von PNG abgelöst, da es keinerlei Besserungen aufweist.

JPEG – Das Bildformat JPEG steht ausgeschrieben für Joint Photographic Expert Group und ist, wie der Name schon sagt, für Fotos vorgesehen. Der größte Vorteil ist die enthaltene, nicht verlustfreie Kompression. Dies hat den Vorteil, dass man den Kompromiss zwischen Qualität und Bildgröße komplett selbst steuern kann. JPEG eignet sich dadurch vor allem für Bilder, welche eine geringe Dateigröße aufweisen sollen. Der große Nachteil bei JPEG ist, dass die Qualität der Bilder durch jeden Bearbeitungsprozess abnimmt.

PNG – Das Bildformat PNG (Portable Network Graphics) ist im Gegensatz zu JPEG verlustlos. Will man Bilder in höchster Qualität darstellen, sollte man sich für PNG entscheiden. Der Nachteil ist jedoch, dass PNG deutlich mehr Speicherplatz benötigt als JPEG. Zudem wird PNG bevorzugt von Webdesignern eingesetzt, da das Bildformat die Möglichkeit der Transparenz bietet.

Es sollte also stets überdacht werden, ob PNG-Bilder notwendig sind. Jedoch sollte auch bei JPEG-Bildern an die Optimierung gedacht werden.

Bildkomprimierung – Bei der Bildkomprimierung verfolgt man das Ziel, das Originalbild bei möglichst gleichbleibender Bildqualität zu komprimieren, um möglichst viel Dateigröße einzusparen. Zunächst wird die Komprimierung mit dem Bildbearbeitungsprogramm Adobe Photoshop vorgenommen.

Des Weiteren werden Image-Crush-Tools verwendet, welche durch zusätzliche Methoden nochmals Dateigröße einsparen können.

Das Bildbearbeitungsprogramm Adobe Photoshop bietet extra für das Web einen eigenen Menüpunkt namens „Für Web und Geräte abspeichern“an. Dort hat man die Möglichkeit, Bilder/Grafiken als JPEG oder PNG abzuspeichern. Im Falle von JPEG kann man detailliert die Qualität des Bildes regeln und sieht durch eine „Vorher-Nachher-Ansicht“, wie sich die Qualität des Bildes verändert. Außerdem lässt sich erkennen, wie sich die Qualität auf die Dateigröße auswirkt. Soll das Bild hingegen als PNG-Format abgespeichert werden, sind die Einstellungsmöglichkeiten in Adobe Photoshop eingeschränkt. In diesem Format ist es nicht möglich, die Komprimierung des Bildes selbst zu regeln. Doch auch hier führt die Funktion „Für Web und Geräte abspeichern“ zu massiven Einsparungen bei der Dateigröße.

Durch die Bildoptimierung mit Photoshop können bereits sehr gute Ergebnisse erreicht werden. Bei einer zusätzlichen Bearbeitung der eigenen Bilder mit einem Image-Crush-Tool kann die Einsparungsgröße nochmal übertroffen werden. Diese Tools verwenden besondere Optimierungstechniken, um unnötige Bytes aus Bilddateien zu entfernen. Solche Tools sind bspw. tinypng.com für PNG und tinyjpg.com für JPEG. Jedoch sollte hier stets das Ergebnis im Auge behalten und nicht blind auf diese Tools vertraut werden.

In folgender Abbildung sieht man einen Überblick über die Bildformate JPEG und PNG sowie über die verschiedenen Optimierungsmethoden und deren Ergebnisse:

Wie schon angesprochen, sollte man im letzten Schritt bei der Bildkomprimierung mit Image-Crush-Tools auf die Qualität achten und bei Notwendigkeit diesen Punkt überspringen.

Neben den genannten Maßnahmen der Bildoptimierung gibt es noch zwei weitere Methoden, welche in Verbindung mit Online-Shops unbedingt angesprochen werden müssen:

Verwendung von LazyLoading – Bei größeren Seiten mit vielen Bildern, wie bspw. Rasterseiten in einem Online-Shop, kann es auch Sinn machen, LazyLoading einzusetzen. Dies ist eine Technik, die Bilder erst vom Server anfordert, sobald der Benutzer diese sieht. Dies bedeutet, dass Bilder erst geladen werden, wenn sie in den sichtbaren Bereich gelangen. Normalerweise werden sämtliche Bilder der Seite beim ersten Aufruf geladen, egal ob sie überhaupt gesehen werden oder nicht.

Verwendung von WebP – Unter WebP versteht man ein von Google entwickeltes Bildformat. Mit WebP kann man gegenüber JPEG bis zu 80 % der Dateigröße sparen, ohne dabei an Bildqualität einzubüßen. Einziger Nachteil von WebP ist, dass es nur unter Chrome und Opera funktioniert. Hat man jedoch einen hohen Anteil an Chrome-Usern, ist die Verwendung von WebP trotzdem lohnenswert. Hierbei muss man alle Bilder unter zwei Bildformaten zur Verfügung stellen, nämlich WebP für Chrome und Opera und bspw. JPEG für die restlichen Browser. Die Zuordnung der Bilder steuert eine Regel innerhalb der .htaccess-Datei. Würde man das obere Bild in WebP umwandeln, erhält man eine Version mit einer Dateigröße von nur 26 KB.

Bilder sollten durchgehend optimiert und stets in der bestmöglichsten Dateigröße abgespeichert und verwendet werden.

Komprimierung aktivieren (Gzip)

Gzip gilt als die einfachste Technik zur Reduzierung der Seitengröße, die gleichzeitig aber auch den stärksten positiven Einfluss auf den PageSpeed hat. Mithilfe von Gzip wird die Übertragungsgröße durch das Komprimieren von Dateien bei der Auslieferung vom Webserver verringert.

Wurde Gzip auf dem Server aktiviert, kann der Webserver die Datei in gepackter Version an den Browser ausliefern. Der Browser wiederum entpackt die Datei und öffnet sie.

Probleme im Bereich Komprimierung kann man bspw. bei Hornbach.de feststellen. Indem JavaScript- und CSS-Dateien mithilfe von Gzip komprimiert werden, können allein auf der Startseite ca. 197 KB (entspricht 72 %) eingespart werden.