Im Mai 2020 führte Google drei wichtige Kennzahlen ein, die als Kern-Web-Vitale. Diese Kennzahlen dienen dazu, die allgemeine Benutzererfahrung einer Website zu messen. Das Ziel ist einfach: das Web für alle zu verbessern. Die drei wichtigsten Web Vitals sind:
- Größte Contentful Paint (LCP): Dadurch wird gemessen, wie lange es dauert, bis der Hauptinhalt der Seite auf dem Bildschirm erscheint.
- Erste Eingangsverzögerung (FID): Dadurch wird gemessen, wie lange es dauert, bis ein Besucher mit der Seite interagieren kann.
- Kumulative Layoutverschiebung (CLS): Dadurch wird gemessen, ob die Seite optisch stabil ist oder ob sich ihre Elemente während des Ladens stark verschieben.
Diese Kennzahlen sind mehr als nur Zahlen für Suchrankings. Sie wirken sich direkt auf das Erlebnis Ihrer Besucher aus. Die Verbesserung dieser Kennzahlen verbessert nicht nur Ihr Ranking, sondern macht Ihre Website auch angenehmer.
Was ist die kumulative Layoutverschiebung?
Kumulative Layoutverschiebung (CLS) ist der Schwerpunkt dieses Artikels. Der Name klingt zwar technisch, das Konzept ist jedoch einfach. Wollten Sie schon einmal auf eine Schaltfläche klicken oder eine Textzeile lesen, als plötzlich ein Bild oder eine Anzeige auftauchte und alles nach unten drückte? Dieses irritierende Erlebnis wird durch eine Layoutverschiebung verursacht. CLS misst, wie stark sich die Elemente einer Seite beim Laden verschieben. Ein guter CLS-Wert liegt bei 0.1 oder niedriger. Alles über 0.25 gilt als schlecht. Ein niedrigerer Wert bedeutet eine stabilere Seite und damit ein besseres Benutzererlebnis.
Wie wird CLS berechnet?
Der CLS-Score ist eine Zahl zwischen 0 und 1. Ein Wert von 0 bedeutet perfekt, ohne Layout-Verschiebungen, während ein Wert nahe 1 auf viel Bewegung hinweist. Die Mathematik hinter dieser Zahl ist nicht allzu kompliziert: Layout-Verschiebungs-Score = Auswirkungsanteil * Entfernungsanteil. Der Schlaganteil misst, wie stark die Seite von der Verschiebung betroffen ist, und die Distanzanteil misst, wie weit sich die Elemente bewegen. Bewegt sich beispielsweise ein großes Element über eine größere Distanz, führt dies zu einem schlechten CLS-Score. Layoutverschiebungen, die innerhalb einer halben Sekunde nach der Interaktion des Nutzers mit der Seite (z. B. Klicken oder Tippen) erfolgen, werden nicht in die Bewertung einbezogen.
Wie finde ich meinen CLS?
Bevor Sie Ihren CLS-Wert ermitteln können, müssen Sie ihn kennen. Es gibt verschiedene Möglichkeiten, Ihren CLS-Wert zu ermitteln.
Google Pagespeed-Insights
Sie können einen Seitengeschwindigkeitstest durchführen in Google Pagespeed-Insights, und Sie sehen den CLS-Score in der Liste Labordaten Abschnitt. Der Bericht wird auch die Hauptursachen des CLS in der Diagnose Abschnitt. Je nachdem, wie viel Verkehr Ihre Website erhält, kann der Bericht auch enthalten Felddaten, das auf den Erfahrungen echter Benutzer basiert.
Google Search Console
Ihre Suchkonsole verfügt über eine Kern-Web-Vitale Bericht, der Ihnen zeigt, welche Seiten eine gute oder schlechte Leistung aufweisen. Dieser Bericht enthält Ihren CLS-Score sowie Ihren größten Contentful Paint und die erste Eingabeverzögerung.
Google Leuchtturm
Sie können auch die Tasten Lighthouse Registerkarte in den Entwicklertools Ihres Browsers. Sie können einen vollständigen Leistungsbericht ausführen, einschließlich der kumulativen Layoutverschiebung. Dieser ist dem Pagespeed Insights-Bericht sehr ähnlich, bietet aber einen zusätzlichen Vorteil: Sie können ihn auf Seiten ausführen, die noch nicht öffentlich sind, was ihn zu einem großartigen Tool für Entwickler macht.
Was verursacht eine kumulative Layoutverschiebung?
Die häufigsten Ursachen für Layoutverschiebungen lassen sich mit wenigen einfachen Änderungen beheben. Hier sind die häufigsten Ursachen und wie man sie behebt.
Bilder und Videos ohne Abmessungen
Dies ist eine der häufigsten Ursachen für CLS. Wenn ein Browser eine Seite lädt, wird zuerst der HTML-Code geladen, gefolgt vom CSS und schließlich den Bildern und Videos. Wenn Sie die Breite und Höhe eines Bildes oder Videos nicht angeben, weiß der Browser nicht, wie viel Platz er dafür reservieren soll. Infolgedessen verschiebt sich das Layout, sobald das Bild geladen ist. Dies ist besonders bei langsameren Verbindungen spürbar.
Wie behebe ich das?
Die Lösung ist einfach: Geben Sie immer die Höhe und Breite Ihrer Bilder in HTML an. Dadurch wird dem Browser genau mitgeteilt, wie viel Platz reserviert werden soll, damit der Rest der Seite an der richtigen Stelle geladen wird. Achten Sie außerdem darauf, dass Ihre Bilder einen guten Alternativtext haben, da dieser ein wichtiger Bestandteil von On-Page-SEO. Unser kostenloses KI-Bild-Alt-Text-Generator kann Ihnen dabei helfen, eine gute Beschreibung für Ihre Bilder zu schreiben, was auch eine großartige Möglichkeit ist, Ihre SEO zu verbessern.
Siehe Werbung
Anzeigen sind eine Hauptursache für CLS. Sie werden oft geladen und auf einen bestimmten Besucher ausgerichtet, und das Laden kann eine Weile dauern. Dies kann zu einer plötzlichen Layoutverschiebung führen, insbesondere wenn sich die Anzeige oben auf der Seite befindet.
Wie behebe ich das?
Ähnlich wie bei Bildern können Sie die Abmessungen einer Anzeige festlegen. Dadurch wird sichergestellt, dass sich das Layout nach dem Laden der Anzeige nicht verschiebt. Es empfiehlt sich, den größtmöglichen Platz für die Anzeige zu reservieren, auch wenn eine kleinere Anzeige ausgeliefert wird.
Einbettungen und I-Frames
Wenn Sie Elemente wie YouTube-Videos, Google Maps oder Twitter-Feeds in Ihre Seite einbetten, müssen Sie beim CLS vorsichtig sein. Sie kennen nicht immer die genaue Größe des Elements, daher besteht die Gefahr, dass sich das Layout verschiebt.
Wie behebe ich das?
Sie sollten versuchen, die Größe des Elements gut abzuschätzen und den Platz im Layout freizuhalten. Wenn Sie sich nicht sicher sind, sollten Sie eine maximale Höhe oder Breite für das Element festlegen.
Web-Schriftarten
Auch das Laden von Schriftarten von Diensten wie Google Fonts kann zu einer Verschiebung des Layouts führen. Während des Ladens einer Schriftart wird die Seite möglicherweise bereits mit einer Ersatzschriftart angezeigt. Sobald die Schriftart verfügbar ist, wird sie ersetzt, wodurch sich das Layout etwas verschiebt.
Wie behebe ich das?
Es gibt zwei Möglichkeiten, die negativen Auswirkungen von Webfonts auf CLS zu reduzieren: Festlegen des CSS-Attributs Schriftartanzeige zu tauschen und das Laden von Schriftarten durch Vorabrufen und Vorladen von Web-Schriftarten beschleunigt. Die tauschen Das Attribut weist den Browser an, die Ersatzschriftart zu verwenden, bis die neue Schriftart bereit ist.
Dynamisch injizierter Inhalt
Mit der zunehmenden Beliebtheit moderner Webentwicklung werden Inhalte auf immer mehr Seiten dynamisch geladen. Seiten enthalten Platzhalter, die erst dann ausgefüllt werden, wenn ein JavaScript-Serveraufruf den richtigen Inhalt zurückgibt. Dies kann eine Weile dauern und zu Layoutverschiebungen führen.
Wie behebe ich das?
Sie sollten immer Platz für die späteren Inhalte reservieren. Außerdem sollten Sie sicherstellen, dass die Inhalte so schnell wie möglich geladen werden. Dies ist eine technische Aufgabe, bei der Ihnen ein Entwickler helfen kann.
Fazit
Layoutverschiebungen sind für Besucher ärgerlich und führen zu einer schlechten Nutzererfahrung. Seit 2021 können sich Layoutverschiebungen auch negativ auf Ihr Ranking bei Google auswirken. Die gute Nachricht ist, dass CLS verschiedene Ursachen hat und für jede davon eine relativ einfache Lösung gibt. Eine automatisierte SEO-Plattform Klickrank kann Ihnen bei Ihrer On-Page-SEO, Ihren technischen Problemen und Ihren Inhalten helfen, damit Sie eine starke Website mit gutem Ranking erstellen können.
