Google Web Vitals mit PageSpeed ​​Insights analysieren und verbessern

website analyse google-pagespeed-insights

Google PageSpeed Insights stellt ein nützliches Online-Tool bereit, um die Leistungsfähigkeit von Webseiten sowohl auf mobilen Geräten als auch auf Desktops zu überprüfen. Der spezielle Bewertungsmaßstab, der hierbei angewandt wird, ist der sogenannte PageSpeed Score.

Dieser hat einen direkten Einfluss auf Googles Bewertungsalgorithmus: Eine höhere Punktzahl führt zu einem besseren Ranking der analysierten Seite.

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).

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.

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).

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!

Seit Mai 2021 gehört der LCP zu den Core Web Vitals, welche Google für den “Mobile Search Index” verwendet.

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.

pagespeed-empfehlungen

 

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.

insights-diagnose

WP Rocket verbessert die Web Vitals

Mit dem Caching Plugin WP Rocket* kannst du die Ladezeit deiner Webseiten verbessern. Dieses beliebte Premium Plugin optimiert seit Jahren schon die Performance von WordPress Blogs.

Auch Einsteiger können mit wenigen Klicks bessere Ergebnisse erzielen. Hier einige Funktionen im Überblick:

  • Optimierung von HTML-Code
  • GZip-Kompression
  • Lazy Load
  • Google Font Optimierung
  • Minimieren & Zusammenfassen von CSS- und JS-Dateien
  • CDN-Unterstützung

Fazit

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!

1 Kommentar zu „Google Web Vitals mit PageSpeed ​​Insights analysieren und verbessern“

  1. Hallo,

    gerade bei Online-Shops mit hochwertigen Produktbildern habe ich immer am PageSpeed zu “knabbern”. Ich habe schon einiges gelernt, Ressourcen zu optimieren, um einen besseren Speed-Wert zu bekommen. Da ist aber noch viel Luft nach oben, danke für deine Tipps, ich werde ein paar davon mal mitnehmen!

    Beste Grüße
    Mauritz

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.
Nach oben scrollen