Google baut mit dem PageSpeed-Test [1] auf bekannten Performance-Tests wie WebPagetest [2], YSlow [3], GTmetrix [4] oder websiteoptimization [5] und deren Kriterien auf. Der Fokus der Messung liegt in der Umsetzung möglicher Maßnahmen zur Reduzierung der Ladezeit einer Website. Je mehr Maßnahmen erfolgreich erkannt werden, desto besser wird folglich die Bewertung. Jedoch wird die für einen Besucher entscheidende Ladezeit kurioserweise weder angezeigt noch bewertet; ebensowenig wie deren Skalierung bei steigenden Zugriffszahlen, was laut Google jedoch in Kürze berücksichtigt werden soll.

Der PageSpeed-Score kann daher nur als ein Google-spezifischer Messwert gesehen werden, der keinen Anspruch hat, die tatsächliche Performance einer Website zu repräsentieren. Ziel einer Optimierung ist daher, den Score möglichst effizient zu erhöhen, um maximalen Einfluss auf den hart umkämpften PageRank zu nehmen.

Der recht junge Online-Test stellt eine schnelle Möglichkeit dar, den Score zu ermitteln. Allerdings scheint Google das Ergebnis einige Zeit zwischenzuspeichern – ändert man also eine Einstellung der Website und führt den Test erneut durch, erhält man dort oftmals noch den Wert der ersten Messung.

Es empfiehlt sich daher, für die Entwicklung eine der beiden Browser-Extensions [6] zu installieren und den PageSpeed-Score lokal zu testen. Bei TYPO3 ist hierbei wichtig, sich vorher aus dem Backend auszuloggen, um die Website unverändert anzeigen zu können.

Nach jedem Testlauf erhält man neben dem Score von Google auch gleich entsprechende Maßnahmen zur Optimierung sowie Praxistipps zu deren Umsetzung. Für den Webentwickler ist das Vorgehen daher einfach:

1. Testlauf starten
2. Am höchsten priorisierte Maßnahme feststellen
3. Maßnahme in der Website umsetzen
4. Testlauf erneut starten und Erfolg bewerten

Google kategorisiert Maßnahmen nach drei Prioritäten (High, Medium, Low), nach „Experimental Rules“, die keine Einfluss auf den Score haben, und nach „Already done!“ für umgesetzte Optimierungen. Ein fixes Bewertungsschema für die Prioritäten gibt es nicht, sie variieren je nach Website und Optimierungsstatus.

Werden etwa 20 Icons gefunden, die sich durch „Bilder in CSS-Sprites kombinieren“ zusammenfassen lassen, stuft Google diese Maßnahme als „High Priority“ ein und verhindert somit einen hohen Score. Erstellt man allerdings bis auf wenige Ausnahmen CSS-Sprites, so wird die Maßnahme nur noch als „Low Priority“ eingestuft und der PageSpeed-Score signifikant erhöht. Wird schließlich keine Grafik mehr als Sprite vorgeschlagen, rutscht die Maßnahme zu „Already done!“ und die Seite erhält die hierfür beste Bewertung.

Die folgende Liste an Maßnahmen ist typisch für eine nicht-optimierte TYPO3-Website.

• Bilder in CSS-Sprites kombinieren
• Browser-Caching nutzen

• Komprimierung aktivieren
• Bilder optimieren

• JavaScript später parsen
• Asynchrone Ressourcen bevorzugen
• Header des Typs „Vary: Accept-Encoding“ angeben

• @import in CSS vermeiden
• CSS (klein) inline einfügen
• JavaScript (klein) inline einfügen
• CSS reduzieren
• JavaScript reduzieren
• HTML reduzieren
• Ressourcen von einer konsistenten URL bereitstellen
• Umleitungen minimieren
• Zeichensatz angeben
• Bildabmessungen festlegen

Zu Beginn ist es leicht, mithilfe der High-Priority-Maßnahmen schnell einen höheren Score zu erreichen. Hierzu zählen zum Beispiel angepasste HTTP-Header, aktiviertes Browser-Caching und GZIP-Komprimierung. Je höher der Score, desto mehr Maßnahmen fallen in die Kategorien „Medium Priority“ und „Low Priority“. Deren Umsetzung ist zum einen schwieriger und aufwändiger, zum anderen tragen sie nur noch wenig zur Score-Verbesserung bei.

Werte von 85 und höher verlangen zum Beispiel den Einsatz von CSS-Sprites, minifizierten, zusammengefassten und komprimierten Skripten, optimal komprimierten Bilder und das Hosting von Skripten in Content Delivery Networks. In ihrer Summe können diese Maßnahmen daher recht aufwändig werden. Wer aber sein Ziel nicht aus den Augen verliert und nur noch wenige Low-Priority-Maßnahmen vorgeschlagen bekommt, wird mit einem Score von 95-100 belohnt.

Die Agentur-Website der Marit AG [7] basiert auf TYPO3 4.3 und wurde zu Beginn mit 62 Punkten durchaus gut bewertet. Das ist auch nicht verwunderlich, da bei ihrer Entwicklung vor zwei Jahren ein Augenmerk auf die Performance gelegt wurde und entsprechend zahlreiche Maßnahmen mit „Already done!“ bewertet wurden. Dennoch bestand Raum zur Optimierung und zugleich eine gute Möglichkeit, um Erfahrungen mit Google PageSpeed zu sammeln.

Die Maßnahmen lassen sich neben den Google-Prioritäten grob in die drei technischen Kategorien TYPO3, Template und Server zusammenfassen. Zu TYPO3-Maßnahmen zählen die Installationen von Extensions und die TypoScript-Konfiguration, zu Template alle Maßnahmen an HTML, Skripten und Grafiken sowie zu Server alle Einstellungen die per .htaccess-Konfigurationsdatei am Webserver angepasst werden können.

Die Extension „scriptmerger“ [8] verbessert die Einbindung von CSS- und JavaScript-Dateien durch Minifizierung (etwa das Weglassen von Umbrüchen), GZIP-Komprimierung und Zusammenfassen der Skripte in eine Datei. Sie basiert auf den Open-Source-Projekten minify, jsminplus und jsmin und kann einfach über TypoScript konfiguriert werden. Die einzelnen Maßnahmen lassen sich getrennt für CSS und JavaScript aktivieren sowie Ausnahmen für einzelne Dateien definieren.

Dies hilft, bei auftretenden Problemen schnell zu reagieren. Etwa, wenn JavaScript von manchen Browsern nicht korrekt interpretiert wird. In solchen Fällen lassen sich einzelne Dateien von der Komprimierung ausnehmen und die Funktionalität der Website ist weiterhin gewährleistet. Grundsätzlich empfiehlt es sich, Konfigurationen zunächst auf einer Seiten-Kopie der Startseite durchzuführen und dort mit verschiedenen Browsern und mobilen Endgeräten zu testen.

Die Extension „sourceopt“ kann die Ausgabe von TYPO3 durch die Reduzierung und Formatierung des HTML-Codes verbessern. Möglich ist zum Beispiel, Meta-Tags und Kommentare zu entfernen, oder den gesamten HTML-Code unleserlich aber platzsparend in eine Zeile schreiben zu lassen. Letzteres ist in Anbetracht der HTML-Komprimierung jedoch von zweifelhaftem Nutzen und brachte in Tests keinen besseren PageSpeed-Score.

Durch das TypoScript „page.inludeJSFooter“ können JavaScripts aus dem HTML-Head direkt vor das Ende des Body-Bereichs verschoben werden, um deren Verarbeitung erst nach dem Rendern der Seite anzustoßen. Dies macht die Seite schneller sichtbar, funktioniert aber nur mit Skripten, die nicht bereits zuvor verwendet werden. Auch hier sollte deshalb zunächst auf einer separaten Seite getestet werden.

Asynchrone JavaScripts bieten ebenfalls die Möglichkeit, sie erst nach dem Rendern der Website zu laden. Sie eignen sich insbesondere für Tracking-Pixel. Google Analytics, Piwik oder Anbieter wie Wiredminds bieten seit einiger Zeit Pixel-Codes wahlweise als asynchrone Version an, die durch simplen Austausch eingebunden werden.

Der Einsatz von Content Delivery Networks oder eigenen Subdomains für Ressourcen wie Grafiken und Bibliotheken verkürzt die Ladezeit, da die Ressourcen zeitgleich geladen werden – auch in älteren Browsern. Insbesondere GIF- und PNG-Grafiken kennzeichnet Google als optimierungsfähig, wenn es möglich ist, sparsamere Versionen davon zu erzeugen. Diese werden von Google automatisch generiert und lassen sich direkt austauschen.

Eine hohe Priorität genießen CSS-Sprites, mit denen durch das Zusammenfassen von CSS-Hintergrundbildern HTTP-Requests eingespart werden. Jedoch werden hierfür auch normale HTML-Grafiken vorgeschlagen, die im Zuge der Optimierung zunächst als CSS-Hintergrundbild umgesetzt werden sollen. Vor solch aufwändigen Schritten sollte etwa durch das Weglassen der Grafik vorab getestet werden, wie lohnenswert der zu erwartende Score-Gewinn dafür überhaupt ausfällt.

Für die Konfiguration des Browser-Cachings und der scriptmerger-Extension müssen Änderungen an der .htaccess-Datei vorgenommen werden. Dies betrifft die Apache-Module „mod_expires“, „mod_headers“ und „mod_deflate“, die alle standardmäßig bei einer Apache2-Installation aktiv sind. Das Ablaufdatum möglichst aller Ressourcen sollte für eine positive Google-Bewertung mindestens sieben Tage in der Zukunft liegen. Dies ist auch bei häufigen Änderungen an Stylesheets kein Problem, da scriptmerger diese mit sich ändernden Hashcodes versieht.

Leider können Server-Einstellungen nur für die gesamte Website vorgenommen werden und führen im Fehlerfall schnell zu Nicht-Erreichbarkeit. Es bietet sich daher an, eine Testumgebung oder niedrig frequentierte Tageszeiten für diese Art der Optimierung zu wählen und die Funktionsfähigkeit mithilfe mehrerer Browser und Endgeräte zu überprüfen.

Die Marit-Website konnte innerhalb kurzer Zeit mit überschaubarem Aufwand von 62 auf 98 Punkte optimiert werden. Die Zeit zwischen HTML-Auslieferung und dem vollständigen Rendering wurde im Mittel von 1,2 auf 0,6 Sekunden halbiert.

Auch wenn der effektive Einfluss des PageSpeed-Parameters im Google-Ranking gering sein mag, lohnt es sich, das Scoring der eigenen Website zu testen und den Aufwand der vorgeschlagenen Maßnahmen zu prüfen. Erstrebenswert ist Performance-Optimierung in jedem Fall, da nicht nur die Website, sondern auch deren Besucher von schnelleren Ladezeiten profitieren.