Autor
Es ist nun schon 1 Jahr her, dass Google in seinen Suchergebnissen die Erfahrung von Nutzern als Positionsfaktor berücksichtigt hat. Die Web-Performance-KPIs, die zu den Core Web Vitals gehören, werden von den SEO-Verantwortlichen bereits seit langem überwacht. Informieren Sie sich heute über die kumulative Layout-Verschiebung.
Les Core Web Vitals (Signaux Web Essentiels en français) bewerten die Leistung des Ladevorgangs einer Webseite für einen Internetnutzer:
Was ist die kumulative Layout-Verschiebung?
Das CLS (Cumulative Layout Shift) misst also die visuelle Stabilität einer Seite. Das bekannteste Beispiel ist eine Medienseite, die von Natur aus eine dichte Öffentlichkeitsarbeit hat. Der Titel und der Anfang eines Artikels erscheinen, und der Benutzer versucht, sie zu lesen, aber in dem Moment, in dem er klickt, erscheint eine Werbebotschaft. Wenn der Benutzer also auf eine nicht gewünschte Seite gelangt, muss er nach vorne gehen, um zu seinem Artikel zurückzukehren, und aufpassen, dass er nicht erneut auf die Werbebanderole klickt.
Optimieren der kumulativen Layout-Verschiebung - Google - https://web.dev/optimize-cls/
Da sich die Situation auf modernen Websites verschlechtert hat, ist es kohärent, dass Google einen Indikator für die Messung eingeführt hat, um die Herausgeber von Websites zu ermutigen, die Qualität zu verbessern.
Wie kann ich das messen?
Es handelt sich um ein aus zwei Elementen bestehendes System:
Ein Beispiel: Das Hauptgerät deckt 50% des Bildschirms ab und wird durch 25% ersetzt, so dass insgesamt 75% des Bildschirms genutzt werden.
Le CLS est donc : Fläche x Abstand = 0,75 * 0,25 = 0,1875
Sie befinden sich also in der Phase der Verbesserung, die notwendig ist, damit die betreffende Seite als CLS-erweitert betrachtet werden kann.
Darüber hinaus können Sie mit den Web-Performance-Tools von Google den CLS einer bestimmten Seite auslesen: PageSpeed Insights (Website-Tiers) und Lighthouse (Modul des Google Chrome Navigators). Die beste Datenquelle bleibt naturgemäß die, die die aktuellen Daten der Nutzer wiedergibt, wie z.B. die Search Console. Im Bericht über die wichtigsten Webdaten wird die Anzahl der Seiten angezeigt, die als mangelhaft oder verbesserungsbedürftig eingestuft werden, und jeder KPI verfügt über einen eigenen Bericht.
So können Sie die betroffenen Seiten leicht identifizieren, indem Sie sie nach ähnlichen Seiten gruppieren (Gabarit / Vorlage).
Wie lässt sich das CLS verbessern?
Bonne nouvelle, en plus de nous donner le maximum de données de mesure, Google nous guide um eventuelle Probleme der visuellen Instabilität zu beheben.
Plusieurs scénarios courants sont abordés :
Der Fall, dass Bilder nach der Seitenstruktur aufgeladen werden, ist bei jeder Art von Website üblich, insbesondere im Bereich des elektronischen Geschäftsverkehrs (Tabellen oder Listen von Produkten).
Im folgenden Beispiel wird der Produktname zuerst geladen, dann folgen die Produktbilder. Diese löschen die bereits geladenen Namen, wodurch die Seite während des Ladevorgangs instabil wird.
Sie können dieses Verhalten verhindern, indem Sie die für diese Bilder reservierten Bereiche festlegen, bevor Sie sie aufladen.
Eine der möglichen Methoden besteht darin, die Abmessungen des Bildes anzugeben. Die Navigatoren können dann die Größe des Bildes durch Berechnung des Verhältnisses zwischen Größe und Höhe (aspect-ratio) bestimmen.
Es ist auch möglich, im CSS direkt ein Seitenverhältnis anzugeben, um es auf eine Kategorie ähnlicher Bilder anwenden zu können.
Wir weisen darauf hin, dass diese Verbesserung die Bewertung der betreffenden Website seit ihrer Inbetriebnahme insgesamt verbessert hat: von einem CLS von 0,178 sind wir auf 0,002 gekommen. Und von 26% der Besucher, die von einer visuellen Instabilität der Website betroffen waren, sind wir auf 1,27% gestiegen (Angaben aus der Search Console, die die von den Nutzern der Website ermittelten Leistungen widerspiegeln).
