Page Speed Messwerte: TTFB, FCP, FMP & TTI verstehen

Googles PageSpeed Insights

Für Google wird Page Speed immer wichtiger. Mehrfach hat der Suchmaschinen-Riese sich in den letzten Jahren zu seinem Umgang mit langsamen Websites geäußert, besonders mobile Websites waren betroffen.

Mit PageSpeed Insights bietet Google Websitebetreibern ein kostenloses Tool, mit dem die Ladegeschwindigkeit einer Website gemessen werden kann.

PageSpeed Insights basiert auf Lighthouse, einem Tool zur Website-Optimierung, das auch als Erweiterung im Browser Chrome vorhanden ist. Zudem greift es auf Daten aus CrUX, dem Chrome User Experience Report, zurück. An dieser Stelle wird deutlich: Google versteht Page Speed nicht nur aus technischer Sicht, sondern auch als Teil der Nutzererfahrung.

Wir möchten in diesem Artikel die wichtigsten Messwerte aus PageSpeed Insights und anderen Tools erklären. Dazu geben wir Tipps, wie sich diese Messwerte durch Website-Optimierung verbessern lassen.

Die 4 wichtigsten Page Speed Messwerte

Was ist eigentlich Page Speed? Insgesamt meinen wir damit den Zeitraum vom Aufruf einer Website bis zu dem Punkt, an dem sie fertig gerendert und bereit zur Eingabe im Browser erscheint. Innerhalb dieses Zeitraums finden mehrere komplexe Prozesse statt, deren Dauer abhängig von bestimmten Faktoren ist. Um diese zu ermitteln und optimieren zu können, sind zusätzliche Messwerte nützlich.

Unsere Top 4 dieser Messwerte in chronologischer Reihenfolge:

• Time to First Byte (TTFB): Der Zeitraum zwischen dem Aufruf der Website und dem ersten vom Webserver geladenen Byte.

• First Contentful Paint (FCP): Der Zeitpunkt, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird.

• First Meaningful Paint (FMP): Der Zeitpunkt, an dem der Nutzer das Gefühl hat, dass die Website geladen ist.

• Time to Interactive (TTI): Der Zeitpunkt, an dem die Website fertig gerendert und bereit zur Nutzereingabe ist.

Abbildung 1: Page Speed Messstationen nach Aufruf der Website © wao.io

TTFB – Time to First Byte

Mit dem Time to First Byte wird der Zeitraum gemessen, der mit dem Aufruf der Website beginnt und mit dem ersten vom Webserver empfangenen Byte endet. Im Kontext der anderen vorgestellten Messwerte bildet der TTFB eine Ausnahme, da er allein die Anfrage einer Website und nicht deren Darstellung misst.

Auf der Ryte Plattform wird der Time to First Byte unter Web Performance im „Ladezeiten“-Report angezeigt. Besonders gut ist, dass Ryte einen zusätzlichen Messwert separat darstellt, der als Teil des TTFB angesehen wird: Die Verbindungszeit zwischen dem Rechner des Nutzers und dem Webserver.

Abbildung 2: Der "Ladezeiten"-Report in Ryte Web Performance

Das beeinflusst den Time to First Byte

Die Verbindungszeit ist deshalb so relevant, weil sich hier die ersten Faktoren für einen langsamen Page Speed verbergen können. Um sich erfolgreich mit dem Webserver zu verbinden, muss dessen IP-Adresse über die Domain ermittelt werden. Dies geschieht über die Auflösung des Domain-Namens über DNS-Server, bis die IP-Adresse gefunden wird. Über die IP-Adresse stellt der Browser nun die Verbindung zum Webserver über diverse Router im Internet her. Diese Verbindung enthält je nach Standort und Netzanbindung Latenzen, die eine Verzögerung bei der Übertragung verursachen.

Wenn Du ein SSL-Zertifikat verwendest – und das solltest Du! – und die Anfrage über HTTPS läuft, dann findet nun der SSL-Handshake statt, nach dem die sichere verschlüsselte Verbindung aufgebaut wird. Ist der Rechner mit dem Webserver verbunden, sendet der Browser eine Anfrage über das HTTP-Protokoll. Die Webserver-Software übernimmt nun die Verarbeitung dieser Anfrage. Die Performance dieser Software und die Auslastung der Server-Hardware sind dabei für die Verarbeitungszeit ausschlaggebend.

• Hohe Latenzen im Verbindungsaufbau

• Langsame Webserver Hardware und Software

So optimierst Du für die TTFB

Um die Verbindungszeit zu verringern, kann der Weg zur Auflösung der Domain optimiert werden. Nach wie vor beliebt ist hier Googles Nameserver mit der IP-Adresse “2.2.2.2” oder die “1.1.1.1” von Cloudflare. Das kannst Du aber mit Deinem Domain-Provider klären, der Dir dabei weiterhelfen kann. Ist es für Dich besonders wichtig, Deine Website global unter gleichmäßig guten Bedingungen erreichbar zu machen, dann kannst Du ein Content Delivery Network, kurz CDN, verwenden.

Durch ein CDN kann die Latenz zwischen dem Nutzer und dem Webserver verkürzt werden. Webseiten-Inhalte, die in einem Cache abgelegt werden können, werden innerhalb des CDN zwischengespeichert und sind so schneller erreichbar. Einige CDNs bieten Funktionen, mit denen auch dynamische Inhalte schneller abrufbar sind, da die Latenzen durch das Routing innerhalb des CDN optimiert werden. Unser Tipp: Websites und Online-Shops aus Deutschland, Österreich oder der Schweiz profitieren nicht grundsätzlich durch ein global ausgelegtes CDN. Hier lässt sich leicht Geld sparen, ohne Qualität einzubüßen.

Steigt der Time to First Byte trotz optimierter Latenzen, kann es an einem Flaschenhals in der IT-Infrastruktur liegen oder einem generell überlasteten Webserver liegen. Wende Dich hierzu an Deine Systemadministratoren oder Deinen Hoster. Auch der Wechsel der Webserver-Software kann sich positiv auf den TTFB auswirken.

• Nutzung besserer DNS-Server mit dem Domain-Provider klären

• Ein CDN (nur) dann nutzen, wenn die Website ein globales Publikum hat

• Hosting anpassen, wenn die Hardware an ihre Grenzen kommt

FCP – First Contentful Paint

Nach dem ersten Byte folgen alle weiteren Daten der Website, darunter der HTML-Code, Stylesheet- und Skript-Dateien, Schriftarten und in der Hauptsache Medien-Dateien, wie Bilder und Videos. Mit dem First Contentful Paint wird der Zeitpunkt gemessen, an dem der Browser erstmals in der Lage ist, ein Seitenelement auf dem Bildschirm zu rendern. Dies ist für den Nutzer wichtig, da er die positive Rückmeldung bekommt, dass die Website tatsächlich geladen wird.

In Pagespeed Insights versteckt sich der First Contentful Paint hinter der freien deutschen Übersetzung “Erste Inhalte gezeichnet” und bildet die erste Messstation, anstatt des TTFB. Für das Google-Tool ist das durchaus sinnvoll, denn es soll sich an Entwickler richten und schlägt in der Hauptsache Maßnahmen zur OnPage-Optimierung vor.

Abbildung 3: Screenshot von Pagespeed Insights (Labdaten)

Was kann den First Contentful Paint verzögern?

Wichtig für die schnelle Darstellung im Browser ist das Downloadvolumen der Website. Je größer dieses ist, desto länger dauert die Übertragung. Neben der Latenz können daher auch unkomprimierter, mit Kommentaren aufgeblähter Quellcode und große Skript-Bibliotheken die Übertragungszeit verlängern und damit den Page Speed verlangsamen. Während die Bandbreite keinen Einfluss auf die Latenz hat, ist sie hier maßgeblich für die Geschwindigkeit der Übertragung und wird mit zunehmender Website-Größe immer wichtiger.

Skript-Dateien teilen sich in CSS und JavaScript auf. CSS ist für die Darstellung der HTML-Elemente im Browser zuständig, daher blockt dieser das Rendern der Website, bis das CSS vollständig geladen ist. JavaScript ist für die Funktionalität und interaktive Steuerung der Website auf Nutzerseite nötig. Die Darstellung der Website beginnt erst dann, wenn der JavaScript-Boot erfolgt ist.

• Unkomprimierter Code

• Große CSS- und JavaScript-Bibliotheken

Website-Optimierung für den FCP

Wichtig ist eine schnelle, strukturierte Übertragung der Website-Daten vom Webserver an den Browser. Um das Downloadvolumen gering zu halten, können die Daten durch GZIP oder Brotli komprimiert werden. Für eine schnellere Übertragung und parallelen Downloads dank persistenter Verbindungen kann HTTP/2 (auch H2 genannt) im Webserver aktiviert werden. Voraussetzung dafür ist ein SSL-Zertifikat, aber das solltest Du, wie bereits erwähnt, ja ohnehin verwenden. Mittlerweile sind sie durch Let’s Encrypt sogar kostenlos. Wende Dich hierzu wieder an Deinen Hoster oder den Systemadministrator, ob die Umstellung möglich ist.

Damit nicht alle Inhalte beim Neuladen der Website oder beim Laden einer Unterseite mit ähnlichen Inhalten erneut vom Webserver angefordert werden müssen, kannst Du durch cleveres HTTP-Caching bestimmen, wie lange bestimmte Elemente auf dem Rechner des Nutzers zwischengespeichert werden sollen.

Über die Festlegung von CSS-Dateien für bestimmte Viewports lässt sich der Render-Block auf diese festgelegten CSS-Dateien reduzieren. JavaScript- und CSS-Bibliotheken lassen sich oft so anpassen, dass nur die wirklich benötigten Inhalte und nicht der volle Umfang heruntergeladen werden müssen.

• Kompression von Daten vornehmen

• HTTP/2 aktivieren

• Durch Caching bestimmen, welche Inhalte nicht neu geladen werden müssen

• Code minifizieren, CSS für Viewports einrichten, Bibliotheken entschlacken

FMP – First Meaningful Paint

Sobald alle Seiteninhalte für die aktuelle Position des Viewports geladen wurden, gilt die Seite für den Nutzer gefühlt als geladen. Wie auch im Ryte Magazine schon beschrieben wurde, ist dies ein wichtiger Schritt. Obwohl die interaktiven Elemente noch nicht geladen sind und auch die weiteren Elemente “below the fold” noch nicht verfügbar sein müssen, ist der Ladevorgang für den Nutzer hier abgeschlossen.

In Pagespeed Insights wird der FMP als “Inhalte weitgehend gezeichnet” beschrieben. Im Screenshot der Website, der unter den Messwerten angezeigt wird, sind der Übergang vom First Contentful Paint zum First Meaningful Paint deutlich zu sehen. Visuell ändert sich hier auch bis zum Time To Interactive nichts mehr. Umso wichtiger ist die Optimierung auf den FMP hin.

Negative Einflüsse auf den First Meaningful Paint

Neben dem Quellcode und den Skript-Dateien werden vor allem Medien-Dateien übertragen. Bilder machen bei einer modernen Webseite fast die Hälfte des Downloadvolumens aus. Bei Online-Shops sind es noch viel mehr. Dementsprechend können eine hohe Anzahl hochaufgelöster Bilder den Page Speed enorm ausbremsen.

Das wirkt sich auf den First Meaningful Paint aus, da die Anzeige dieser Bilder ausschlaggebend ist für die gefühlte Wahrnehmung der fertig geladenen Website. Gerade bei Produktübersichten, in denen viele der Bilder eigentlich erst nach dem Scrollen für den Nutzer sichtbar sind, kann der First Meaningful Paint unnötig in die Länge gezogen werden.

Bild-Optimierung ist der Schlüssel zum FMP

Um die Website-Optimierung an den Bedürfnissen des Nutzers auszurichten, ist Bild-Optimierung unerlässlich. Im Ryte Magazine lässt sich nachlesen, wie man Bilder im Erstellungsprozess optimieren kann. Für Online-Shops mit tausenden Produktbildern und Webseiten mit vielen redaktionellen Inhalten kann dies jedoch sehr aufwendig werden. Die Problematik lässt sich daher am besten durch automatisierte Bild-Optimierung lösen.

Für Produktübersichten und andere Websites, die viele Bilder erst nach dem Scrollen anzeigen, empfehlen wir eine dynamische Einbindung durch sogenanntes Lazy Loading. Dadurch werden die Bilder erst vom Server angefordert, wenn sie tatsächlich auf dem Viewport ausgegeben werden sollen. In der Zwischenzeit werden dort Platzhalter und Fortschrittsanzeigen ausgegeben, damit das Layout nicht verändert wird und der Nutzer mitbekommt, dass die Bilder geladen werden. Mit dem Tool von wao.io lässt sich Lazy Loading automatisiert für Websites einrichten.

Abbildung 4: Screenshot von wao.io mit dem Customizing von Lazy Loading

• Manuelle oder automatisierte Bild-Optimierung

• Lazy Loading für Websites mit vielen Bildern

TTI – Time To Interactive

Der letzte Messwert in dieser Reihe ist der Zeitpunkt, an dem die Website fertig geladen und bereit zur Interaktion ist. Die meisten Page Speed Tests nehmen diesen Wert zur Grundlage ihrer Analyse.

Wenn Du alle beschriebenen Probleme beachtet hast und die zugehörigen Maßnahmen umgesetzt hast, besonders die für den First Contentful Paint und den First Meaningful Paint, dann bist Du auch für einen guten TTI-Wert gerüstet.

Fazit

Wir haben die Top 4 der Messwerte zur Ermittlung der Page Speed verglichen und dabei sowohl Performance-Blocker als auch Lösungsmöglichkeiten zur Optimierung aufgezeigt. Es hat sich herausgestellt, dass Page Speed nicht nur als ein Wert gemessen werden kann. Die Mess-Stationen vom Seitenaufruf bis zur fertig gerenderten Website haben jeweils ihre eigene Bedeutung für den Menschen und die Maschine.

Time to First Byte:
✓ Wichtige Kennzahl um Probleme im serverseitigen Ablauf festzustellen
✓ Latenz Ermitteln und Flaschenhälse beseitigen

First Contentful Paint:
✓ Nutzer erkennt, dass die Website geladen wird, Absprungrate sinkt
✓ Caching nutzen, nur das laden was benötigt wird

First Meaningful Paint:
✓ Nutzer hat die Rückmeldung, dass der Ladevorgang der Website abgeschlossen ist
✓ Bild-Optimierung und Lazy Loading lassen den Top-Fold früher erscheinen

Time to Interactive:
✓ Der wichtigste Messwert in den meisten Page Speed Tests: Website bereit zur Eingabe
✓ Optimierung ist keine einmalige Maßnahme sondern ein dauerhafter Prozess