Weblösungen am Puls der Zeit, innovativ und massgeschneidert.

#Blog

E-Marketing Programmieren

vor 2 Monaten

Dominik Albrecht

In diesem Artikel erfahren Sie, wie Sie ihre Webseite mit eine Google Page Speed Analyse optimieren können.

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.

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 erste
Text 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:

  1. Auf web.dev den zu verbessernde Begriff aus dem Calculator suchen. Mit dem Tool wurde zuvor ein Minimalwert ermittelt.
  2. Anhand den von PSI gelisteten Empfehlungen werden die grössten Probleme ermittelt.
  3. Source-Code der Seite auf gelistete Fehler prüfen.
  4. Korrekturen vornehmen.
  5. 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

Render-Blocking: https://web.dev/render-blocking-resources/
Offscreen-Images: https://web.dev/offscreen-images/
Unused Code: https://web.dev/unused-css-rules/
Unused CSS: https://web.dev/unused-css-rules/
Server Response: https://web.dev/time-to-first-byte/