Schritt-für-Schritt: CLS auf der BVDW-Seite analysieren
Zuerst haben wir die Unterseite der BVDW-Seite betrachtet, die sich mit den SEO-Zertifikatsinhabern beschäftigt. Beim Laden der Seite bemerkten wir sofort einen Sprung – ein typisches CLS-Problem. Um dies genauer zu untersuchen, öffneten wir die Entwicklerkonsole durch Rechtsklick auf eine freie Fläche und Auswahl von „Untersuchen“.
Die Geschwindigkeit drosseln für bessere Analyse
Visualisierung von Layout Shifts
Um die Verschiebungen besser zu visualisieren, gingen wir zu „Weitere Tools“ und wählten „Rendering“. Hier aktivierten wir die Option „Layout Shift Bereiche“, die alle Verschiebungen in Blau hervorhebt. Nach erneutem Laden der Seite wurden alle Shifts deutlich sichtbar.
Einsatz von Google Lighthouse zur Messung des CLS
Nachdem wir die visuelle Analyse abgeschlossen hatten, setzten wir Google Lighthouse ein, um die Leistung der Seite zu testen. Wir entfernten die Drosselung und ließen die Seite durch Lighthouse analysieren. Der Test zeigte einen CLS von 0,37, was darauf hinweist, dass signifikante Verschiebungen vorlagen.
Lokale CSS-Änderungen zur Behebung des CLS
Um das Problem zu beheben, nutzten wir die „Überschreibfunktion“ in der Entwicklerkonsole. Wir wählten einen lokalen Ordner für die Speicherung der Änderungen und fügten dem Header-Element „pagehead“ eine feste Höhe von 310 Pixel hinzu. Diese Änderung wurde in der „styles.css“-Datei gespeichert und blieb auch nach dem Neuladen der Seite bestehen.
Ergebnis der Optimierung
Ein erneuter Lighthouse-Test zeigte, dass der CLS auf 0,028 reduziert wurde und sich somit im grünen Bereich befindet. Diese Verbesserung bestätigt die Wirksamkeit der vorgenommenen Änderungen.
Ein erneuter Lighthouse-Test zeigte, dass der CLS auf 0,028 reduziert wurde und sich somit im grünen Bereich befindet. Diese Verbesserung bestätigt die Wirksamkeit der vorgenommenen Änderungen.
