Cumulative Layout Shift (CLS)

 (web.dev)
7 Punkte von xguru 2020-03-12 | 4 Kommentare | Auf WhatsApp teilen

Langsames Laden von Bildern/Werbung, asynchrones Verhalten, dynamische DOM-Änderungen usw.

messen, wie stark sich das Layout einer Webseite verändert,

um die visuelle Instabilität zu prüfen, die dazu führen kann, dass Nutzer falsch klicken; eine nutzerzentrierte Performance-Kennzahl

„Ein guter CLS-Wert liegt bei 0,1 oder darunter“


Die Layout Instability API stellt einen Messwert namens Layout Shift Score bereit.

- Layout Shift Score = impact fraction ( wie groß ist das Objekt, das sich bewegt ) * distance fraction ( wie weit bewegt es sich )

- Layout-Änderungen durch Nutzeraktionen sind in Ordnung – wenn es innerhalb von 500 ms eine Nutzereingabe gab, wird `hadRecentInput` gesetzt und kann aus der Berechnung ausgeschlossen werden.

- Statt `height`/`width` zu ändern, `transform:scale()` verwenden

- Statt `top`,`right`,`bottom`,`left` zu ändern, `transform: translate()` verwenden

Methoden zur Verbesserung von CLS

- Für Bilder/Videos immer Größen angeben oder mit CSS Aspect Ratio Boxes usw. den Platz vorab reservieren

- Außer bei Nutzerinteraktionen keine neuen Inhalte über bestehenden Inhalten einfügen

- Übergänge zwischen Zuständen mit Animationen wie CSS Transform umsetzen

Verwandte Beiträge

4 Kommentare

 
kunggom 2020-03-12

Wenn sich genau in dem Moment, in dem man drücken will, das Layout plötzlich leicht verschiebt und man dadurch oft falsch tippt, ist das ziemlich nervig – gut, dass es dafür nun endlich eine Möglichkeit zur quantitativen Messung gibt. Meiner persönlichen Einschätzung nach würden die Werte verheerend ausfallen, wenn man das auf den Webseiten von Medienhäusern messen würde.
 
xguru 2020-03-12

Bei inländischen Medien gibt es so viele Anzeigen, und diese Anzeigen selbst sind auch noch langsam und flackern, dass schon die Messung an sich wohl bedeutungslos ist ...

Anderes Thema: Ich nutze https://github.com/disjukr/just-news und Tampermonkey, sodass ich bei inländischen Medien nur den Haupttext anschaue. Die Websites sind viel zu unübersichtlich.
 
kunggom 2020-03-12

Früher hatte ich sogar einmal vor, in Python ein [Programm zu schreiben, das beim Einfügen eines Links zu einem Zeitungsartikel diesen automatisch in einen Link zu einem Portal-Newsartikel umwandelt]. Etwas absurd habe ich dann aber den Quellcode verloren (ich habe ihn versehentlich auf einem RAM-Laufwerk gespeichert und dann neu gestartet), bekam einen Moment der Ernüchterung(?) und habe das Projekt aufgegeben.
 
xguru 2020-03-12

Nutzerzentrierte Performance-Metriken

https://web.dev/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/…

Die bisherigen Metriken load und DOMContentLoaded sind keine guten Indikatoren.

First contentful paint (FCP): Zeitpunkt, an dem die ersten Inhalte auf dem Bildschirm erscheinen

Largest contentful paint (LCP): Zeitpunkt, an dem der größte Textblock oder das größte Bild der Seite angezeigt wird

First input delay (FID): Zeitspanne, nachdem Nutzereingaben möglich sind, bis der Browser tatsächlich darauf reagiert

Time to Interactive (TTI): Zeit vom Laden bis zu dem Punkt, an dem Nutzerinteraktionen möglich sind

Total blocking time (TBT): Gesamte Zeit zwischen FCP und TTI

Cumulative layout shift (CLS): Kennzahl für Layout-Verschiebungen