Optimierung der CLS-Metrik

Grüße an alle Liebhaber schneller Webseiten! Im Dezember 2023 hatte ich auf dem Frontendisten Meetup einen Vortrag über die CLS-Metrik.

Ich zeigte vor allem die häufigsten Probleme mit der CLS-Metrik, die auf den Websites unserer Kunden auftreten, und wie wir dabei helfen, diese zu beseitigen.

Lassen Sie uns gemeinsam erkunden, wie Sie CLS-Problemen vorbeugen können und wie Sie diese beheben, wenn sie auftreten.

Lesen Sie weiter oder schauen Sie sich einfach die Aufzeichnung an:

1. Aspect-Ratio, Dimensionen, Min-height#

Jedes Element auf einer Webseite hat eine spezifische Größe. Es kann sich um ein Bild, Video, ein iframe oder ein anderes Web-Element handeln. Wenn die Seite geladen wird, reserviert der Browser vor der Anzeige des Elements Platz dafür. Mehr darüber erfahren Sie in diesem Artikel.

2. Font Size-Adjust#

Verwenden Sie die CSS-Deskriptoren size-adjust und ascent-override, um die Abmessungen der Systemschrift mit den Parametern der Webschriftart abzugleichen, die Sie auf Ihrer Website verwenden. Stellen Sie sicher, dass die Systemschrift so nah wie möglich an Ihrer Schriftart gerendert wird.

Die Vorbereitung der Deskriptoren ist einfach. Sie können beispielsweise diesen Generator nutzen. Spielen Sie Ihren Webfont auf der Seite ein und passen Sie die Umrisse mit den Schiebereglern so an, dass sie proportional zur Systemschrift passen.

Für Google Fonts sind die einzelnen Einstellungen bereits auf dieser Seite vorbereitet. Hier sehen Sie auch, wie der endgültige Text aussehen wird.

Hier sehen Sie, wie sich die Anordnung und Positionierung der einzelnen Absätze nach dem Laden der Webschriftart ändert.

Beispiel eines Werkzeugs zur Anpassung der Systemschriftgröße screenspan.net/fallback.

3. Stufenweises Laden von Inhalten#

Beim Rendern der Seite scannt der Browser den HTML-Inhalt, beginnt nach und nach mit dem Herunterladen der einzelnen Quelldateien und verarbeitet sie dann. Webseiten bestehen oft aus kleineren Komponenten wie Header, Hauptinhalt und Footer. Manchmal hat der Hauptinhalt eine komplexe Struktur oder enthält eine große Menge an Daten.

Wenn Ihre Website mit einem JavaScript-Framework erstellt wurde (Vue.js, React usw.), kann es sein, dass das JavaScript, das das Rendern des Hauptinhalts übernimmt, länger geladen wird als das JavaScript, das den Header und den Footer der Seite rendert.

Wenn der Footer der Website zuerst gerendert wird und danach der Hauptinhalt, verschiebt sich der Footer und es kommt zu einem unerwünschten Layout-Shift.

Der Hauptinhalt wurde zu spät gerendert und verschob den Footer. Dadurch entstand ein Layout-Shift.

Die Lösungen hierfür sind vielfältig und hängen von der Art und Nutzung der Anwendung ab.

• Dieses Problem tritt häufig bei Client-Side-Rendering-Anwendungen auf. Aktivieren Sie, wenn möglich, das Server-Side-Rendering für so viele Elemente wie möglich auf der Website.
• Eine weitere Lösung kann das Laden des Footers erst nach dem Laden des Hauptinhalts sein.
• Wenn Sie das Timing der Verarbeitung von JavaScript-Dateien nicht vollständig unter Ihrer Kontrolle haben, können Sie den Footer sofort beim ersten Rendern der Seite aus dem Viewport herausschieben. Dies können Sie tun, indem Sie die minimale Höhe des Elements <main> mithilfe der CSS-Eigenschaft min-height: 100vh festlegen.

4. Inhalte (nicht nur) in modalen Fenstern und AJAX#

Wenn Sie AJAX auf Ihrer Website verwenden, um Daten nachzuladen, stellen Sie sicher, dass die anzuzeigenden Daten auf der Seite einen vorab reservierten Platz haben und den darunter liegenden Inhalt nicht verschieben.

Dies betrifft beispielsweise die Anzeige der Verfügbarkeit von Produkten, Produktbeschreibungen, technischen Daten, Preise oder anderer Tabellen. Weitere problematische Elemente können verschiedene Anzeigen und Werbeboxen sein, bei denen Sie oft nicht die zukünftige Höhe des Inhalts kennen.

Informationen, die später als beim ersten Rendern der Seite geladen werden, verschieben erneut den Inhalt und erhöhen den CLS.

Die Lösung besteht oft darin, geeignete Platzhalter für die Bereiche vorzubereiten, in die der tatsächliche Inhalt später gerendert werden soll. Wenn Sie die zukünftige Höhe des Elements (z. B. eine Werbung) nicht kennen, bereiten Sie zumindest einen Platzhalter mit minimaler Höhe vor, der den Einfluss auf die CLS-Metrik zumindest teilweise mindert.

Mini-Fallstudie: Optimierung des CLS auf der Startseite von Datart#

Datart.cz ist es in Zusammenarbeit mit PageSpeed.ONE gelungen, die unerwünschten Layout-Shifts auf der Startseite deutlich zu reduzieren. Das Problem lag in einem Karussell, das über den externen Dienst Bloomreach geladen wurde und erst nach dem ersten Rendern der Seite geladen wurde, wodurch der darunter liegende Inhalt verschoben wurde.

Die Lösung war relativ einfach, aber nicht leicht in die bestehende Lösung zu integrieren. Wir reservierten Platz für das Karussell, bevor es geladen wurde. Dank dieser Anpassung sank der CLS-Wert auf der Startseite von 0,6 auf 0,06, was einer zehnfachen Verbesserung entspricht.

Das Diagramm zeigt die Entwicklung der CLS-Metrik auf der Startseite von Datart. Der Anteil der nicht konformen Messungen (roter Bereich) sank von etwa zwei Dritteln der Seitenaufrufe auf ein Minimum, während der Anteil der konformen Messungen (grüner Bereich) auf über 80 % anstieg.

5. CLS nach Benutzerinteraktion Klick, Hover oder Touch#

Manchmal treffen wir auf Entwickler, die fälschlicherweise glauben, dass die CLS-Metrik nur bei der ersten Anzeige der Seite im ersten Viewport gemessen wird. Das ist ein Irrtum. Die CLS-Metrik wird während des gesamten Aufenthalts auf der Seite berechnet.

Wenn Sie also auf eine Schaltfläche klicken, die ein Feld öffnet und den darunter liegenden Inhalt verschiebt, kann dies erneut ein Element sein, das die CLS-Metrik verschlechtert.

Wenn Sie Inhalte auf der Seite nach einer Benutzerinteraktion (Klick, Touch, Hover) ändern, muss der gesamte Vorgang vom Klick bis zur vollständigen Anzeige der Inhalte innerhalb von 500 ms erfolgen.

Stellen Sie sich beispielsweise das AJAX-Paging in einer Produktkategorieliste vor.

1. Der Benutzer erreicht das Ende der Seite.
2. Er klickt auf die Schaltfläche „Weitere Produkte laden“.
3. Im Hintergrund wird eine Datenbankabfrage ausgeführt, die Produkte lädt.
4. Ein neuer HTML-Code wird in die Seite eingefügt.

Wenn diese 4 Schritte zusammen mehr als 500 ms dauern, kann es zu einem unerwünschten Layout-Shift kommen und der neue Inhalt verschiebt beispielsweise den Footer nach unten.

Manchmal ist es nicht einfach, Daten schnell genug zu laden, insbesondere bei einer langsameren mobilen Verbindung. Die Ursache kann die Antwortzeit des Datenbankservers, eine nicht optimierte Datenbankabfrage, die Antwortzeit eines Drittanbieterservers und Ähnliches sein.

Wenn Sie die Anfrage nicht schnell genug verarbeiten können, müssen Sie zumindest einen leeren Platz (Platzhalter) für die neuen Daten sofort nach dem Klicken auf die Schaltfläche vorbereiten. Dadurch wird der Footer sofort nach der Benutzerinteraktion aus dem Viewport verschoben und neue Daten werden angezeigt, sobald sie vom Server kommen.

Eine langsame Antwort der Datenbank verursacht einen Layout-Shift und eine Verschlechterung der CLS-Metrik nach Benutzerinteraktion.

Durch Einfügen eines Platzhalters sofort nach dem Klicken auf die Schaltfläche kommt es nicht zu einem Layout-Shift.

6. Animationen nur mit CSS Transform#

Bereiten Sie Animationen des Hintergrunds, der Anzeige und Bewegung von Boxen, hüpfenden Elementen, Größenänderungen usw. mithilfe von CSS Transform vor. So vermeiden Sie eine Verschlechterung der CLS-Metrik.

Wenn es sich um ein Element im Layout handelt, beispielsweise im Menü oder an der Seite der Seite, kann sich eine schlechte CLS-Metrik auf das gesamte Domain-Rating auswirken.

• Die CSS Transform-Eigenschaft ermöglicht es, Elemente zu animieren, ohne dass es zu Layout-Verschiebungen kommt.
• Wenn Sie Elemente verschieben möchten, vermeiden Sie die Änderung der Eigenschaften top, right, bottom oder left und verwenden Sie stattdessen transform
  ().
• Verwenden Sie anstelle der Änderung der Höhe und Breite die Eigenschaft transform
  ().

Schlecht vorbereitete von rechts nach links verschiebende Schaltflächen oder Animationen eines dunklen Überlagerungshintergrunds in der Kopfzeile können die CLS-Metrik stark verschlechtern.

Tipp zum Schluss#

Wenn bei der Testung Ihrer Website der CLS-Wert 1,00 oder mehr anzeigt, bedeutet dies, dass sich die gesamte Fläche der Seite verschiebt.

Versuchen Sie einen Trick und setzen Sie für das <html>-Tag die Regel overflow-y:scroll mit einer Höhe von 100%.

Manchmal kann ein so hoher CLS-Wert durch die Anzeige der Scrollleiste während des Renderns der Seite verursacht werden. Dadurch wird die Scrollleiste immer angezeigt.

html {
  height: 100%;
  overflow-y: scroll;
}

Das Thema der Optimierung der Core Web Vitals-Metriken decken wir in vollem Umfang ab, lesen Sie unsere weiteren Texte:

• Optimierung der LCP-Metrik
• Optimierung der INP-Metrik