Frau arbeitet am Laptop
News & Trends  | 14 Feb 2024

SEO Lifehacks

Geheimnisse der Chrome Dev-Tools zur Optimierung von Layout Shifts (CLS)

Porträt von SEO Experte Raymond Eiber
Raymond Eiber

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
Bildschirmfoto einer SEO Konfiguration
Mehr sehen

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.

Bildschirmfoto Layout
Mehr sehen
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.

Bildschirmfoto Lighthouse Konfigurationen
Mehr sehen
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.

Bildschirmfoto Code
Mehr sehen

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.

Porträt von SEO Experte Raymond Eiber

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.

Alle Artikel Ansehen