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

Unter dem Reiter „Netzwerk“ haben wir die Geschwindigkeit auf schnelles 3G gedrosselt und die Seite erneut geladen. Durch diese Verlangsamung konnten wir die Elemente, die den Layout Shift verursachen, leichter identifizieren. Banner und andere Elemente luden nach und führten zu Verschiebungen.

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.

Wer ist Ann-Julie?

Raymond Eiber

Raymond Eiber ist ein versierter SEO-Experte bei diva-e. Er betreut Großkunden und optimiert deren Online-Präsenzen durch maßgeschneiderte Suchmaschinenstrategien. Neben seiner Kernrolle in der SEO unterstützt Raymond das Sales- und Vertriebsteam, indem er seine technischen und analytischen Fähigkeiten einbringt, um den Unternehmenserfolg zu steigern. Zusätzlich zu seiner Kundenbetreuung entwickelt Raymond während der Arbeitszeit innovative Softwarelösungen, darunter das diva-e SEO Plugin und OneProSeo.