Website-Performance optimieren (Teil 2): Pagespeed messen

Wie funktioniert die Performance-Messung?

Grundsätzlich kann man bei der Performance-Messung von Websites zwei Herangehensweisen unterscheiden. Die erste nutzt Daten, die der Browser bei der Interaktion mit Webseiten liefert. Dazu bringen die gängigen Browser APIs mit, über die Informationen zu Browser-Events wie Load, DomContentLoaded, First Paint oder First Contentful Paint abgefragt werden können (die konkreten Möglichkeiten variieren je nach Browser). Die zweite Herangehensweise besteht darin, die Bildschirmanzeige beim Seitenladeprozess mitzuschneiden und auszuwerten. Damit werden auch Messwerte zugänglich, die relevanter für das Benutzererlebnis sind, z. B. wann der ohne Scrollen sichtbare Teil der Seite im aktuellen Viewport komplett angezeigt wird oder welche Verzögerungen bei Benutzereingaben auftreten.

Ladezeit, Time To First Byte und Speed Index

Bei Performance-Messungen mit entsprechenden Tools gilt der erste Blick in der Regel der Ladezeit selbst. Die Zeit also, die nach dem Aufruf einer Seite vergeht, bis sie komplett im Browser geladen ist. Sie bietet Ihnen eine gute erste Orientierung, wo Sie stehen und ob es Handlungsbedarf gibt. Wollen Sie aber konkrete Optimierungspotenziale identifizieren, müssen Sie die komplexen Ladevorgänge genauer analysieren. Zwei Messwerte, die in diesem Zusammenhang häufiger genannt werden, sind „Time To First Byte“ (TTFB) und der sogenannte Speed Index. 

Time To First Byte: Die TTFB (bei PageSpeed Insights: „Serverantwortzeiten“, bei Pingdom die Zeit bis einschließlich „Wait“-Time) ist die Zeit, die nach dem Aufruf der Webseite vergeht, bis der Browser das erste Datenpaket vom Webserver empfängt. Auch wenn in SEO-Kreisen kontrovers diskutiert wird, ob die TTFB einen Ranking-Faktor darstellt, ist sie ein aussagekräftiger Messwert: Dauerhaft hohe Werte (deutlich länger als eine halbe Sekunde bei Desktop- und anderthalb Sekunden bei Mobilgeräten) können auf Probleme bei der Kommunikation mit dem Webserver (DNS, Internetverbindung) oder seiner Leistungsfähigkeit (Ressourcen, Konfiguration) hinweisen. Ist nicht der Webserver der Engpass, können auch alternative DNS-Server oder ein Content Delivery Network (CDN)Abhilfe schaffen. Aber Achtung: Die Kompression von Website-Daten vor der Übertragung kann die TTFB deutlich erhöhen, aber gleichzeitig die Ladezeiten verbessern. 

Speed Index: Der Speed Index (PSI: „Geschwindigkeitsindex“) gibt an, wie schnell die Inhalte einer Seite im Viewport dargestellt werden. Die von WebPageTest 2012 eingeführte Messzahl soll das Problem lösen, dass punktuelle Messwerte wie TTFB und Ladezeit wenig aussagekräftig dafür sind, wann Besucher eine Seite als geladen ansehen. Für den Speed Index ist deshalb der tatsächliche Verlauf des Seitenaufbaus entscheidend. Dafür wird in kurzen Intervallen der jeweilige Ladezustand ermittelt und daraus ein kumulierter Wert berechnet. So kann bei zwei Seiten, die beide nach drei Sekunden komplett geladen wurden, der Speed Index trotzdem weit auseinander liegen, wenn nach einer Sekunde bereits 80 Prozent der ersten Seite geladen waren, aber erst 50 Prozent der zweiten Seite.

Performance und Nutzererfahrung

Der Speed Index war ein erster Schritt, um für eine Webseite die zu erwartende Nutzererfahrung zu erfassen. Denn letztendlich zählt das konkrete Verhalten der Nutzer – Interaktionen, Verweildauern, Absprung-Raten. Deshalb entwickelten Google und WebPageTest (wo Google sich ebenfalls einbringt) gezielt „nutzerzentrierte Performance-Metriken“ wie First Contentful Paint, Time to Interactive und First Input Delay. 

Google ordnet den Erwartungen eines Surfers beim Aufruf einer Webseite vier Fragen zu: 
1. Passiert überhaupt etwas? 2. Ist die Seite nützlich? 3. Ist die Seite nutzbar? 4. Ist die Interaktion damit angenehm? 

Verfügbarkeit: First Contentful Paint

Die Antwort auf die erste Frage liefern First Paint (FP) und First Contentful Paint (FCP). Der FP (WebPageTest: „Start Render“) bezeichnet das Rendering des ersten Pixels der aufgerufenen Seite im Browser, z. B. eine Hintergrundfarbe – egal ob für den Nutzer sichtbar oder nicht. Der von Google bevorzugte First Contentful Paint ist der Zeitpunkt, wenn das erste Inhaltselement vom Document Object Model (Text, Bild oder Canvas) gerendert wird. PSI liefert dafür sowohl vorhandene Felddaten echter Nutzer als auch synthetische Labdaten von Googles Audit-Tool Lighthouse („Erste Inhalte gezeichnet“). Bei hohen FCP-Werten sehen Besucher lange – und vielleicht zu lange – nur eine leere Seite (zum Beispiel, weil erst ein Webfont geladen werden muss).

Nutzwert: First Meaningful Paint und Hero-Elemente

Die Frage „Ist die Seite nützlich?“ kann ein Besucher erst beantworten, wenn die wesentlichen Inhalte der Seite sichtbar sind. Dafür gibt es die Kennzahl First Meaningful Paint (FMP), bei PSI: „Inhalte weitgehend gezeichnet“. Zu diesem Zeitpunkt sind wesentliche Inhalte („Hero Elements“) sichtbar, auf Youtube etwa das Video, auf einer News-Seite Headline und Nachrichtentext – also jeweils das, was ein Nutzer wahrscheinlich sehen will. Dies exakt zu bestimmen ist allerdings kaum möglich. Google wird deshalb den FMP wohl bald ad acta legen („deprecated“ in Lighthouse 6.0) und durch den „Largest Contentful Paint“ ersetzen, der sich auf das größte im ViewPort sichtbare Element der Content-Typen Bild, Hintergrund-Bild, Video oder Textknoten konzentriert. WebPageTest definiert in ähnlicher Weise einige Standard-Hero-Elemente, erlaubt es, eigene Heros festzulegen und liefert Ladezeiten für das erste und letzte Hero-Element.

Nutzbarkeit: Time to Interactive 

Die Time to Interactive (TTI) (PSI: „Zeit bis Interaktivität“) ist eine der wichtigsten Metriken der Nutzererfahrung. Sie gibt die Zeit an, nach der Nutzer mit der Seite interagieren können. In der Regel ist damit die Zeit bis zur vollständigen Interaktivität gemeint („Time to Consistently Interactive“: es werden nützliche Inhalte angezeigt (FCP) und die Seite reagiert verlässlich innerhalb von 50 ms auf Benutzereingaben). Inzwischen gibt PageSpeed Insights auch einen Wert für den ersten CPU-Leerlauf aus (manchmal als „First Interactive“ bezeichnet); WebPageTest beschränkt sich in seiner Übersicht auf diesen Wert. Er gibt an, ab wann der Hauptthread der Seite nur noch so wenig beschäftigt ist, dass die CPU Eingaben verarbeiten kann. Insbesondere müssen dann zeitintensive Aufgaben („Long Tasks“) abgearbeitet sein, die den Hauptthread blockieren. 

Interaktivität: First Input Delay

Googles PageSpeed Insights gibt bei den Labdaten noch einen weiteren Wert an: „Maximaler potenzieller First Input Delay“, erklärt als die „Dauer der längsten Aufgabe in Millisekunden“. Bei den PSI-Felddaten erscheint seit Version 5 ein gemessener Wert für „First Input Delay“ (FID). Der erst 2018 eingeführte Messwert bezeichnet die Zeit zwischen der ersten Nutzerinteraktion und der Reaktion des Browsers. Wenn diese Antwort auf andere Tasks warten muss, können diese Verzögerungen die Nutzererfahrung beeinträchtigen. Deshalb ist laut Google die Antwort auf die Frage „Ist es angenehm?“ („Is it delightful?“) technisch gesehen die Abwesenheit von Long Tasks. Der „maximale potenzielle FID“ bei den Labdaten betrachtet in Ermangelung messbarer Interaktion die längste abzuarbeitende Aufgabe nach dem FCP und berechnet daraus die zu erwartende Verzögerung.

Für alle genannten Messwerte gilt: Sie haben ihre Berechtigung für konkrete Fragestellungen, sollten aber nicht zum alleinigen Performance-Gradmesser verabsolutiert werden. Zudem werden Sie für ein und dieselbe Seite mit verschiedenen Tools auch verschiedene Ergebnisse erhalten. Deshalb sollten Sie sich für die Kennzahlen Ihrer Wahl auf eines der Tools beschränken, um den Fortschritt Ihrer Optimierungsarbeit zu messen.