Kernkraft

PageSpeed – So werden Websites schneller, 2019 Edition

Geschrieben von Bastian Heynen veröffentlich am in der Kategorie UX, Digital Marketing

Wir schreiben das Jahr 2019 und einige Webseiten laden immer noch ewig – mit 20 MB Bildern auf der Startseite und ohne Caching oder Komprimierung. Aber wie macht man eine Website eigentlich schnell und wie gelingt die Messung?

Google 2019 – Mobiloptimierung und weitere PageSpeed-Besessenheit

Zunehmend spielt auch für Google die Geschwindigkeit der Seiten eine Rolle. Sind alle sonstigen notwendigen UX- und Design-Bedingungen für Mobile erfüllt, sollte die Seite generell schneller gemacht werden. Doch was heißt eigentlich „schnell“?

Steigt die Ladezeit einer Seite von einer Sekunde auf drei Sekunden, so erhöht sich die Wahrscheinlichkeit eines Absprungs um 32%, von 1 s auf 5 s um 90% (laut Google).

Wie misst man PageSpeed?

Grundsätzlich stellt sich erst einmal die Frage, wie man die Ladezeit oder PageSpeed überhaupt messen kann. Hierfür ergeben sich folgende Möglichkeiten / Punkte zur ihrer Bestimmung:

 

First Paint

Der First Paint (FP) ist der erste Pixel, der im Browser erscheint. Aus meiner Sicht ist dies wenig relevant für den Nutzer und bei der Bewertung der Usability einer Seite wenig aussagekräftig. Beim First Paint kann es sich auch um Hintergrundfarbe (non-default) handeln. Zu einer sinnvollen Bestimmung von Ladezeit, sollte man einen anderen Punkt messen.

 

First Contentful Paint

Möchte man nicht allein betrachten, wann der erste Pixel im Browser erscheint, so misst man den First Contentful Paint (FCP). Google PageSpeed in der deutschen Sprache bezeichnet dies als „Erste Inhalte gezeichnet“. Inhalte heißt in diesem Zusammenhang Bild (auch Hintergrundbilder) oder Text (auch wenn die Webfont noch nicht geladen ist). Dies ist auch noch nicht ganz der Punkt den wir messen sollten.

 

First Meaningful Paint

Der First Meaningful Paint (FMP) ist aus meiner Sicht am ehesten für den Nutzer relevant. Hier ist der primäre, bedeutungsvolle Inhalt geladen und sichtbar. Da „meaningful“ Interpretationsspielraum zulässt, ist dieser Messpunkt zwar nicht wirklich problemlos zu normieren. Für unsere Zwecke bleibt dies jedoch die beste Wahl.

 

Time to Interactive

Die Time to Interactive (TTI) ist die Zeit zu der die Seite für Interaktion durch den Nutzer bereit erscheint. Hierfür muss zunächst der primäre Inhalt geladen sein (der FMP erreicht sein); zusätzlich muss die Seite bei einer Interaktion durch den Nutzer innerhalb von 50 ms reagieren.

 

First Byte Time

Die First Byte Time ist ebenfalls eine wichtige Kennzahl für eine Webseite. Hierbei handelt es sich um die Zeit bis der Browser den ersten Byte des Servers erhält (Back-End Processing + Redirects). Interessanterweise ist die First Byte Time kein Messpunkt in Googles PageSpeed Insights.

 

Optimierung der PageSpeed

Und wie bekommen wir nun eine Seite die schneller lädt? Hierfür gibt es zum Glück mehrere Ansätze, von denen mindestens eine bestimmt jeder Seite weiterhilft.

 

Server Requests und Minifizierung

Für jede Datei, die auf einer Webseite eingebunden ist, muss ein separater Request an den Server geschickt werden. CSS und JS kann man aber oft zusammenfassen. So kann man die Anzahl der Dateien insgesamt deutlich reduzieren. Prüft also zunächst, ob ihr überhaupt viele verschiedene Dateien braucht. Was ist die Anzahl der Server Requests? Kann man diese reduzieren?

Danach sollte es an die Minifizierung (Entfernung von Zeilenumbrüchen, Einrückungen zur Lesbarkeit etc., gut von Tools durchführbar) von HTML, CSS und JavaScript Ressourcen gehen. Google empfiehlt HTMLMinifierCSSNano und csso sowie UglifyJS.

 

Keep Alive Enabled

Aktiviert Keep Alive, damit mehrere Files über eine Verbindung heruntergeladen werden können . Habt ihr dies nicht sichergestellt, wird für jede Datei eine neue Verbindung zwischen Server und Client aufgebaut. Dies führt ebenfalls zu längeren Ladezeiten.

 

Komprimierung von Transfer: GZIP

Benutzt GZIP für HTML, CSS und JavaScript über 150 Bytes. GZIP sorgt für die Komprimierung der Daten, welche dann vom Browser wieder entpackt werden.

Diese Komprimierung basiert auf dem sogenannten DEFLATE Algoritmus. Ausführlicheres dazu hier.

 

Komprimierung von Bildern

Niemand benötigt 20 MB Bilder auf der Startseite. Neben dem Ausliefern in der richtigen Dimension, sollten die Bilder komprimiert werden.

Bei stärker auf außergewöhnliches Design abzielenden Webseiten mit enormer Bilddichte gibt es immer Trade-Offs, die man in punkto PageSpeed eingehen muss. Zielt man auf ein gutes Ranking ab, sollten diese nur nicht überwiegen.

Beachtet: Bilder lassen sich meist ohne Qualitätsverlust ganz einfach herunterrechnen .

Probiert es doch ganz einfach aus, z.B. auf Seiten wie compressjpg.com oder mit der Squoosh App. Letztere bietet zudem eine tolle Vorschau-Funktion.

 

Cachen statischer Inhalte

Fügt eurem statischen Content einen Expire Header hinzu . Dieser macht dem Browser klar, dass der Content für eine gewisse Zeit im Cache gespeichert werden kann, bevor wieder beim Server neuere Versionen angefragt werden. Somit muss der Content nicht jedes Mal neu geladen werden. Überlegt euch genau, welche Zeiten hier angebracht sind. Google empfiehlt mindestens eine Woche.

 

Mobile Experience testen

Da ihr auch eine gute Mobile Experience garantieren wollt, ruft doch einmal die Webseite mit simuliertem Smartphone und Drosselung auf Slow 3G auf (in Chrome: F12 -> Network -> Network Conditions).
Wie würdet ihr euch fühlen als Smartphone-Nutzer? Zufrieden? Oder geht da noch mehr?

Denkt daran, dass es nicht nur um Ladezeiten alleine geht, sondern durchaus auch um Megabyte, wenn der Mobilfunkanbieter das Datenvolumen begrenzt.

 

 

Diese Artikel könnten dich auch noch interessieren:

2G-Geschwindigkeit im Web

Lazy Loading - Fauler Zauber oder sinnvolles Tool?