Wer sich mit Suchmaschinenoptimierung auseinandersetzt oder einfach nur die Ladezeiten seiner eigenen Webseite kontrollieren möchte, kommt früher oder später zum Google-Dienst PageSpeed Insights. Ein sehr praktisches Werkzeug, das kostenlos und schnell diverse Kriterien abprüft. Als Ergebnis erhält man einen Prozentwert, mit dem man feststellen kann, wie schnell die Seite lädt. Vermutlich das wichtigste Kriterium für das Ranking, besonders im Mobilbereich. Denn besonders dort müssen Daten beim Herunterladen gespart werden. PageSpeed Insights berücksichtigt dabei diverse Eigenschaften der Webseite, um zu ermitteln, wie schnell Ihre Webseite lädt und macht daraufhin Verbesserungsvorschläge. Jedoch sind manche dieser Eigenschaften gar nicht so einfach umzusetzen und andere sollten gar nicht erst umgesetzt werden.
Daher zielen viele Webseitenbetreiber häufig sehr starr die 100%-Marke an und glauben, dass dies ein notwendiges Mittel ist, um überhaupt bei Google ranken zu können. Eine solche Vorgehensweise kann allerdings auch unerwünschte Effekte haben. Insgesamt sollte daher auf ein ausgewogenes Verhältnis zwischen Logik und Ladezeiten geachtet werden. Worauf du bei der Auswertung von PageSpeed Insights achten solltest, erklären wir dir in diesem Beitrag.
Statische und dynamische Webseiten
Das erste Problem beginnt bereits bei der Art und Funktionsweise einer Webseite. Die schnellsten Webseiten sind die, die nur mit HTML auskommen. Man bezeichnet sie als statisch, da sie sich nicht dynamisch verändern, weder durch den Nutzer noch durch den Server. Dies bedeutet aber eben auch, dass keine Interaktionen möglich wären. Dies schließt Onlineshops, Foren, Chats und viele andere Seiten völlig aus. Ebenso aber auch Analysetools und andere Werkzeuge, die JavaScript benötigen.
Das bedeutet natürlich nicht, dass du zwingend eine statische Webseite benötigen würdest, aber wenn möglich, ist es immer sinnvoll dynamische Elemente zu hinterfragen. Beispielsweise ob eine JavaScript-Animation wirklich unter allen Umständen auf einem Mobilgerät angezeigt werden sollte oder nicht.
Ressourcen beseitigen, die das Rendering blockieren
Eines der komplexesten Kriterien sind Elemente, die das Rendering beeinflussen. Hiermit zeigt PageSpeed Insights an, dass es Elemente gibt, die außergewöhnlich lange brauchen, um zu laden und verhindern, dass andere Elemente geladen werden. In vielen Fällen lässt sich dies durch ein Lazy Load beheben. Also durch das nachträgliche Laden, beispielsweise bei Bildern. Dadurch ist der Text bereits lesbar, während dekorative Grafiken und Bilder nachgereicht werden. In diesem Zusammenhang auch eine sehr gute Idee.
Allerdings gibt es Fälle, in denen das Laden dieser Elemente zwingend notwendig ist. Beispielsweise wenn es sich um CSS handelt, die das gesamte Layout der Webseite ausmacht. Wenn du diese Elemente erst nachträglich lädst kommt es zum unschönen Flash of Unstyled Content. Dieser FOUC beschreibt den Effekt, wenn eine Webseite für einen sehr kurzen Augenblick ohne Styling geladen wird. Er erscheint dem Besucher als namensgebender weißer Flash (dt. Blitz).
Der FOUC kann viele Besucher irritieren und sofort wieder verjagen. Daher ist es ratsam zu überlegen ob das Rendering oder das Styling wichtiger ist. Im Bestfall teilst du das Styling auf und lädst unwichtige Elemente nach, während die notwendigen Styling-Befehle sofort mitgeliefert werden. Dies ist allerdings nicht immer möglich, besonders wenn man mit vorgefertigten Templates arbeitet und nicht die notwendigen Entwicklerkenntnisse hat.
Expertentipp
In den meisten Fällen gibt es zwei Wege in denen Webseiten Ihre Daten zur Verfügung stellen, insbesondere wenn es um dynamische Inhalte geht. Entweder liefert der Server erst alle Daten gemeinsam aus und verzögert somit eine Seitenantwort oder er liefert nur bestimmte Daten direkt aus und lädt via AJAX alle weiteren sukzessive nach. Das Team von Ph.D. Paul Talaga der Universität Cincinnati untersuchten allerdings eine dritte Variante in der ein dynamisches Ladeverhalten getestet und analysiert wurde.
Dabei verwendeten sie eine Node.js-Anwendung, um eine Kombination aus Server- und AJAX-Steuerung zu implementieren. Diese hat nach diversen Tests nur eine geringe Auswirkung auf die Ladegeschwindigkeit bei Datenanforderungen nach Zeitüberschreitungen und Datenbankdatensätzen im Vergleich zu konventionellen Methoden. Allerdings ist die Ladezeit bei mehreren kurz aufeinander folgenden Datenanfragen deutlich kürzer und bei gleichzeitigen Anfragen sogar deutlich schneller.
Diese Methode eignet sich also besonders dann, wenn die Webseite oder Webanwendung mit vielen Datenanfragen zu tun hat. Als Beispiel könnten dies Liveübertragungen eines Videos, Podcasts, etc. sein. Zudem senkt diese Methode Risiko eines DDOS-Angriffs, da die Anfragen schneller abgearbeitet werden können.
Moderne Formate von Bildern
Ein interessanter Aspekt ist PageSpeed Insights‘ Empfehlung Bilder in modernen Formaten bereitzustellen. Denn das bedeutet, anstatt Bilder in JPEG oder PNG anzubieten, lieber Dateiformate wie JPEG 2000, JPEG XR oder WebP zu verwenden. Diese Formate sind deutlich besser komprimiert und laden daher logischerweise schneller.
Hier trifft das Problem allerdings auf ein spezielles Problem. Denn nicht jeder Browser interpretiert auch alle Dateiformate. Schauen wir uns die gängigsten Browser an:
| JPEG 2000 | JPEG XR | WebP | |
|---|---|---|---|
| Firefox | Nicht unterstützt | Nicht unterstützt | Seit Version 65 |
| Chrome | Nicht unterstützt | Nicht unterstützt | Seit Version 32 |
| Edge | Nicht unterstützt | Seit Version 12 | Seit Version 18 |
| Safari | Seit Version 5 | Nicht unterstützt | Nicht unterstützt |
| Opera | Nicht unterstützt | Nicht unterstützt | Seit Version 62 |
Man sieht relativ schnell, dass es kein Format gibt, dass uneingeschränkt von allen gängigen Browsern unterstützt wird. Am meisten verbreitet ist noch das WebP-Format, welches allerdings aufgrund Apple’s abermaligem Alleingang wieder nicht zum neuen Standard wird. Laut Statista verfügt der Safari Browser allerdings lediglich einen Anteil von 5,9% weltweit, in Deutschland allerdings 7,6%. Gerade so wenig, dass es fast vernachlässigbar wäre, aber nicht so wenig, dass man sich dies tatsächlich erlauben kann.
Expertentipp
Eine Lösung kann beispielsweise sein JPEG und PNG als Fallback zu verwenden. Das würde bedeuten, dass grundsätzlich moderne Formate verwendet werden würden, aber JPEG und PNG immer dann geladen werden, wenn ein Browser die modernen Formate nicht unterstützt. Dadurch entsteht allerdings ein gravierender Mehraufwand, weil alle Bilder und Grafiken in zwei Formaten vorliegen müssen. Besonders wenn eine Webseite von Hand programmiert wurde, ist die Umsetzung langwierig. WordPress und Typo3 kennen hierfür beispielsweise Plugins, die diese Arbeit übernehmen. Für WordPress kann ich hier WebP Express empfehlen. Für Typo3 empfiehlt sich WebP als Extension.
Google PageSpeed Insights lässt das Wichtigste aus
Neben all den Kriterien, die PageSpeed Insights berücksichtigt, ignoriert es eines der wichtigsten Kennwerte. Und zwar die Seitenladezeit an sich. Denn abgesehen von der Antwortzeit des Servers, erster Lesbarkeit und Co. kann die Seite noch so schnell laden, PageSpeed Insights interessiert sich nur für die eigenen KPIs.
Joahnnes Müller oder auch John Mueller, von Google, hat in einem Hangout-Meeting deutlich gemacht, dass der Rankingalgorithmus andere Messwerte verwendet als die Metriken von PageSpeed Insights. Daher ist es gar nicht notwendig die 100% zu erreichen. Vor allem dann nicht, wenn die Lösungsumsetzung zu gravierenderen Fehlern führt. Daher empfehle ich dringend, die Empfehlungen wahrzunehmen und bestmöglich zu beheben, aber immer den Nutzer im Blick zu behalten und nicht für Maschinen, sondern für Menschen zu optimieren.
