Wie durch CLS-Optimierungen die Yahoo!- Seitenaufrufe pro Sitzung um 15%

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.

Tomoki Kiraku
Tomoki Kiraku

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.

Core Web Vitals-Bericht der Google Search Console mit hohem CLS-Wert für die Seite mit Artikeldetails.
Core Web Vitals-Bericht der Google Search Console.
Lighthouse Vermeiden Sie Audits zu großen Layoutverschiebungen, bei denen DOm-Elemente angezeigt werden, die am meisten zur CLS auf der Seite beitragen.
Die Lighthouse-Prüfung „Große Layoutverschiebungen vermeiden“ zeigt, welche Elemente in welchem Umfang zum CLS-Wert beitragen.

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.

Seite mit Artikeldetails mit blauen Rechtecken über dem Hero-Image und dem Text.
Visualisierung von Layoutverschiebungen.

Dabei stellte sich heraus, dass es zu einem Layoutwechsel kam, nachdem das Hero-Image oben im Artikel für die erste Ansicht geladen wurde.

Screenshots der Seite mit Artikeldetails, die einen direkten Vergleich vor und nach dem Layout Shift zeigen.
Layoutverschiebung auf der Artikeldetailseite.

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.

Screenshots der Seite mit Artikeldetails, die einen direkten Vergleich vor und nach der CLS-Optimierung zeigen.
Links: reservierter leerer Bereich für das Bild oben auf der Seite; rechts: das Hero-Image, das ohne Layoutverschiebungen im reservierten Bereich geladen wird.

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.

Search Console-Bericht, der einen deutlichen Rückgang der Seiten mit Leistungsproblemen zeigt.
Search Console nach Verbesserungen.

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.

Label „Schnelle Seite“ in Chrome unter Android
Label „Schnelle Seite“ in Chrome unter Android.

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.