Google Page Speed - Eine Übersicht
Mit der PageSpeed Insights API stellt Google eine Möglichkeit zur Messung der Leistungsfähigkeit von Webseiten zur Verfügung. Simuliert wird die Leistung auf Desktop- und mobilen Geräten. Anhand der ermittelten Resultate kann die getestete Website hinsichtlich Geschwindigkeit und SEO optimiert werden.
- Autor:in
- Dominik Albrecht
- Veröffentlicht
1. Messung durchführen
Lighthouse (für die Messung verantwortliches Tool) kann einerseits direkt über die Google Chrome Dev-Tools aufgerufen werden, alternativ aber auch über ein Web UI. Für diesen Beitrag wurde das Web UI verwendet. Nach Eingabe der zu testenden URL wird der Report für Mobile und Desktop generiert, siehe nachfolgenden Screenshot.
In der linken Spalte sind die Messwerte für Desktop-Geräte aufgelistet, rechts analog für Mobile. Es empfiehlt sich, jeweils mehrere Messungen durchzuführen, da die Testwerte leicht abweichen können. Dies ist in den zwei Zeilen zu erkennen.
2. Werte verstehen
Der Hauptwert ist der von PageSpeed Insights (PSI) errechnete Leistungsfaktor. Dieser wird anhand von sechs Labdaten (simuliert mit Lighthouse) zusammengestellt. Wird ein Wert von mindestens 90 erreicht, ist die Seite als “schnell” klassifiziert. Ein Faktor zwischen 50 und 90 repräsentiert eine durchschnittliche Seite. Analysen mit Werten unter 50 gelten als langsam. Nachfolgend eine kurze Zusammenfassung dieser Labdaten:
| Bezeichnung | Übersetzung | Zusammenfassung | Höchster Einfluss |
|---|---|---|---|
| Cumulative Layoutshift | Kumulative Layoutverschiebung | Cumulative Layout Shift misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs. | Bildgrössen / Positionierung |
| First Contentful Paint | Erste Inhalte gezeichnet | First Contentful Paint gibt an, wann der ersteText oder das erste Bild gezeichnet wird. | Font Loading |
| Largest Contentful Paint | Längster Inhalt gezeichnet. | Largest Contentful Paint gibt an, wann der längste Text bzw. das größte Bild gezeichnet wird. | Render Blocking, Large Resources |
| Speed Index | Geschwindigkeitsindex | Der Geschwindigkeitsindex gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden. | Render Blocking |
| Time to Interactive | Zeit bis Interaktivität | Die “Zeit bis Interaktivität” entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist. | JS Verarbeitung |
| Total Blocking Time | Gesamtdauer der Blockierung | Summe aller Zeiträume (in Millisekunden) zwischen FCP und “Zeit bis Interaktivität”, wenn die Aufgabendauer 50 ms überschreitet. | JS Verarbeitung |
3. Werte verbessern
In dem hier verwendeten Fallbeispiel sind von den vier Richtwerten (die vier Balken in den Screenshots) First Contentful Paint (FCP) und Cumulative Layout Shift (CLS) auffällig. Um die gewünschten Verbesserungen zu koordinieren, ist zuerst der Aufbau des Faktors besser zu verstehen. Nachfolgend findet sich dazu eine Darstellung des aufgeschlüsselten Scores:
Wichtig dabei ist die Gewichtung, womit die Prioritäten bei den Korrekturen ermittelt werden können.
Um den gewünschten Score von 90-100 zu erzielen, wird am besten zuerst der Lighthouse Scoring Calculator verwendet. Dieses Tool ermöglicht eine schnelle, und klar auf die Gewichtung verteilte Auflistung der Labdaten.
Der zuerst auffällige Cumulative Layout Shift kann zur Verbesserung ignoriert werden. Dieser hat auf den Score kaum Einfluss.
Um den Rest der Werte zu verbessern, kann folgender Ablauf verwendet werden:
- Auf web.dev den zu verbessernde Begriff aus dem Calculator suchen. Mit dem Tool wurde zuvor ein Minimalwert ermittelt.
- Anhand den von PSI gelisteten Empfehlungen werden die grössten Probleme ermittelt.
- Source-Code der Seite auf gelistete Fehler prüfen.
- Korrekturen vornehmen.
- Nach einer möglichen Korrektur wird erneut getestet. Lighthouse kann dazu über die DevTools auf der lokalen Seite ausgeführt werden. Achtung, gewisse Werte sind abhängig vom Server. Diese können auf der lokalen Umgebung stark abweichen.
Für die meisten Seiten wir “Render-Blocking” den grössten Teil der Verzögerungen. Hier müssen möglichst viele JS- und CSS Dateien in den Footer verschoben werden, damit diese nach dem ersten Zeichnen geladen werden.
Weiter können, gerade in CMS Systemen, zu grosse Bilder die Ladezeit stark beeinflussen. Dies resultiert meist aus vom Hochladen von zu hoch aufgelösten Bildern. Zur Optimierung siehe “Cumulative Layout Shift”.
Weitere Ressourcen
Verwandte Themen
Weiterführende Projekte und Inhalte zum Thema