Google hat letztes Jahr eine Reihe neuer Kriterien definiert, die eine schlechte User Experience bestrafen. Seit Mai 2021 beeinflussen die Ihr Suchmaschinen-Ranking. Zu viel Cumulative Layout Shift auf Ihrer Website ist so ein Faktor. Wir erklären, was Usern – und Google – an diesem Phänomen missfällt und was Sie dagegen tun können.
Kennen Sie das? Während eine Website lädt und der Inhalt vollständig im Browser erscheint und bedienbar ist, können Sie dabei zusehen, wie sich Elemente nach und nach verschieben und andere Blöcke nach unten schieben. Ist die Seite fertig geladen, müssen Sie wieder nach oben scrollen bis zu der Stelle, an der Sie bereits angefangen hatten zu lesen. Was Sie hier nervt, stört nun auch Google, also…
Muss das hüpfen, oder kann das weg?
Dieses Phänomen nennt Google «Cumulative Layout Shift». Der Browser weiss nicht von Anfang an, wie viel Platz jedes Element der Webpage einnehmen wird. Meist werden nicht alle Inhalte zum gleichen Zeitpunkt geladen, und das Browser-Rendering braucht auch seine Zeit, bis es all die Styling-Anweisungen (CSS) ausgeführt hat. Google straft seit kurzem diverse Verfehlungen gegen die UX ab.
Beispiel einer News-Website, an der der Cumulative Layout Shift deutlich wird. Quelle: Le Monde, 11.08.2020
Ursachen für ruckelnde Webpages
Die häufigsten Gründe für das Ruckeln sind:
- Bilder ohne Dimensionen
Der Browser muss das Bild zuerst laden, bevor er die Breite und Höhe erkennt und weiss, wieviel Platz er dafür schaffen muss. Dieser Prozess nennt sich «Reflow» – die Browser-Engine muss den Canvas (das ganze Layout) neu berechnen und aufbauen. Beispiel ohne & mit CLS-Optimierung - Werbung, eingebetteter Inhalt und iFrames
Sie sind die Hauptverursacher der nervösen Webpages, zumal sie durch immer grössere Elemente starke Bewegungen auf der Seite verursachen. - Dynamisch eingefügter Inhalt (asynchron, fetch, AJAX)
- Eigene Web-Schriften
Sie verursachen nachträgliche Berechnungen im Browser (Flash of invisible text / Flash of Unstyled Text)
In der Entwicklungsphase bemerken Sie viele dieser Issues nicht, da Sie Bilder meist lokal laden, der Content im Cache liegt, oder Sie Werbung erst beim Going-Live aktivieren. Lokale API-Zugriffe sind meist so schnell, dass Sie keine Verzögerungen wahrnehmen. Und selbstverständlich macht es einen Unterschied, ob nur ein Dutzend Leute gleichzeitig dieselbe URL aufrufen, während es auf einer Live-Site schnell mal Tausende sind.
Grünes Licht für Inhalte auf Abruf
Um Missverständnissen vorzubeugen: Ein Klick auf eine Akkordeon-Überschrift öffnet den dazugehörigen Inhalt – das darf und soll so bleiben, denn user-generierte Layout Verschiebungen werden nicht negativ bewertet. Wenn der Benutzer also Elemente anklickt, um weiteren Inhalt zu laden, wird das nicht in das CLS-Budget der Seite eingerechnet. Denn das sind akzeptierte und nützliche User Interface Konzepte. Flyouts, Hamburger-Menus, dynamische Formularblöcke; das Prinzip des «progressive enhancement» haben nach wie vor ihre Gültigkeit, und werden von automatisierten Prüfungs-Algorithmen nicht als vermeintliches CLS-Übel eingestuft.
Auch bewährte Techniken wie Lazy Loading, oder Lade-Indikatoren (progress bars, loading spinners) werden CLS-technisch nicht «abgemahnt».
Auswirkungen auf die User Experience
Ruckelnde Seiten nerven und belasten die Augen unnötig. Im Extremfall können unerwartete Layout-Verschiebungen gravierende Folgen haben:
Falls eine Schaltfläche auf einmal nach oben rutscht, lösen Ihre Kunden evtl. eine ungewollte Aktion aus. Sie fügen einen Artikel in den Warenkorb, akzeptieren eine rechtliche Bedingung, löschen aus Versehen das ganze Formular, oder öffnen ein neues Browserfenster. Obwohl hier keine böse Absicht dahinter steckt, erinnert das Ergebnis an Dark Patterns, d.h. Design Bausteine, die den User täuschen sollen, um eine vom Anbieter gewünschte Aktion auszulösen. Der folgende Videocast veranschaulicht dieses Szenario:
Wie schlimm ist das?
Google hat letzten Mai den CLS-Wert in seinen Search Ranking Algorithmen höher gewichtet. Ihr Ranking kann sich durch einen hohen CLS-Wert insbesondere dann verschlechtern, wenn Ihr Inhalt Konkurrenz von anderen Websites hat:
While all of the components of page experience are important, we will prioritize pages with the best information overall, even if some aspects of page experience are subpar. A good page experience doesn't override having great, relevant content. However, in cases where there are multiple pages that have similar content, page experience becomes much more important for visibility in Search.
Auszug aus Kapitel «Page experience ranking» von Google Search Central
Hohe CLS-Werte reduzieren
Folgende 3 Tipps helfen im Code, den CLS-Wert im Griff zu behalten.
- Simulieren Sie die Ladezeit bei Neu- und Umbauten Ihrer Website im Performance-Tool Ihrer Wahl (z.B. direkt im Google Chrome mit dem Network Throttling Tool)
- Definieren Sie Kennzahlen für die Ladezeit von Bildern und Scripts
- Erweitern Sie Ihr SEO-Monitoring um das Chrome UX Dashboard und überprüfen Sie die Werte mit Ihrer/m Programmierer/in.
Wenn Ihr Analyse-Tool (dann immer noch) rot oder orange anzeigt, versuchen Sie mit einer der folgenden Massnahmen, die Werte in den grünen Bereich zu bringen:
Platzhalter / Skeleton Loading
CSS-Animationen und SVG-Grafiken können Ihrer Site ein wenig Pep verschaffen, je nachdem können Sie mit Javascript ein wenig nachhelfen. Man kennt solche Techniken von diversen Newsportalen oder auch von YouTube, Facebook & Co.
CSS aspect-ratio
Layout-Shifts betreffen v.a. vertikale Veränderungen. Gerade für Bilder kann die CSS-Anweisung aspect-ratio das Ruckeln vermeiden. Zusammen mit object-fit: contain, img width/height Attributen und CSS Grid können Sie schon viele Seitenelemente optimieren. Mehr zum CSS aspect-ratio bei WebDev.
CSS min-height / min-width
Eine fixe Höhe in Pixel zu definieren ist bei unserer jetzigen Vielfalt der Bildschirmgrössen selten eine gute Idee. Eine Minimalhöhe oder -Breite hingegen ist je nach Situation meist akzeptabel, und hilft, visuelle Sprünge beim Seitenaufbau zu vermeiden.
Vorgaben für die Web-Redaktion
Auch die Redaktion kann einen guten CLS-Wert mit beeinflussen. Viele Teaser erschweren nicht nur die Orientierung auf einer Webpage, sondern können sich auch negativ auf den CLS-Wert auswirken. Hilfsgrössen sind: Ein Titel darf 100 Zeichen nicht überschreiten, die Zusammenfassung (Lead) sollte jeweils ungefähr gleich lang, z.B. um die 250 Zeichen, sein.
Detaillierte Tipps zu CLS-Optimierungen mit Code-Beispielen.
Fazit
CLS-Werte werden für Ihr Google-Ranking eine Rolle spielen und Sie sollten diesen und die anderen Schlüsselwerte kontinuierlich überwachen. Korrekturen sind meist mit mässigem Aufwand möglich und erfordern selten einen kompletten Umbau. Wir gehen davon aus, dass insbesondere auf transaktionsorientierten Sites Konversion und Absprungrate unter schlechten CLS-Werten leiden werden. Aber auch Sites in einem kompetitiven Umfeld, die ähnlichen Content wie viele andere haben, könnten bei einem hohen CLS-Wert an Sichtbarkeit verlieren. Google signalisiert mit dem neuen Algorithmus deutlich: User Experience ist ein Faktor, der auch quantitativ zählt.
Weitere Screencasts:
- https://web.dev/optimize-cls/#images-without-dimensions
- https://web.dev/optimize-cls/#embeds-and-iframes
- https://web.dev/optimize-cls/#dynamic-content
- https://css-tricks.com/content-jumping-avoid/
Skeleton Placeholder Loading Code-Beispiele:
- Beispiel 1 — von zalog (Catalin Zalog) auf Github
- Beispiel 2 — Blogartikel von Ferenc Almasi bei Prototypr.io
Was User bemerken und die User Experience stört
Google hat seit Jahren schon diverse Kennzahlen definiert (user-centric performance metrics).
Wahrgenommene Ladegeschwindigkeit: Wie schnell eine Seite alle visuellen Elemente laden und auf dem Bildschirm rendern kann.
Reaktionsfähigkeit beim Laden: Wie schnell eine Seite den erforderlichen JavaScript-Code laden und ausführen kann, damit Komponenten schnell auf Benutzerinteraktionen reagieren können.
Reaktionszeit zur Laufzeit: Wie schnell kann die Seite nach dem Laden der Seite auf Benutzerinteraktionen reagieren?
Visuelle Stabilität: Verschieben sich Elemente auf der Seite auf eine Weise, die Benutzer nicht erwarten und möglicherweise ihre Interaktionen beeinträchtigen?
Fliessende Übergänge: Werden Übergänge und Animationen mit einer konstanten Bildwechselfrequenz gerendert und fliessen sie weich von einem Zustand zum nächsten?
Schlechte CLS-Werte wirken sich auf die beiden letzten Kennzahlen aus.
Kommentare