Core Web Vitals (CLS)

1 Walter

Hallo

Google PageSpeed Insights motzt bei meiner Site, dass die Kumulative Layoutverschiebung 0.99 beträgt.

Der Speed Score basiert auf den von Lighthouse analysierten Labdaten.

Leider habe ich keinen Tipp erhalten, in welcher Datei resp. Zeile das Problem liegt.

Gibts einen Tipp, wo und wie ich genaueres erfahre?

Gruss
Walter

2 Jörg Kruse

Als erstes würde ich schauen, welche Elemente auf der Seite später laden und dadurch die Verschiebungen verursachen. Bei einer schnellen Internetleitung kann die Drossel-Funktion in den Entwickler-Tools von Firefox ggf. hilfreich zur Identifizerung solcher Elemente sein.

Durch langsam ladende Bilder verursachte Verschiebungen kann man gut mit den HTML- oder CSS-Attributen height und width vorbeugen: dann hält der Browser beim Seitenaufbau den benötigten Platz frei und nachfolgende Elementenmüssen nicht nach unten verschoben werden, sobald das Bild geladen ist.

3 Walter

Hallo Jörg

Danke für die Infos!

Drossel-Funktion = Laufzeitanalyse?

height und width sind (für mich) selbstverständlich.

4 Jörg Kruse

Drossel-Funktion = Laufzeitanalyse?

Nein, Netzwerkanalyse. Dort den Haken bei "Cache deaktivieren" rein machen, und im Dropdown statt "Keine Drosselung" eine langsamere Verbindungsart auswählen. Danach mit F5 die Seite neu laden und zuschauen, wie sie langsam aufgebaut wird :)

height und width sind (für mich) selbstverständlich.

Das ist schon mal gut. Bei anderen verzögert ladenden Elementen könnten Eltern-Container mit einer festen Größe als Platzhalter dienen.

5 Walter

Hallo Jörg

Danke, ich habs die Drosselung gefunden.
Ich probiere jetzt der Sache mit den Chrome Dev Tools auf die Schliche zu kommen.

6 Walter

Hat dieser Zoom:1 etwas mit dem Viewport zu tun?
Der Wert 1 ist doch Standard.

7 Jörg Kruse

"zoom: 1" ist ein auch Hack für sehr alte IE-Versionen (< IE8).

Ansonsten wohl eher sinnfrei bei einem Wert von 1 und auch im Hinblick darauf, dass zoom gar kein CSS-Standard ist und von Firefox überhaupt nicht interpretiert wird.

8 Walter

Die Frage ist nur, wo kommt die Einstellung zoom: 1 her.
Der Eintrag ist weder im Header noch in der .css-Datei ...

9 Jörg Kruse

Dafür könnte auch noch ein JavaScript verantwortlich sein.

Beitrag schreiben (als Gast)