lernen

Beispiele für kumulative Layout-Verschiebungen und bewährte Praktiken

Kumulative Layout-Verschiebung (CLS)

Die Bereitstellung wertvoller, auf Schlüsselwörter ausgerichteter Inhalte mit hohem Engagement reicht nicht aus, um einen Spitzenplatz in den Suchergebnissen zu garantieren. Damit Websites im Internet erfolgreich sind, müssen sie auch ein hochwertiges Nutzererlebnis bieten. Aber wie sieht ein hochwertiges Nutzererlebnis aus? Um diese Frage zu beantworten, werfen wir einen Blick auf die Leitlinien von Google zu diesem Thema. 

Die wichtigsten dieser Leitlinien sind unter dem Namen Core Web Vitals bekannt. Lesen Sie unseren Artikel zur Erläuterung der Core Web Vitals, falls Sie damit noch nicht vertraut sind. Dieser Artikel konzentriert sich auf einen Core Web Vital im Besonderen, Cumulative Layout Shift, und wie Sie die visuelle Stabilität Ihrer Website optimieren können, um eine bessere Bewertung zu erhalten.

Was ist eine kumulative Layout-Verschiebung?

Die kumulative Layoutverschiebung (CLS) ist ein Wert, der die visuelle Stabilität auf der Grundlage eines bestimmten Algorithmus bestimmt. Wir haben einen Abschnitt dieses Artikels der Erläuterung des Algorithmus gewidmet, der zur Berechnung der CLS-Bewertung verwendet wird. 

Sie müssen Ihren CLS-Wert unter 0,1 halten, um ein gutes Nutzererlebnis zu gewährleisten. Je niedriger Ihr Wert ist, desto stabiler ist Ihr Seitenlayout. Ein Wert von über 0,1 bedeutet, dass die Leistung Ihrer Seite keine Vorteile für das Suchmaschinenranking bringt, so dass konkurrierende Seiten mit höherer Leistung besser platziert werden können. 

Laut dem Chrome UX-Bericht erreichten am 1. Juni 2021 62,2 % der Websites einen CLS-Wert von weniger als 0,1 für Desktop-Erlebnisse (61,5 % für mobile Geräte). Allerdings erhielten nur 40,2 % der Websites eine gute Gesamtbewertung für alle zentralen Webvitalien. Diese Zahl sinkt auf 28,3 % für mobile Erlebnisse.  

{{banner-37="/design/banners"}}

Die Bedeutung der visuellen Stabilität

Stellen Sie sich vor, Sie kaufen von Ihrem Handy aus ein und haben ein paar Hemden in Ihrem Warenkorb. Sie beschließen, die Anzahl der ausgewählten Hemden zu aktualisieren, und navigieren zur Ansicht Ihres Warenkorbs. Wenn Sie auf "Bearbeiten" klicken, verschiebt sich das Seitenlayout, und Ihr Daumen wählt "Artikel entfernen" statt "+1". Diese Erfahrung ist für den Benutzer aufgrund der visuellen Instabilität frustrierend. 

In unserem Shopping-Beispiel besteht zwar kein nennenswertes Risiko für den Nutzer, aber Sie können sich extreme Szenarien vorstellen, in denen visuelle Instabilität zu schlimmeren Ergebnissen führen könnte: versehentliches Absenden eines unvollständigen Formulars, Eingabe falscher Beträge, Auschecken, bevor Sie Ihre Versandinformationen aktualisiert haben, usw. Aus diesen Gründen betrachtet Google die visuelle Stabilität als eine der wichtigsten Metriken für eine bestimmte Webseite. 

Dies gilt insbesondere, wenn man bedenkt, dass die meisten Webseiten für die Desktop-Ansicht entwickelt wurden, aber 50 % des Internetverkehrs über mobile Geräte erfolgt. Das bedeutet, dass die Hälfte Ihrer Nutzer potenziell unangenehmen Layout-Verschiebungen ausgesetzt sein könnte, wenn die Seite nicht mit Blick auf die visuelle Stabilität für Mobilgeräte gestaltet wurde. 

Zur Messung der visuellen Stabilität verwendet Google die Metrik der kumulativen Layoutverschiebung (CLS).

Fallstudie: Die kumulativen Auswirkungen der Layout-Verschiebung auf das Geschäft

Die Telegraph Media Group limited (TMG) betreibt mit dem 1855 gegründeten Daily Telegraph eine der ältesten Zeitungen in England. Sie betreibt auch eine Nachrichten-Website, die jeden Monat schätzungsweise 28 Millionen Besucher anzieht. 

Das Web-Administrationsteam von TMG war eines der ersten, das die Auswirkungen der wichtigsten Webvitalien auf seine Einnahmen aus dem Verkauf digitaler Werbung erkannte. Ihre Verbesserungsbemühungen führten zur Erstellung einer Fallstudie, die von Google gefördert wurde. Die Verbesserung der Core Web Vitals wirkt sich in zweierlei Hinsicht auf die Umsätze des Unternehmens aus:

  • Es verbessert die Platzierung von Nachrichtenartikeln auf den Google-Suchergebnisseiten, da Google ab Juni 2021 das Signal "Core Web Vital" im Suchalgorithmus erhöht. Die Verbesserung des Rankings führt zu mehr organischem Verkehr auf ihrer Website, was wiederum den Anzeigenverkauf fördert.

  • Sie verbessert das Nutzererlebnis auf der Seite, so dass die Besucher länger auf der Website verweilen und sich an den Inhalten erfreuen. So wichtig der Verkauf von Anzeigen auch ist, die treuen Telegraph-Leser kommen wieder, weil sie einen starken Leitartikel und eine ausgefeilte Präsentation der Inhalte schätzen. 

Ironischerweise führte das Vorhandensein der gleichen umsatzbringenden Anzeigen zu einer Verschiebung des Layouts. Sie lösten das CLS-Problem, indem sie die Anzeigengrößen (Höhe und Breite) standardisierten und Platz für den Anzeigenschlitz reservierten, der den gemeinsamen Anzeigengrößen entsprach. Die folgenden Bilder zeigen den Unterschied zwischen vorher und nachher.

Vor der Verbesserung:

Nach der Verbesserung:

Sie verbesserten auch die Art und Weise, wie Bilder, Kopfzeilen und Einbettungen (z. B. YouTube-Videos) auf ihre Seiten geladen wurden, indem sie ähnliche Anweisungen befolgten, wie sie weiter unten in diesem Artikel beschrieben werden. Infolgedessen verbesserte sich der CLS-Wert ihrer Website um 250 %, was zu mehr Besuchern auf ihrer Website führte, die mehr Zeit damit verbrachten, die Nachrichten zu lesen und auf Anzeigen zu klicken.

{{banner-16="/design/banners"}}

Wie berechnet man eine kumulative Layout-Verschiebungsbewertung?

Der Bewertungsalgorithmus berechnet die CLS, indem er die Ladezeit einer Seite in Zeitfenster unterteilt und das Fenster mit der höchsten CLS-Bewertung auswählt. Definieren wir zunächst das Konzept der Fensterung genauer.

  • Sitzungsfenster: Ein Fenster, das durch eine unerwartete Layoutverschiebung ausgelöst wird und sich nach 1 Sekunde ohne weitere Layoutverschiebungen schließt, mit einer Obergrenze von 5 Sekunden. 
  • Layout-Verschiebungswerte: Eine Berechnung für jede Layout-Verschiebung, die innerhalb des 5-Sekunden-Fensters einer Sitzung stattfindet. 
  • Layout-Verschiebung: Immer, wenn ein Element verschoben wird, um seine Position von einem Frame zum nächsten zu ändern.  

Sobald Sie die Zeitfenster bestimmt haben, verwenden Sie die folgenden Metriken für jede Layout-Verschiebung, die in diesem Sitzungsfenster stattgefunden hat:

  1. Auswirkungsfraktion: Die geometrische Vereinigung aller Verschiebungsknoten im Rahmen als Prozentsatz (Impact Region), geteilt durch den gesamten Viewport.
  2. Abstandsbruchteil: Stellt den größten Knotenverschiebungsabstand in einem Frame dar, geteilt durch die Breite oder Höhe des Ansichtsfensters (je nachdem, welcher Wert größer ist). 

Nehmen wir an, ein Element nimmt 60 % des gesamten Ansichtsfensters ein und verschiebt sich dann um die Hälfte seiner Acht. Das bedeutet Folgendes:

  • Der Einflussbereich des Ansichtsfensters beträgt 90% (60% + 30%)
  • Der Aufprallanteil beträgt 0,9 (90 % der Höhe von 1 Viewport)
  • Der Abstandsanteil beträgt 0,3 (30% der Höhe des Sichtfensters) 

Multiplizieren Sie nun diese Werte, um einen Wert für die Layoutverschiebung zu erhalten.   

0.9 x 0.3 = 0.27

Sie müssen jede Layout-Schicht in einem Sitzungsfenster bewerten. Nachdem Sie die Punktzahl für jede Layoutverschiebung berechnet haben, addieren Sie die Punktzahlen zusammen. Der Einfachheit halber nehmen wir an, dass auf unserer Seite nur eine Layoutverschiebung stattgefunden hat. Der CLS würde dann 0,27 betragen. 

Hinweis: Selbst wenn ein separates Sitzungsfenster eine Summe von 0,20 CLS aufweist, hat dies keinen Einfluss auf Ihre CLS-Bewertung. Google misst nur das maximale Sitzungsfenster. Zur Erinnerung: Sitzungsfenster können bis zu 5 Sekunden dauern und schließen sich nach 1 Sekunde ohne weitere Layout-Verschiebungen. 

Einen tieferen Einblick in dieses Thema finden Sie in diesem Artikel

{{banner-34="/design/banners"}}

Was ist ein gutes CLS-Ergebnis?

Sie sollten einen CLS-Wert von unter 0,1 anstreben, um eine optimale Benutzerfreundlichkeit zu gewährleisten. Jeder Wert über 0,25 wird als schlechter Wert eingestuft und bedeutet in der Regel, dass Ihre Benutzer negativ beeinflusst werden. Wie Sie den CLS-Wert einer Seite messen können, erfahren Sie im nächsten Abschnitt dieses Artikels. Sie können auf den Hyperlink unter jedem Screenshot klicken, um weitere Informationen zu erhalten. 

Ein niedriger CLS-Wert (0,001)

Ergebnis von smartblogger.com 

Ein hoher CLS-Wert (0,571)

Ergebnis von ahcustom.com 

Wie erkennt man Probleme mit kumulativen Layoutverschiebungen?

Sie können CLS auf zwei Arten messen: 

  1. Über synthetische Überwachung: Verwendet eine Kombination aus Agenten (für die Datenerfassung) und synthetischen Tests (für die Simulation von Benutzeraktivitäten), um Leistungsinformationen, einschließlich CLS-Metriken, zu sammeln. 
  2. Über Real User Monitoring (RUM): Die gesammelten Daten basieren auf tatsächlichen, realen Nutzererfahrungen. Diese Daten spiegeln die gesamte Lebensdauer der Seite wider. 

Für einen schnellen Einstieg führen Sie einfach die folgenden Schritte aus, um einen synthetischen Test durchzuführen: 

  1. Besuchen Sie https://www.webpagetest.org/webvitals  
  2. Geben Sie Ihre URL ein und wählen Sie eine Testkonfiguration. Nach ein paar Minuten sollte Ihr Test zur Überprüfung bereit sein.
  3. Führen Sie einen Bildlauf nach unten zu Cumulative Layout Shift durch, um weitere Einzelheiten zu Ihrem CLS-Ergebnis anzuzeigen.
  4. Bewegen Sie den Mauszeiger über die einzelnen Bilder, um die Layout-Veränderungen zu sehen (die Animation wird beim Bewegen des Mauszeigers ausgelöst). 

Ein wichtiges Unterscheidungsmerkmal von WebPageTest ist, dass Sie sich den gesamten Test auch als Filmstreifen oder Video ansehen können, bei dem jedes einzelne Bild angezeigt wird. Wählen Sie einfach "View as Filmstrip" oder "View Video" auf den Hyperlinks am unteren Rand des Screenshots, der die Ergebnisse von der Homepage des New York Magazine zeigt. 

Der Filmstreifen zeigt jeden Frame während des Ladens der Seite an und hebt automatisch die Frames hervor, in denen die wichtigsten Web-Probleme auftreten (klicken Sie hier, um ein Beispiel zu sehen): 

Das Video ist eine zeitlich begrenzte Aufzeichnung dessen, was ein Benutzer auf einem Mobiltelefon sieht, während die Seite wie unten dargestellt geladen wird (klicken Sie hier, um ein Beispiel zu sehen):

{{banner-35="/design/banners"}}

Erweiterte kumulative Layout-Verschiebungsmessung

JavaScript-APIs

Die Leistungsbeobachter-API ist eine Möglichkeit, RUM-Web-Leistungsdaten von realen Nutzern zu erhalten. Sie sucht nach leistungsbezogenen Ereignissen auf einer Webseite und benachrichtigt Sie über die neuen Leistungseinträge, die in der Leistungszeitleiste Ihres Browsers aufgezeichnet werden. Indem Sie einen neuen PerformanceObserver erstellen, können Sie ein bestimmtes Ereignis während der Sitzung der Besucher Ihrer Website identifizieren. Sie können programmatisch die Informationen über die Quellen abrufen, die CLS verursachen.

 

let cls = 0;

neu PerformanceObserver((entryList) => {

für (konst Eintrag von entryList.getEntries()) {

// 500 ms Fenster für den Ausschluss von Eingaben

if (!entry.hadRecentInput) {

      cls += Eintrag.Wert;

console.log('Aktueller CLS-Wert:', cls, entry);

    }

  }

// the buffered flag enables observer to access entries from before the observer creation

}).observe({type: 'layout-shift', buffered: true});

 

‍Web-VitalsBibliothek

Sie können diese Bibliothek verwenden, um den Core Web Vitals Score anhand von RUM-Daten zu ermitteln. Zu Debugging-Zwecken kann eine verfeinerte Analyse durchgeführt werden. So können Sie beispielsweise das zweite Argument in der Funktion getCLS auf true setzen, wenn Sie jede Layoutverschiebung melden möchten:

 

import {getCLS} from 'web-vitals';    

// Protokolliert CLS, wenn sich der Wert ändert.
getCLS(console.log, true);

 

Die Hauptursachen für kumulative Layoutverschiebungen und ihre Behebung

Es gibt drei Hauptursachen für CLS. In den folgenden Abschnitten gehen wir auf die einzelnen Ursachen ein und zeigen Ihnen, wie Sie das Problem lösen können. Sie können anhand Ihrer WebPageTest-Ergebnisse mitlesen. Sehen Sie sich die Highlights jeder Sitzung oder jedes Filmstreifens an, um festzustellen, mit welcher Art von Problem Sie es zu tun haben.

1. Keine Abmessungen für Medien definiert

Problem

Wenn für Medien wie Bilder und Videos keine Höhen- und Breitenmaße angegeben sind, muss der Medieninhalt den begleitenden Text nach unten oder über das Ansichtsfenster hinausschieben. Dies geschieht, weil Text viel schneller geladen wird als Medien auf einer Webseite, und ohne Platzhalter, die das Layout des Textes steuern, muss die Seite angepasst werden, wenn mehr Inhalt geladen wird. 

Eine visuelle Erklärung der Auswirkungen der Definition von Mediendimensionen (Quelle).

Beispiel

Um das Problem einzugrenzen, erstellen Sie mit WebPageTest einen Filmstreifen, der den Rahmen mit einer Layoutverschiebung im Ladevorgang automatisch hervorhebt. 

Sehen Sie sich zum Beispiel den Frame bei 14,5 Sekunden im folgenden Screenshot an (mit einer gestrichelten gelben Linie hervorgehoben), der von der Hauptseite der Website der Washington Post stammt und eine Layout-Verschiebung im oberen Bereich des Frames zeigt. In diesem Fall wurde die Verschiebung durch die Schaffung des Platzes verursacht, der zum Laden des Bildes erforderlich ist (zu sehen nach 17 Sekunden). Sie können hier klicken, um eine archivierte Kopie des unten gezeigten Ergebnisses zu sehen, da sich die Homepage der Washington Post mit Sicherheit ändern wird, wenn Sie diesen Artikel lesen.

Diese Lösung ist recht einfach: Fügen Sie einfach die Attribute Breite und Höhe zu allen Ihren Bildern hinzu, etwa so:

{{banner-36="/design/banners"}}

2. Kein Platz für langsam ladende und dynamische Inhalte zugewiesen

Problem

Wenn der Platz für Elemente wie Anzeigen, Einbettungen, Iframes und dynamisch eingefügte Inhalte nicht ordnungsgemäß reserviert wird, kann es zu Layoutverschiebungen kommen. Sie können dies abmildern, indem Sie sicherstellen, dass die Abmessungen des Containers oder der Vorgängerelemente bereits beim ersten Rendern ausreichend Platz bieten. 

Beispiel

WebPageTest kann auch eine Videoaufnahme des Ladevorgangs aus der Perspektive eines potenziellen Endbenutzers auf dem angegebenen Gerät/Browsertyp erstellen. Um es schnell zu teilen, speichern Sie es einfach als .gif-Datei.  

Sie können zum Beispiel sehen, wie die folgenden Anzeigen auf der Website theverge.com mehrere Layoutwechsel bei 1,5s, 4s, 5s, 7,5s usw. verursachen. In diesem Fall wird der langsam ladende Inhalt erst nach 17 Sekunden vollständig angezeigt. Sie können hier klicken, um eine archivierte Kopie des unten gezeigten Ergebnisses zu sehen, da sich der Inhalt der Seite zu dem Zeitpunkt, an dem Sie diesen Artikel lesen, bereits geändert haben wird.

Lösung: Platz für Inhalte reservieren

Reservieren Sie den Platz für langsam ladende und eingefügte Inhalte, indem Sie Platzhalter mit einer bestimmten Breite und Höhe verwenden. Hier sind einige Beispiele für die Festlegung der Abmessungen von Anzeigen in CSS und JS.

 

<div class="ads" style="min-width: 300px; min-height: 250px;"></div>

 

Durch die Reservierung von Platz (Bild rechts) wird die Verschiebung von Inhalten vermieden (Quelle).

3. Suboptimale Web-Schriften

Problem

Web-Schriften sind beliebt, aber wenn sie nicht optimiert sind, können sie auf zweierlei Weise Layout-Verschiebungen verursachen: 

  1. FOUT (Flash Of Unstyled Text): Tritt auf, wenn eine Seite Text mit der Standard-Fallback-Schriftart anzeigt, bevor der gewünschte Schriftstil gerendert wird, was zu einer Neuanordnung der Dimensionen aufgrund der variierenden Schriftbreite und -höhe führt. 
  2. FOIT (Flash Of Invisible Text): Tritt auf, wenn eine "unsichtbare" Schrift angezeigt wird, während die Webseite darauf wartet, dass der primäre Schriftstil gerendert wird. 

Beispiel

Je nach Seitenlayout können sich Web-Schriftarten drastisch auf Ihr CLS-Ergebnis auswirken. Anhand der Seite bbc.com/news können Sie sehen, wie sich schon ein kurzer ungestylter Text dramatisch auf Ihr Ergebnis auswirken kann. 2 Sekunden nach dem Laden der Seite wird das Styling des Textes geladen, wodurch sich die Anzahl der Nachrichtenkarten pro Zeile ändert (beachten Sie die zusätzliche Karte auf der rechten Seite der obersten Zeile) und die CLS-Punktzahl um enorme 0,489 beeinflusst wird. Denken Sie daran, dass Sie eine Punktzahl von 0,1 anstreben. Sie können hier klicken, um eine archivierte Kopie des unten gezeigten Ergebnisses zu sehen. Diese archivierte Version hilft Ihnen, den festen Streifen zu sehen, da der Inhalt der Seite zu dem Zeitpunkt, an dem Sie diesen Artikel lesen, bereits geblättert sein wird.

Lösung: Vorbereiten einer Text-Rendering-Strategie

Um schriftartbedingte Layoutverschiebungen zu vermeiden, können Sie mit dem CSS-Deskriptor font-display eine Strategie für die Textwiedergabe festlegen. Sie können zum Beispiel die Schriftartanzeige innerhalb einer at-Regel auf optional setzen. Wenn Ihre primäre Schriftart nicht innerhalb der ersten 100 ms geladen wird, wird der Text einfach mit der Ersatzschriftart gerendert. 

You can also combine font-display: optional with <link rel="preload"> to preload optional fonts to completely eliminate layout shifts.

Das Laden der Web-Schriftart für die Überschrift verursacht eine Layout-Verschiebung. Sehen Sie sich den Test auf dieser archivierten Version des Filmstreifens von WebPageTest an, da sich der Inhalt der BBC-Webseite geändert haben wird, wenn Sie diesen Artikel lesen.

Quelle

Resümee

Wie Sie bereits gelernt haben, ist die Metrik der kumulativen Layoutverschiebung (CLS) eine nutzerzentrierte Metrik, die eine entscheidende Rolle bei den Suchergebnissen Ihrer Webseite spielt. CLS misst die visuelle Stabilität einer bestimmten Seite, die anhand der Gesamtpunktzahl für die Layoutverschiebung des maximalen Sitzungsfensters berechnet wird. 

CLS zu verstehen, zu debuggen und zu verbessern ist ein hervorragender Schritt zur gezielten Seitenoptimierung, insbesondere in Kombination mit anderen nutzerzentrierten Web-Performance-Kennzahlen. Ein guter CLS-Score verbessert Ihr Nutzererlebnis, fördert die Suchmaschinenoptimierung und steigert Leads, Konversionen und Umsätze.

{{banner-37="/design/banners"}}