Die CLS-Optimierung um 0,2 führte zu einem Anstieg der Seitenaufrufe pro Sitzung um 15 %, der Sitzungsdauer um 13% und der Absprungrate um 1,72 Prozentpunkte.
Yahoo! JAPAN ist mit über 79 Milliarden Seitenaufrufen pro Monat eines der größten Medienunternehmen in Japan. Ihre Nachrichtenplattform Yahoo! JAPAN News zählt mehr als 22 Milliarden Seitenaufrufe pro Monat und ein Entwicklerteam ist bestrebt, die Nutzerfreundlichkeit zu verbessern.
Durch die kontinuierliche Überwachung der Core Web Vitals korrelierte das Unternehmen den verbesserten Cumulative Layout Shift (CLS)-Wert der Website mit einem Anstieg der Seitenaufrufe pro Sitzung um 15 % und der Sitzungsdauer um 13 %.
0,2
CLS-Verbesserung
15,1 %
Mehr Seitenaufrufe pro Sitzung
13,3 %
Längere Sitzungsdauer
Wenn sich Seiteninhalte unerwartet verschieben, führt dies häufig zu versehentlichen Klicks, Desorientierung und letztendlich Frustration bei den Nutzern. Unzufriedene Nutzende verbringen meist nicht lange. Um die Nutzenden zufriedenzustellen, sollte das Seitenlayout über den gesamten Lebenszyklus der User Journey stabil bleiben. Für Yahoo! JAPAN Nachrichten, dass diese Verbesserung erhebliche positive Auswirkungen auf geschäftskritische Engagement-Messwerte hatte.
Technische Details zur Verbesserung der CLS finden Sie in der Yahoo! Beitrag des Engineering-Teams für JAPAN News.
Problem identifizieren
Das Monitoring von Core Web Vitals, einschließlich CLS, ist entscheidend, um Probleme zu erkennen und ihren Ursprung zu ermitteln. Bei Yahoo! JAPAN News bietet in der Search Console einen hervorragenden Überblick über Seitengruppen mit Leistungsproblemen und Lighthouse ergab pro Seite Möglichkeiten zur Verbesserung der Nutzerfreundlichkeit. Mithilfe dieser Tools stellten sie fest, dass die Seite mit den Artikeldetails schlechte CLS aufwies.
Beachten Sie den kumulativen Teil des Cumulative Layout Shifts. Die Punktzahl wird über den gesamten Seitenlebenszyklus erfasst. In der realen Welt kann die Punktzahl Verschiebungen umfassen, die als Ergebnis von Nutzerinteraktionen wie Scrollen auf einer Seite oder Tippen auf eine Schaltfläche auftreten. Um CLS-Werte aus den Felddaten zu erfassen, hat das Team Berichte zu web-vitals-JavaScript-Bibliotheken integriert.
Das Team verwendete die Chrome-Entwicklertools, um zu ermitteln, welche Elemente Layoutverschiebungen auf der Seite verursachten. Mit Layout Shift Regions in den Entwicklertools können Elemente, die zu CLS beitragen, durch ein blaues Rechteck hervorgehoben werden.
Dabei stellte sich heraus, dass es zu einem Layoutwechsel kam, nachdem das Hero-Image oben im Artikel für die erste Ansicht geladen wurde.
Wenn im obigen Beispiel das Bild fertig geladen ist, wird der Text nach unten verschoben (die Positionsänderung wird durch die rote Linie angezeigt).
CLS für Bilder verbessern
Bei Bildern mit fester Größe lassen sich Layoutverschiebungen verhindern, indem Sie die Attribute width und height im Element img angeben und die CSS-Eigenschaft aspect-ratio verwenden, die in modernen Browsern verfügbar ist. Yahoo! JAPAN News musste nicht nur moderne Browser unterstützen, sondern auch Browser, die unter relativ alten Betriebssystemen wie iOS 9 installiert waren.
Dabei wurden Felder für das Seitenverhältnis verwendet. Bei dieser Methode wird mithilfe von Markup der Platz auf der Seite reserviert, bevor das Bild geladen wird. Bei dieser Methode müssen Sie das Seitenverhältnis des Bildes im Voraus kennen, das von der Back-End API abgerufen werden konnte.
Ergebnisse
Die Anzahl der URLs mit schlechter Leistung in der Search Console sank um 98% und die CLS-Werte in Labordaten sanken von etwa 0,2 auf 0. Außerdem gab es mehrere korrelierte Verbesserungen bei den Geschäftsmesswerten.
Wenn Yahoo! JAPAN News verglich vor und nach der CLS-Optimierung Messwerte zum Nutzer-Engagement. Das Ergebnis:
15,1 %
Mehr Seitenaufrufe pro Sitzung
13,3 %
Längere Sitzungsdauer
1,72 %*
Niedrigere Absprungrate (*Prozentpunkte)
Durch die Verbesserung des CLS-Werts und anderer Core Web Vitals-Messwerte kann Yahoo! JAPAN News hat außerdem im Kontextmenü von Chrome Android das Label Schnelle Seite.
Layout Shifts sind frustrierend und hindern Nutzer daran, weitere Seiten zu lesen. Sie können jedoch verbessert werden, indem Sie geeignete Tools verwenden, Probleme identifizieren und Best Practices anwenden. Eine Verbesserung der CLS ist eine Chance, Ihre Umsätze zu steigern.
Weitere Informationen finden Sie in der Yahoo! Beitrag des Engineering-Teams in JAPAN.