Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Seite beim Laden. Dazu wird untersucht, wie weit die Elemente sind und wie weit sie sich in Bewegung setzen. Dies ist eine welcher drei Core Web Vitals-Metriken, die Google zur Messung welcher Seitenerfahrung verwendet.
CLS wird während des Fünf-Sekunden-Fensters berechnet, in dem die meisten Verschiebungen hervortreten.
Randnotiz.
Erwartete Layoutverschiebungen, etwa nachdem einer Benutzeraktion, sind in Ordnungsprinzip und werden erwartet. Verschiebungen intrinsisch von 500 ms nachdem einer Benutzerinteraktion werden von den Berechnungen Ding der Unmöglichkeit.
So wird es gemessen:
Layout-Shift-Score = Impact-Kontingent x Entfernungsanteil
Oder verständlicher gesagt:
Layout-Verschiebungspunktzahl = % des geänderten Ansichtsfensters * die Entfernung, um die sich ein instabiles Element bewegt hat
Jener Grund, warum CLS wichtig ist, liegt darin, dass es unwillkommen ist, wenn Sie versuchen, hinaus irgendetwas hinaus einer Seite zu klicken, dies sich verschiebt, und dann am Finale hinaus irgendetwas klicken, welches Sie nicht beabsichtigen.
Es passiert mir die ganze Zeit. meine Wenigkeit klicke hinaus eine Sache und plötzlich klicke ich hinaus eine Strafanzeige und befinde mich jetzt nicht einmal hinaus derselben Website. Denn Benutzer finde ich dies frustrierend.
Zu den häufigsten Ursachen zu Händen CLS in Besitz sein von:
- Bilder ohne Metrik.
- Darstellen, Einbettungen und Iframes ohne Dimensionen.
- Inhalte mit JavaScript einfügen.
- Anwenden von Schriftarten oder Stilen tardiv beim Laden.
Schauen wir uns an, wie hoch Ihr CLS-Score sein sollte und wie Sie ihn verbessern können.
Ein guter CLS-Score liegt unter oder gleich 0,1 und sollte hinaus den Datenansammlung des Chrome User Experience Report (CrUX) basieren. Hierbei handelt es sich um Datenansammlung von tatsächlichen Chrome-Nutzern, die sich hinaus Ihrer Website Ergehen und welcher Weitergabe dieser Informationen zugestimmt nach sich ziehen. Sie benötigen 75 % welcher Seitenladevorgänge, um vereinen CLS-Score von 0,1 oder niedriger zu nach sich ziehen.
Ihre Seite kann in vereinen welcher folgenden Bereiche eingeordnet werden:
- Gut: <=0,1
- Verbesserungsbedarf: >0,1 und <=0,25
- Schlecht: >0,25
CLS-Datenansammlung
72,8 % welcher Websites nach sich ziehen im vierter Monat des Jahres 2023 gute CLS-Werte. Dies wird oberhalb die gesamte Website gemittelt. Wie schon erwähnt, sollen 75 % welcher Seitenladevorgänge vereinen CLS-Score von 0,1 oder niedriger nach sich ziehen, um qua gut eingestuft zu werden.
CLS ist dies am meisten verbesserte Core Web Vital seitdem Googles Bemühungen um schnellere Websites.
Denn wir eine Studie hinaus Seitenebene mit durchgeführt nach sich ziehen Site-Audit Datenansammlung nach sich ziehen wir gesehen, dass CLS hinaus Desktops und Mobilgeräten homolog ist.
Wir nach sich ziehen gleichfalls festgestellt, dass viele Websites Probleme mit CLS nach sich ziehen, insbesondere nebst langsameren Verbindungen.
CLS ist in den Datenansammlung hinaus Seitenebene unterlegen qua in den Ursprungsdaten. Es ist wahrscheinlich, dass die Volk ihre Hauptseiten verbessern, die mehr Traffic generieren, während viele andere Seiten schlechtere Ergebnisse erzielen.
Es gibt verschiedene Möglichkeiten, CLS zu messen: Felddaten und Labordaten.
Felddaten stammen aus dem Chrome-Benutzererfahrungsbericht (CrUX)Damit handelt es sich um Datenansammlung von echten Chrome-Nutzern, die sich dazu entscheiden, ihre Datenansammlung zu teilen. In Folge dessen erhalten Sie den besten Eindruck von welcher tatsächlichen CLS-Leistung. Daran werden Sie gleichfalls tatsächlich von Google zu Händen die Core Web Vitals gemessen.
Labordaten basieren hinaus Tests mit denselben Bedingungen, um die Tests wiederholbar zu zeugen. Google verwendet dies nicht zu Händen Core Web Vitals. Z. Hd. Tests ist es jedoch nützlich, da es sich nebst den CrUX-/Felddaten um vereinen gleitenden 28-Tage-Durchschnitt handelt und es von dort eine Weile dauert, solange bis die Auswirkungen von Änderungen erkennbar sind.
Dasjenige beste Tool zum Messung von CLS hängt von welcher Spezies welcher gewünschten Datenansammlung (Laboratorium/Feld) ab und davon, ob Sie sie zu Händen eine oder mehrere URLs benötigen.
CLS zu Händen eine einzelne URL messen
Pagespeed-Einblicke Ruft Felddaten hinaus Seitenebene ab, die Sie sonst nicht im CrUX-Eintragung auslesen können. Außerdem führt es zu Händen Sie Labortests hinaus Grund von Google durch Leuchtturm und liefert Ihnen Ursprungsdaten, sodass Sie die Seitenleistung mit welcher welcher gesamten Website vergleichen können.
CLS zu Händen viele URLs oder eine ganze Website messen
Sie können CrUX-Datenansammlung in welcher Google Search Console abrufen, die in die Kategorien „gut“, „verbesserungswürdig“ und „schlecht“ unterteilt sind.
Wenn Sie hinaus eines welcher Probleme klicken, erhalten Sie eine Aufschlüsselung welcher betroffenen Seitengruppen. C/o den Gruppen handelt es sich um Seiten mit ähnlichen Werten, die wahrscheinlich dieselbe Vorlage verwenden. Sie nehmen die Änderungen einmal in welcher Vorlage vor und ebendiese werden hinaus allen Seiten in welcher Schar behoben.
Wenn Sie sowohl Labordaten qua gleichfalls Felddaten in großem Messlatte benötigen, können Sie ebendiese nur oberhalb die PageSpeed Insights API erhalten. Mit Ahrefs können Sie ganz mühelos eine Verpflichtung herstellen Site-Audit und erhalten Sie Berichte oberhalb Ihre Leistung. Dies ist zu Händen verifizierte Websites mit einem kostenlos Ahrefs Webmaster-Tools (AWT)-Konto.
Berücksichtigen Sie, dass die angezeigten Core Web Vitals-Datenansammlung von dem Benutzeragenten eindeutig werden, den Sie während welcher Institution zu Händen Ihren Crawl auswählen. Wenn Sie von Mobilgeräten aus crawlen, erhalten Sie mobile CWV-Werte von welcher API.
In PageSpeed-EinblickeWenn Sie im Stufe „Diagnose“ die Vorkaufsrecht „CLS“ auswählen, werden sämtliche zugehörigen Probleme wie „Vermeiden großer Layoutverschiebungen“ angezeigt. Dies sind die Probleme, die Sie losmachen möchten.
In den meisten Fällen werden Sie zur Optimierung von CLS an Problemen im Zusammenhang mit Bildern, Schriftarten oder unter Umständen eingefügten Inhalten funktionieren. Schauen wir uns jeden einzelnen Sachverhalt an.
1. Reservieren Sie Sitzgelegenheit zu Händen Bilder, Videos und Iframes
C/o Bildern sollen Sie lediglich den Sitzgelegenheit reservieren, damit es zu keiner Verschiebung kommt und dies Gemälde diesen Sitzgelegenheit mühelos ausfüllt. Dies kann bedeuten, dass Sie die Höhe und Umfang von Bildern festlegen, während Sie sie intrinsisch des festlegen Tag so:
<img src=“cat.jpg" width="640" height="360" frühzeitlich=“cat with string" />
Z. Hd. responsive Bilder sollen Sie ein Srcset wie dieses verwenden:
<img
width="1000"
height="1000"
src="https://ahrefs.com/blog/cumulative-layout-shift-cls/puppy-1000.jpg"
srcset="https://ahrefs.com/puppy-1000.jpg 1000w, https://ahrefs.com/puppy-2000.jpg 2000w, https://ahrefs.com/puppy-3000.jpg 3000w"
frühzeitlich="Puppy with balloons" />
Sie sollten gleichfalls den benötigten Sitzgelegenheit zu Händen Gedöns wie Videos und Iframes reservieren. Z. Hd. dynamische Inhalte wie Darstellen sollten Sie den maximal benötigten Sitzgelegenheit reservieren.
Es gibt gleichfalls eine relativ neue CSS-Umstand namens „aspect-ratio“, mit welcher Sie eine dynamische Umfang basierend hinaus welcher Bildschirmgröße festlegen können und welcher Browser dann die entsprechende Höhe zu Händen Sie berechnet.
2. Schriftarten optimieren
C/o Schriftarten besteht dies Ziel darin, die Schriftart so schnell wie möglich hinaus den Röhre zu erwirtschaften und sie nicht mit einer anderen Schriftart auszutauschen. Wenn eine Schriftart geladen oder geändert wird, kommt es zu einer merklichen Verschiebung wie einem Flash of Invisible Text (FOIT) oder einem Flash of Unstyled Text (FOUT).
Wenn Sie eine Systemschriftart verwenden können, tun Sie dies. Es gibt nichts zu laden, es gibt danach keine Verzögerungen oder Änderungen, die zu einer Verschiebung münden würden.
Wenn Sie eine benutzerdefinierte Schriftart verwenden sollen, ist die Verknüpfung derzeit die beste Methode zur Minimierung von CLS (wodurch versucht wird, Ihre Schriftart so schnell wie möglich abzurufen) und „font-display: optional“ (welches Ihrer Schriftart ein kleines Zeitfenster zum Laden gibt).
Wenn die Schriftart es nicht rechtzeitig schafft, wird beim ersten Laden welcher Seite mühelos eine Standardschriftart angezeigt. Ihre benutzerdefinierte Schriftart wird dann zwischengespeichert und beim nächsten Laden welcher Seite angezeigt.
3. Verwenden Sie Animationen, die keine Layoutänderungen handhaben
Es gibt wenige CSS-Eigenschaftswerte, die Layoutverschiebungen handhaben, z. B. „box-shadow“, „box-sizing“, „top“, „left“ und mehr, die nicht animiert werden sollten. Stattdessen sollten Sie „Transformations“-Animationen verwenden, um Layoutverschiebungen zu vermeiden.
4. Stellen Sie sicher, dass Ihre Seiten zu Händen bfcache probat sind
Jener Back/Forward-Datenpuffer hält Seiten im Browser-Datenpuffer. Es ermöglicht dies sofortige Laden einer schon geladenen Seite, sodass keine Layoutverschiebungen hervortreten.
Ebendiese Optimierung hat einiges zu eröffnen. Die wichtigsten Strategien sind unten aufgeführt, und Sie können mehr darüber Vorlesung halten Hier.
Hauptstrategien:
- Verwenden Sie niemals dies Unload-Ereignis
- Minimieren Sie die Verwendung von Datenpuffer-Control: No-Store
- Updaten Sie veraltete oder vertrauliche Datenansammlung nachdem welcher Bfcache-Wiederherstellung
- Vermeiden Sie Verweise hinaus window.opener
- Schließen Sie immer offene Verbindungen, im Vorfeld welcher Benutzer wegnavigiert
- Testen Sie, um sicherzustellen, dass Ihre Seiten zwischenspeicherbar sind
Abschließende Gedanken
Seit dieser Zeit welcher Einleitung von CLS nach sich ziehen wir schon Innovationen wie bfcache und CSS-Seitenverhältnis gesehen, die nebst diesem Problem helfen. meine Wenigkeit erwarte, dass wir in Zukunft mehr Innovationen und mehr neue Möglichkeiten sehen werden, um Layoutverschiebungen zu verhindern.
Wenn Sie Fragen nach sich ziehen, schreiben Sie mir eine Nachricht auf Twitter.
