website analyse google-pagespeed-insights

Google Core Web Vitals mit PageSpeed ​​Insights analysieren und verbessern

Google hat bekannt gegeben, dass die Core Web Vitals ab Mai 2021 ein Rankingfaktor werden.

Mit Hilfe von Pagespeed Insights lassen sich Webseiten nach verschiedenen Metriken überprüfen, welche in Web Vitals einfließen.

In diesem Beitrag erkläre ich, wie die Ergebnisse und Vorschläge des Tools zu verstehen sind.

Warum ist die Geschwindigkeit von Webseiten wichtig?

Google möchte den Nutzern die bestmögliche Nutzererfahrung bieten. Google hat 2010 die Geschwindigkeit als Ranking-Faktor für den Desktop und 2018 für mobile Geräte hinzugefügt.

Ist deine Webseite langsam, sind die Nutzer frustriert und Google ist in der Lage das zu erfassen (Stichwort: Absprungrate und Verweildauer).

Dauert das Laden einer Seite länger als 4 Sekunden, springen 25% deiner Besucher ab (Quelle).

Mit Google Analytics lassen sich diese Daten zur Verweildauer und Absprungrate messen.

Aufgrund der DSVGO und Cookie Richtlinie ist der Einsatz von Tracking-Tools aber problematisch geworden.

Artikel-Empfehlung: Google Analytics DSVGO konform nutzen

Die Analyse mit Page-Speed Insights liefert dir zu verschieden Punkten Vorschläge.

Hast du bisher noch keine Optimierungen gemacht, lassen sich bessere Ergebnisse z.B. mit Website-Caching erzielen.

Was ist Google PageSpeed ​​Insights?

Es ist ein kostenloses Tool wo du die URL einer Webseite eingibst und deine Seite nach verschieden Leistungsmetriken überprüft wird.

Die Seite erhält eine Punktzahl zwischen 0 und 100 – je höher um so bessere Leistung.

Es sollte sich aber nicht zu sehr auf die Punktzahl versteift werden.

Am wichtigsten ist, dass die Parameter gezeigt werden, welche die Seite verlangsamen und Vorschläge, wie du diese verbessern kannst.

Das ist sehr technisch und ich gebe dir folgend Erläuterungen diese zu verstehen:

Wie sind die Ergebnisse zu interpretieren?

Die Bewertungs-Punktzahl der Analyse wird getrennt für Desktop und mobile Ansicht der Seite ermittelt.

pagespeed-score

Dies ist eine Zahl zwischen 0 und 100.

0 bis 49 – schlecht, du solltest unbedingt was tun
50 bis 89 – ist in Ordnung, aber Potential für Verbesserungen
90 bis 100 – sehr gut, keine Maßnahmen erforderlich aber möglich

Scrolle nach unten

labdata

Hinweis: Siehe Farbindikatoren vor jedem Abschnitt:

Grün bedeutet schnell
Orange bedeutet mäßig
Rot bedeutet langsam

First Contentful Paint

Die Dauer der Anforderung einer Seite vom Browser bis zum Rendern des Inhalts.

Es wird der Zeitpunkt gemessen bis der Browser das erste Element anzeigt.

Grundsätzlich ist dies ein Indikator dafür, dass die Seite gerade geladen wird.

Zum Beispiel kann es eine Farbänderung des Hintergrunds sein, ein Bild oder einen Text.

Der FCP ist für die Psychologie des Besuchers wichtig, da ab diesem Moment kein weißer Bildschirm mehr angezeigt wird.

Richtlinie:

fcp-time

Time to interactive

Dieser Parameter zeigt an, wie schnell eine Seite interaktiv wird.

Das bedeutet, dass ausreichend Elemente der Seite auf dem Bildschirm angezeigt werden, damit Besucher tatsächlich damit interagieren können, z. B. auf eine Menüschaltfläche klicken.

Manchmal müssen erst alle Elemente angezeigt werden.

Das kann frustrierend für den Besucher sein und wirkt sich negativ aus.

Richtlinie:

time to interactive

Total Blocking Time

Es existiert eine Lücke zwischen der Zeit wo der Besucher die Inhalte sieht und der Zeit wo er damit interagieren kann.

Dies ist die gesamte Sperrzeit!

Es ist gut zu wissen, ob Besucher Dinge wie Mausklicks, Bildschirmtippen oder Eingaben nicht tun können, bevor die Website interaktiv ist.

Lange Aufgaben blockieren mehr als 50 ms und gilt als Sperrzeit.

Wenn es keine langen Aufgaben gibt, wird 0 angezeigt – siehe Screenshot oben.

Cumulative Layout Shift

Eine Layoutverschiebung liegt vor, wenn ein visuelles Element auf dem Bildschirm angezeigt wird, sich dann aber weiter bewegt.

Für die Berechnung wird die Größe des Elements und die stärke der Verschiebung berücksichtigt.

Ein typisches Beispiel ist das Laden von Werbebannern, aber auch Schriftarten die nachgeladen werden.

Problematisch kann auch später hinzugefügter CSS Code durch Javascript sein.

Je höher die Punktzahl, desto schlechter ist es.

Geschwindigkeitsindex

Etwas schwieriger zu verstehen aber sehr hilfreich.

Stelle dir 2 Webseiten vor, die beide in 1,5 Sekunden geladen wurden.

google-page-rendering

Wenn du die beiden in folgender Grafik ansiehst, welche würden wohl schneller laden?

Beide waren in 1,5 Sekunden vollständig geladen, aber da die erste Seite hat bereits einige Elemente gezeigt. Diese erscheint daher schneller für den Bensucher.

Die Zeiten bis zum vollständigen Laden sind aber gleich.

Der Geschwindigkeitsindex ist eine berechnete Punktzahl, die darauf basiert, wie schnell eine Webseite vollständig geladen wird.

Eine Videoaufzeichnung des Ladevorgangs wird verwendet, um visuell anzuzeigen, wann Elemente geladen werden.

In verschiedenen Intervallen wird die auf dem Bildschirm sichtbare Menge an Inhalten (Above the Fold) mit den auf einer vollständig geladenen Website angezeigten Inhalten verglichen, um den Prozentsatz der für diese bestimmte Zeit angezeigten Inhalte zu ermitteln.

Je niedriger der Geschwindigkeitsindex desto besser.

Largest Contentful paint (LCP)

Dies ist die Zeit, die das größte Element der Seite benötigt, um vollständig gerendert zu werden.

Das sind häufig Header-Bilder, Logos oder eingebettete Videos welche im sichtbaren Bereich erscheinen.

Beim Laden der Seite wird das erste Element zum größten Element, das jedoch ersetzt wird, wenn größere Elemente hinzugefügt werden.

Das letzte Element einer Seite kann das größte Element der Seite sein (z. B. ein großes Bild).

Hinweis: Bei der Größe ist nicht die Dateigröße gemeint  sondern auf den Platz, den ein Element auf dem Viewport des Benutzers einnimmt .

„Unter dem Begriff Viewport versteht man die Größe eines Sichtfensters oder einer Sichtöffnung auf einem Bildschirm. Der Begriff wird im Allgemeinen für Displays von mobilen Endgeräten wie Smartphones und Tablets verwendet“ (Quelle).

audi-lcp
Screenshot: audi.de

Auf der Startseite von Audi benötigt das Hintergrundbild den größten sichtbaren Bereich.

Und hier die Labdaten vom Pagespeed-Tool:

labdata-audi

Die LCP Zeit beträgt fast 10 Sekunden!

Ein ausführlicher Artikel zum Theme LCP findest du hier.

Wie kann die Zeit bis zum LCP verringert werden?

Die Zeit bestimmt sich primär durch:

  • die Antwortzeit des Servers.
  • die Ladezeiten von Inhalten wie Bildern oder Videos.
  • die Zeit, die dadurch vergeht, dass CSS und JavaScript das Rendern blockieren.
  • die Ausführungsdauer von JavaScript

In meinem WordPress Pagespeed Guide gebe ich viele Tipps zur Optimierung des Pagespeeds.
Empfehlungen

Der Abschnitt „Empfehlungen“ zeigt Vorschläge, die zur Verbesserung der Ladezeit führen.

Jeder Vorschlag zeigt auch die geschätzte Reduzierung der Ladezeit für die Seite, wenn du die Empfehlung umsetzt.

Diagnose

Die Diagnose hebt „Best Practices“ in der Webentwicklung hervor, die du umsetzen solltest.

Selbst wenn du diese Verbesserungen vornimmst, wirken sie sich nicht direkt auf die Leistung deiner Seite aus.

Zusammenfassung

Bei der Verbesserung der Geschwindigkeit deiner Website geht es darum, den Besuchern ein besseres Erlebnis zu bieten. Eine Website die schnell geladen wird, macht sowohl Benutzer als auch Suchmaschinen glücklicher.

Es hat große Auswirkung deine Besucher als Kunden zu gewinnen, da es die Conversion-Rate steigert.

Ein Tool wie Google PageSpeed ​​Insights ist unglaublich nützlich, da es dir zeigt welche Probleme zu lösen sind.

Die Leistung deiner Website kann sich enorm verbessern – vor allem dann, wenn noch keine Optimierungen durchgeführt wurden.

Hast du eine Frage oder Hinweis? Schreib einen Kommentar!
Danke

Teile den Beitrag - Danke!

FacebookTwitterWhatsAppBuffer

Das könnte auch interessant sein...

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht.