Das Tool PageSpeed Insights untersucht mit einem Klick die Webseiten-Performance und -Usability. In diesem dritten Teil meiner Blog-Serie zeige ich euch, wie ihr die dabei erhobenen Core Web Vitals samt flankierender Messwerte verbessern könnt.
 |
| PageSpeed Insights: Optimierungsmöglichkeiten der Feld-Daten. |
Teil 1 meiner Blog-Serie zu den Themen Core Web Vitals und PageSpeed Insights (Link am Beitragsende) beleuchtete folgende Punkte:
- Was sind die Core Web Vitals (CWV) von Google?
- Sind die Core Web Vitals ein starker oder schwacher Google-Rankingfaktor?
- Core Web Vitals: Die Messwerte auf einen Blick
Teil 2 (Link am Beitragsende) fokussierte diese Aspekte:
- PageSpeed Insights: Was tut dieses kostenlose Google-Tool?
- Der Unterschied zwischen „Feld-Daten“ und „Lab-Daten“
In diesem vorliegenden dritten Teil blicken wir jetzt auf folgende
Frage:
- Was bedeuten die Feld-Daten-Auswertungen in PageSpeed Insights?
- Wie könnt ihr eure Feld-Daten-Werte optimieren?
Auf geht’s:
PageSpeed Insights: Was sagen die Werte der Feld-Daten-Analyse aus?
Blicken wir auf die Feld-Daten-Analyse („So sieht die Leistung auf der Nutzerseite aus“) der aus Teil 2 bekannten thomann.de-Produktseite in der mobilen Version (Smartphone):
 |
| PageSpeed Insights: Feld-Daten-Auswertung |
Die Core Web Vitals …
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- und Cumulative Shift (CLS)
… hatten wir uns in Teil 1 meiner Blog-Serie angeschaut (Link am Beitragsende).
Zusätzlich nennt die Feld-Daten-Analyse unter „Andere wichtige Messwerte“ zwei Metriken, die nicht zu den Core Web Vitals gezählt werden, diese aber flankieren:
First Contentful Paint (FCP, „erste inhaltliche Darstellung“) misst die Ladezeit, bis der Browser den ersten visuellen Inhalt anzeigt. Best-Practice-Wert: weniger als 1,8 Sekunden.
Time to First Byte (TTB, wörtlich „Zeit bis zum ersten Byte“, sinngemäß „Zeit bis zur ersten Serverantwort“) misst die Zeit, bis der Browser nach einer Anfrage das erste Byte (digitale Informationseinheit) vom Server erhält. Best-Practice-Wert: weniger als 0,8 Sekunden.
Betrachtet man insgesamt die Feld-Daten-Analyse für die thomann.de-Produktseite, macht sie bei 4 von 5 Metriken (LCP + INP + FCP + TTB) einen guten Job.
Einzig der Core-Web-Vital-Wert Cumulative Layout Shift (CLS) liegt mit 0,14 über dem empfohlenen Höchstwert von 0,1. Es handelt sich nicht um Zeitangaben: Wie sich die CLS-Werte berechnen, erklärt Google auf web.dev.
Der gelbe/orangefarbene CLS-Wert der thomann.de-Produktseite bedeutet: Die Seite leidet unter plötzlichen Layoutverschiebungen, weil Inhalte nachgeladen werden. Dadurch „hüpft“ der Inhalt, sodass User*innen einen Link, den sie klicken wollen, eventuell „verfehlen“ (oder unbeabsichtigt einen falschen Link klicken).
PageSpeed Insights: Verbesserung der Werte unter „So sieht die Leistung auf
der Nutzerseite aus“
Wichtige Vorab-Info: Ohne Techie-Hilfe werdet ihr hier nicht weit kommen. Mein Rat: Holt euch eure(n) Web-Entwickler*in an die Seite.—
1. Largest Contentful Paint (LCP) verbessern:
- Schnelleren Hosting-Server nutzen, damit Inhalte schneller geladen werden.
- Render-Blocking-Ressourcen entfernen: Gemeint sind Ressourcen, die den Browser daran hindern, eine Webseite vollständig zu rendern (darzustellen). Es müssen erst diese Ressourcen vollständig heruntergeladen und verarbeitet werden. Das verzögert die Darstellung der Webseite. Deshalb sollten die Ressourcen JavaScript (Programmiersprache, die Webseiten interaktiv macht) und CSS (Sprache, mit der man das Aussehen von Webseiten gestaltet) optimiert sein, damit sie die Darstellung nicht verzögern. „entfernen“ meint hier unter anderem asynchron laden, minimieren und zusammenfassen.
- Bilder optimieren, indem man sie verkleinert und Lazy Loading nutzt. Lazy Loading bedeutet: Bilder einer Webseite werden erst geladen, wenn Nutzer*innen sie tatsächlich sehen, um die Ladezeit der Seite zu verkürzen.
- Content Delivery Network (CDN) verwenden: Ein CDN ist ein Server-Netzwerk, das Inhalte von Servern in der Nähe der Nutzer*innen lädt und so die Ladezeit zu verkürzt.
- Critical Rendering Path optimieren: Der Critical Rendering Path ist der Prozess, den der Browser durchläuft, um HTML, CSS und JavaScript zu verarbeiten. Ihn zu optimieren bedeutet: Das Wichtigste der Webseite wird zuerst geladen, damit die sichtbaren Inhalte schneller erscheinen.
—
2. Interaction to Next Paint (INP) verbessern:
- Langsames JavaScript optimieren: Schwere oder unnötige Skripte entfernen, damit der Browser schneller arbeiten kann.
- Web Worker nutzen: Web Worker ist eine Programmierfunktion in JavaScript. Sie ermöglicht es einer Webseite, komplexe Berechnungen durchzuführen, ohne die Benutzeroberfläche zu blockieren.
- Anfragen reduzieren: Weniger Daten gleichzeitig laden, z. B. durch das Minimieren von Dateien oder das Aufteilen großer Aufgaben.
- Code schlanker machen: Unnötige Leerzeichen und Kommentare aus dem HTML, CSS und JavaScript entfernen (sogenannte Minifizierung).
—
3. Cumulative Layout Shift (CLS) verbessern:
- Bilder und Videos mit festen Größen: Immer die Breite und
Höhe für Bilder und Videos angeben, damit der Browser schon vor dem Laden weiß, wie viel Platz sie brauchen. - Web-Fonts optimieren: Layout-Sprünge vermeiden, indem alternative Schriftarten sofort angezeigt werden und die Web-Schriftarten (Fonts) verzögert geladen werden.
- Animierte Inhalte vorsichtig einsetzen: Animationen, die Inhalte verschieben, vermeiden.
—
4. First Contentful Paint (FCP) verbessern:
- Wichtige Design-Regeln zuerst laden: Nur das Nötigste für den ersten Bildschirm anzeigen.
- Schnelle Bilder verwenden: Bilder komprimieren, schlanke Formate nutzen und erst laden, wenn sie sichtbar sind.
- Code schlanker machen: Unnötige Leerzeichen und Kommentare aus dem HTML, CSS und JavaScript entfernen (Minifizierung).
- Ressourcen effizient laden: Dateien wie JavaScript so einstellen, dass sie später geladen werden, wenn sie nicht sofort gebraucht werden.
- Daten speichern: Häufig genutzte Dateien im Browser zwischenspeichern, damit sie nicht jedes Mal neu geladen werden (Caching).
- Content Delivery Network (CDN) verwenden: Ein CDN ist ein Server-Netzwerk, das Inhalte von Servern in der Nähe der Nutzer lädt und so die Ladezeit zu verkürzt.
—
5. Time to First Byte (TTFB) verbessern:
- Server-Optimierung: Leistungsstarke Hardware und optimierte Software (wie HTTP/2) nutzen.
- Caching aktivieren: Durch Caching werden häufig angeforderte Seiten zwischengespeichert. So können sie schneller bereitgestellt werden.
- Datenbank optimieren: Ladezeit der Datenbankabfragen verringern.
- Content Delivery Network (CDN) verwenden: Inhalte von Servern in der Nähe der Nutzer*innen laden, um die Ladezeit zu verkürzen.
—
Soweit die Hebel, mit denen ihr (bzw. euer Coder / eure Coderin) die in PageSpeed Insights angezeigten Feld-Daten verbessern könnt.
In Teil 4 von „SEO: Googles Messwertsystem „Core Web Vitals“ auf einen Blick“ …
… zeige ich euch, wie ihr die in PageSpeed Insights angezeigten
Lab-Daten-Werte verbessern könnt.
Lab-Daten-Werte verbessern könnt.
Link-Tipps:
Schreibe einen Kommentar