Google PageSpeed Insights: Wie schnell ist Ihre Website?

Eine Website mit langer Ladezeit wird nicht nur von mensch­li­chen Usern, sondern auch von Google ungern gesehen. Die La­de­ge­schwin­dig­keit einer Website zählt seit 2018 zu den Google-Ranking-Faktoren. Langsame Seiten, sowohl in der Mobile- als auch in der Desktop-Ansicht, werden folglich vom Al­go­rith­mus ab­ge­straft. Das geht sogar so weit, dass Seiten, die nach über zwei Sekunden nicht geladen sind, vom Crawler voll­stän­dig ignoriert werden. Aber auch 32 Prozent der mensch­li­chen Anwender springen von einer Website ab, wenn deren Ladezeit über drei Sekunden hin­aus­geht.

Google hat zu diesem Zweck mit Google PageSpeed Insights jedoch ein Tool im Re­per­toire, das dabei hilft, die La­de­zei­ten einer Website zu ana­ly­sie­ren und bei Bedarf ent­spre­chend zu op­ti­mie­ren.

PageSpeed Insights ist ein SEO-Tool, das im ersten Schritt die Ladezeit einer URL berechnet und ana­ly­siert. Die In­ter­net­adres­se muss hierfür lediglich in das vor­ge­se­he­ne Feld ein­ge­ge­ben werden und los geht’s. Das Ergebnis, also die „PageSpeed Insights“ (dt. Einblicke in die Sei­ten­ge­schwin­dig­keit), werden daraufhin sehr über­sicht­lich auf­ge­schlüs­selt in Mobile- und Desktop-Version angezeigt. Zwischen den Ansichten kann man pro­blem­los hin und her wechseln. Jede gültige URL kann zur Analyse in das Tool ein­ge­tra­gen werden.

In der Analyse werden reale Nut­zer­er­fah­run­gen aus der Chrome User Ex­pe­ri­ence (abgekürzt CrUX) mit­ein­be­zo­gen. Diese Daten bekommt Google von Usern, die den haus­ei­ge­nen Chrome-Browser benutzen und ihre Nut­zungs­sta­tis­ti­ken frei­wil­lig mit Google teilen.

Zu­sätz­lich fließen die Daten von Light­house mit in die Analyse ein. Dieses Tool wertet den Zugriff, die Per­for­mance und die Nut­zer­freund­lich­keit der je­wei­li­gen Website aus.

Das Ergebnis der Analyse mit Google PageSpeed Insights wird durch einen Per­for­mance-Wert auf einer Skala von 0 bis 100 angezeigt. Dieser er­mög­licht eine grobe Ein­schät­zung und hilft dabei, die Leistung und Per­for­mance der Website in wenigen Sekunden nach­zu­voll­zie­hen. Die Er­geb­nis­se von PageSpeed Insights be­inhal­ten aber mehr als nur diesen einen Wert. Sie setzen sich vielmehr aus vielen ver­schie­de­nen Kenn­zah­len zusammen.

Ganz oben steht der Per­for­mance-Wert, wie­der­ge­ge­ben auf einer Skala von 0 bis 100, der sich in drei Ka­te­go­rien un­ter­teilt:

Es folgen die Felddaten aus dem CrUX (Daten der ver­gan­ge­nen 28 Tage), sofern diese für die ein­ge­ge­be­ne URL vorhanden sind. Sind sie es nicht, kommt die Meldung: „Im Bericht zur Nut­zer­er­fah­rung in Chrome sind nicht genügend tat­säch­li­che Ge­schwin­dig­keits­da­ten für diese Seite vorhanden.”

Sind für die Website Felddaten vorhanden, bezieht sich die Aus­wer­tung auf folgende Werte:

• First Con­tentful Paint (FCP) gibt an, wie lange es dauert, bis das erste Bild oder der erste Text der Website voll­stän­dig dar­ge­stellt wird.
• First Input Delay (FID) misst die Zeit, ab der ein Benutzer zum ersten Mal mit der Website in­ter­agie­ren kann.
• Largest Con­tentful Paint (LCP) misst, wann das größte In­halts­ele­ment im An­sichts­fens­ter sichtbar wird.
• Cu­mu­la­ti­ve Layout Shift (CLS) ist die un­er­war­te­te Ver­schie­bung von Sei­ten­ele­men­ten, während die Website noch geladen wird.

Diese Werte der Felddaten sind wiederum nach Ge­schwin­dig­kei­ten ka­te­go­ri­siert:

Schnell (grün):

• FCP: liegt zwischen 0 und 1 Sekunde.
• FID: liegt zwischen 0 und 0.1 Sekunden.
• LCP: liegt zwischen 0 und 2.5 Sekunden.
• CLS: die ku­mu­la­ti­ve Lay­out­ver­schie­bung liegt zwischen 0 und 10 Prozent.

Durch­schnitt­lich (orange):

• FCP: liegt zwischen 1 und 3 Sekunden.
• FID: liegt zwischen 0.1 und 0.3 Sekunden.
• LCP: liegt zwischen 2.5 und 4 Sekunden.
• CLS: die Ver­schie­bung liegt zwischen 10 und 25 Prozent.

Langsam (rot):

• FCP: liegt bei über 3 Sekunden.
• FID: liegt bei mehr als 0.3 Sekunden.
• LCP: liegt bei über 4 Sekunden.
• CLS: die Ver­schie­bung liegt bei über 25 Prozent.

Die so­ge­nann­ten La­bor­da­ten erhält Google PageSpeed Insights durch das Open-Source-Tool Light­house. Dieses ermittelt, wie gut die Website in ihrer Per­for­mance ab­schnei­det, indem es die URL crawlt.

Die Ka­te­go­ri­sie­rung in „schnell“, „durch­schnitt­lich“ und „langsam“ findet man auch hier – ebenso wie die Faktoren FCP, LCP, CLS. Diese haben bei den Labdaten aber andere Schwel­len­wer­te. Zu­sätz­lich kommen noch zwei weitere Werte hinzu: Time to in­ter­ac­ti­ve (TTI), also die Zeit bis zur In­ter­ak­ti­vi­tät und die Ge­samt­dau­er der Blo­ckie­rung, die Total Blocking Time (TBT).

Der sechste Wert aus den Labdaten ist der Speed Index. Der Ge­schwin­dig­keits­in­dex misst, wie schnell der Inhalt beim Laden der Website visuell angezeigt wird. Light­house nimmt zunächst ein Video des Sei­ten­la­de­vor­gangs im Browser auf und berechnet die visuelle Abfolge zwischen den Frames.

Die Be­wer­tungs­maß­stä­be für die Labdaten im Überblick:

Schnell (grün):

• FCP: liegt zwischen 0 und 2 Sekunden.
• LCP: liegt zwischen 0 und 2 Sekunden.
• CLS: die Ver­schie­bung liegt zwischen 0 und 10 Prozent.
• TTI: liegt zwischen 0 und 3.8 Sekunden.
• TBT: liegt zwischen 0 und 0.3 Sekunden.
• Speed Index: liegt zwischen 0 und 4.3 Sekunden.

Durch­schnitt­lich (orange)

• FCP: liegt zwischen 2 und 4 Sekunden.
• LCP: liegt zwischen 2 und 4 Sekunden.
• CLS: die Ver­schie­bung liegt zwischen 10 und 25 Prozent.
• TTI: liegt zwischen 3.9 und 7.3 Sekunden.
• TBT: liegt zwischen 0.3 und 0.6 Sekunden.
• Speed Index: liegt zwischen 4.4 und 5.8 Sekunden.

Langsam (rot)

• FCP: liegt bei mehr als 4 Sekunden.
• LCP: liegt bei mehr als 4 Sekunden.
• CLS: die Ver­än­de­rung liegt bei über 25 Prozent.
• TTI: liegt bei über 7.3 Sekunden.
• TBT: liegt bei mehr als 0.6 Sekunden.
• Speed Index: liegt bei über 5.8 Sekunden.

Ein prak­ti­sches Feature aus Light­house ist die Anzeige von Screen­shots, ins­be­son­de­re bei der Analyse der ku­mu­la­ti­ven Lay­out­ver­schie­bung (CLS), die den Verlauf des Sei­ten­auf­baus mitsamt Zeit­an­ga­ben aufzeigt.

Die Ladezeit einer Website ist bereits seit Jahren ein wichtiger Faktor in der Such­ma­schi­nen­op­ti­mie­rung. SEOs verweisen immer wieder auf die Wich­tig­keit der La­de­ge­schwin­dig­keit für das Ranking. Die Per­for­mance eines Web­pro­jekts spiegelt sich aber nicht nur in einer kurzen Ladezeit wider, sondern auch in einer niedrigen Response Time, der Sei­ten­grö­ße und der Download-Ge­schwin­dig­keit. Das fließt für Google alles in die Bewertung einer Seite mit ein.

Die Schnel­lig­keit einer Website ist relativ. Als Faust­re­gel gilt aktuell jedoch eine Ladezeit von 1,5 bis 3 Sekunden als durch­schnitt­lich, alles darüber als langsam, alles darunter als schnell und emp­feh­lens­wert. Diese Werte verändern sich im Laufe der tech­no­lo­gi­schen Ent­wick­lung; so lag die durch­schnitt­li­che Ladezeit von Websites im Jahr 2016 noch bei über 3 Sekunden.

Die genannten Ge­schwin­dig­kei­ten allein reichen al­ler­dings nicht aus, um für Google PageSpeed Insights als schnell zu gelten. Es kommt nicht auf jede Mil­li­se­kun­de in der Ladezeit an, sondern auf die gesamte Nut­zer­er­fah­rung mit der ent­spre­chen­den Website. Das gilt ins­be­son­de­re auch für die mobile Version, deren Per­for­mance für Google einen eigenen Ran­king­fak­tor darstellt.

Eine Website kann in der Desk­top­ver­si­on als schnell ein­ge­stuft werden – das heißt aber noch lange nicht, dass ihre mobile Version das ebenfalls ist. Da mehr und mehr User über­wie­gend mit ihrem Smart­phone surfen, sollten Sie die Rolle der mobilen Seite auf keinen Fall ver­nach­läs­si­gen. Folgende Maßnahmen sind besonders sinnvoll, damit ihre Website auch in der Mobile-Ansicht gut ab­schnei­det:

• Nicht genutztes Ja­va­Script entfernen, um die Da­ten­men­ge bei Netz­werk­ak­ti­vi­tä­ten zu re­du­zie­ren.
• Bilder in modernen Formaten be­reit­stel­len. Bild­for­ma­te wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Kom­pri­mie­rung als PNG oder JPEG, was schnel­le­re Downloads und einen ge­rin­ge­ren Da­ten­ver­brauch er­mög­licht.
• Bilder in einer an­ge­mes­se­nen Größe di­men­sio­nie­ren, um mobile Daten zu sparen und die Ladezeit zu ver­bes­sern.
• Res­sour­cen be­sei­ti­gen, die das Rendering blo­ckie­ren. Wichtiges Ja­va­Script und wichtige CSS sollten inline angegeben und alle nicht kri­ti­schen Skripte und Stile auf­ge­scho­ben werden.
• Nicht ver­wen­de­ten CSS-Code entfernen, um unnötigen Da­ten­ver­brauch durch Netz­werk­ak­ti­vi­tät zu vermeiden.
• Bilder effizient codieren. Op­ti­mier­te Bilder werden schneller geladen und ver­brau­chen weniger mobile Daten.
• Darauf achten, dass der Text während der Webfont-La­de­vor­gän­ge sichtbar bleibt, indem man die CSS-Funktion font-display verwendet. So ist der Text für Nutzer sichtbar, während Webfonts geladen werden.
• Die Aus­wir­kun­gen von Dritt­an­bie­ter-Code mi­ni­mie­ren. Code von Dritt­an­bie­tern kann die La­de­ge­schwin­dig­keit erheblich be­ein­träch­ti­gen.
• Statische Inhalte mit einer ef­fi­zi­en­ten Cache-Richt­li­nie be­reit­stel­len. Eine lange Le­bens­dau­er des Caches kann wie­der­hol­te Besuche Ihrer Seite be­schleu­ni­gen.
• Nicht sichtbare Bilder auf­schie­ben.
• Ja­va­Script kom­pri­mie­ren.
• Text­kom­pri­mie­rung ak­ti­vie­ren.
• Vor­ver­bin­dung zu er­for­der­li­chen Ur­sprün­gen aufbauen.
• Unnötige Wei­ter­lei­tun­gen auf die Seite vermeiden.

Google PageSpeed Insights Er­geb­nis­se für die Mobile-Version dürften für das Ranking ähnlich wichtig sein wie die Er­geb­nis­se für die Desktop-Website. Was die genaue Ge­wich­tung betrifft, lässt sich Google auch hier aber nicht in die Karten blicken. Da der PageSpeed al­ler­dings die Nut­zer­er­fah­rung stark be­ein­flusst, ist davon aus­zu­ge­hen, dass dieser Faktor auch beim Ranking eine hohe Relevanz hat. Da al­ler­dings auch Content-Relevanz und -Qualität das Ranking be­ein­flus­sen, kann man durchaus auch mit einer durch­schnitt­li­chen Sei­ten­ge­schwin­dig­keit gute Rankings erzielen. Idea­ler­wei­se ist Ihre Website aber sowohl technisch als auch in­halt­lich gut auf­ge­stellt.

Google PageSpeed Insights geben einen ersten Überblick über die Per­for­mance, vor­han­de­ne Probleme und mögliche Lösungen für eine spe­zi­fi­sche URL oder die gesamte Domain. Drei Bereiche, die dabei immer wieder eine ent­schei­den­de Rolle spielen, erläutern wir in den folgenden Ab­schnit­ten.

Bilder sind häufig die größten Res­sour­cen­fres­ser einer Website. Meist sind sie zu groß, haben das falsche Format und sind dann auch noch falsch benannt. Das straft nicht nur Google ab, sondern auch jeder Sei­ten­be­su­cher, der un­ge­dul­dig eine Seite schließt, wenn nach mehreren Sekunden noch immer nicht alle Bild­in­hal­te geladen wurden.

Die meisten Bilder sind als JPEG oder PNG hin­ter­legt. Für eine Website bieten sich die Formate JPEG 2000, JPEG XR und WebP jedoch viel besser an, da diese leichter kom­pri­miert werden können, ohne dass das zu sicht­ba­ren Qua­li­täts­ein­bu­ßen führt. Ein Bild, das bei­spiels­wei­se als .jpg eine Größe von 440,7 Kilobyte (KB) hat, kommt als JPEG 2000 mit 135,1 KB aus. In der Summe und vor allem bei Websites mit vielen Bildern macht sich solch ein Un­ter­schied stark bemerkbar.

In Zeiten von hoch­auf­lö­sen­den Bildern ist es enorm wichtig, jedes einzelne Bild, bevor es auf eine Website geladen wird, zu kom­pri­mie­ren. Bilder mit einer Größe von mehreren Megabyte haben auf einer ge­wöhn­li­chen Seite nichts verloren. Bild­be­ar­bei­tungs­pro­gram­me wie Photoshop bieten daher auch Funk­tio­nen wie „Speichern fürs Web”, wodurch das be­tref­fen­de Bild in einer ge­rin­ge­ren, für die Web­dar­stel­lung op­ti­mier­ten Auflösung ge­spei­chert wird.

Es sind manchmal die kleinsten Dinge, die den großen Un­ter­schied machen. Browser-Caching entlastet die Da­ten­über­tra­gung vom Server zum Kunden, was wiederum für mehr Pagespeed sorgt. Damit die gesamten Dateien einer Website nicht bei jedem Sei­ten­auf­ruf erneut her­un­ter­ge­la­den werden müssen, kann der Browser auf zwi­schen­ge­spei­cher­te Dateien zu­rück­grei­fen.

Der Cache funk­tio­niert aber nur dann optimal, wenn der Browser weiß, wie lange er die Dateien speichern soll. Die Dateien einer Website sollten deshalb ein Ab­lauf­da­tum haben. Dy­na­mi­scher HTML-Code muss, da er sich ständig ändert, in der Regel häufiger neu ein­ge­spei­chert werden als bei­spiels­wei­se Bilder.

Die gängigste Mög­lich­keit, das Browser Caching an­zu­pas­sen, ist über das Modul „mod_expires” – zumindest, wenn die Website auf einen Apache-Server liegt. Über den Befehl „IfModule” lässt sich prüfen, ob das Modul bereits aktiviert ist. Mit „Ex­pi­res­By­Ty­pe” lassen sich dann die einzelnen Da­tei­ty­pen an­spre­chen. Das Ab­lauf­da­tum de­fi­nie­ren Sie schließ­lich mit „Access plus 7 days”, wodurch die Min­dest­spei­cher­dau­er der Dateien für den Browser auf sieben Tage fest­ge­legt wird. Erst nach Ablauf dieses Zeit­rah­mens werden sie erneut her­un­ter­ge­la­den. Der Zeitraum kann in­di­vi­du­ell angepasst werden und auch bei ver­schie­de­nen Da­tei­ty­pen variieren. Eine Woche gilt aber als bewährte Laufzeit.

Das Caching lässt sich unter anderem auch mit folgendem Code in der .htaccess-Datei ak­ti­vie­ren:

Die durch­schnitt­li­che Ladezeit einer Website (mehr­ma­li­ger Aufruf durch den Besucher vor­aus­ge­setzt) lässt sich durch diese Ein­stel­lung si­gni­fi­kant steigern. Für die Fein­jus­tie­rung lohnt sich immer wieder ein Blick in Google PageSpeed Insights, um die optimale Laufzeit aller Da­tei­ty­pen fest­zu­le­gen.

Hier gibt es viel zu beachten und viel zu ver­bes­sern. Die meisten Seiten liegen auf Shared-Hosting-Platt­for­men mit be­schränk­ten Res­sour­cen. Das kann den Zugriff und damit die Ladezeit der je­wei­li­gen Website ver­lang­sa­men. Das Problem lässt sich beheben, indem man mehr Leistung bucht (CPU, Ar­beits­spei­cher etc.) oder die Website auf einen de­di­zier­ten Server schiebt. Hierbei muss al­ler­dings das Hardware-Setting ent­spre­chend der Website aufgebaut werden. Ein an­ge­pass­ter Hosting-Server kann die Per­for­mance der Website enorm erhöhen. Mehr dazu und einen direkten Vergleich finden Sie in unserem Artikel zum Thema „Shared Hosting vs. Dedicated Hosting“.