Die kumulative Layoutverschiebung misst die Zunahme aller Frame-Änderungen, die auf einer Website beim Laden auftreten.
Sind Sie schon einmal auf eine Seite gestoßen, auf der sich der Inhalt der Seite plötzlich ändert? Ohne Vorwarnung verschiebt sich der Text, es entsteht zusätzlicher Leerraum und Sie haben Ihren Platz verloren.
Wahrscheinlich hatten Sie dieses lästige Erlebnis aufgrund der „kumulativen Layoutverschiebung“.
Die kumulative Layoutverschiebung wurde 2020 von Lighthouse als Leistungsmetrik eingeführt.
Später wurde CLS auch zu einer der Metriken, aus denen sich die Core Web Vitals zusammensetzen.
In diesem Blogbeitrag erfahren wir, was Cumulative Layout Shift (CLS) ist und warum es Teil davon ist Kern-Web-Vitale Metrik, wie sie entsteht, wie man sie misst und wie Webmaster sie optimieren können.
Was ist die kumulative Layoutverschiebung?
Lassen Sie uns diese Leistungsmetrik verstehen, indem wir sie aufschlüsseln:
kumulativ: Es bedeutet ein Mengenzunahme
Layout: es ist der Rahmen der Webseite
Shift: Es ist der Positionswechsel
Daher misst die kumulative Layoutverschiebung die Zunahme aller Frame-Änderungen, die auf einer Website beim Laden auftreten.
Beim Laden einer Seite neigen einige Seitenelemente dazu, sich unerwartet zu verschieben, was sich häufig auf die Art und Weise auswirkt, wie Benutzer mit der Webseite interagieren. Diese Elemente könnten sein:
- Taste
- Anmeldeformulare
- Kontaktformulare
- Bilder
- Schriftarten
- Videos
Eine Website mit einer guten kumulativen Layoutverschiebung verfügt über eine stabile Seitenanzeige, bei der sich Elemente nicht verschieben, sondern sorgt vielmehr für ein stabiles Laden aller Website-Inhalte und -Elemente.
Laut Google,
„CLS ist eine wichtige, benutzerzentrierte Metrik zur Messung der visuellen Stabilität, da sie dabei hilft, zu quantifizieren, wie oft Benutzer unerwartete Layoutänderungen erleben – ein niedriger CLS trägt dazu bei, dass die Seite ansprechend ist.“
Erwartete vs. unerwartete Layoutverschiebung
Layoutverschiebungen auf einer Webseite können sowohl erwartet als auch unerwartet sein. Für Websitebesitzer ist es wichtig, den Unterschied zwischen den beiden zu kennen:
Erwartete Layoutverschiebung: Sie erfolgt als Reaktion auf die Eingabe eines Benutzers. Wenn ein Benutzer beispielsweise auf die Schaltfläche „Abonnieren“ klickt, es jedoch als Reaktion darauf zu einer Layoutverschiebung kommt.
Unerwartete Layoutverschiebung: Dies geschieht aufgrund von Inhalte von Drittanbietern, dynamische Elemente auf der Seite und dimensionslose Bilder. Beispielsweise erscheint plötzlich eine Anzeige und verschiebt Textinhalte auf der Seite nach unten.
Unerwartete Verschiebungen von Inhalten treten hauptsächlich dann auf, wenn Ressourcen asynchron geladen werden. Dies kann auch passieren, wenn DOM-Elemente dynamisch neben vorhandenen Inhalten hinzugefügt werden.
In solchen Fällen sind in der Regel ein Widget eines Drittanbieters, eine Schriftart, ein Bild oder ein Video mit unbekannten Abmessungen die Ursache.
So berechnen Sie den CLS-Score
Der kumulative Layout-Shift-Score kann durch Multiplikation des Impact-Anteils mit dem Entfernungsanteil berechnet werden:
Kumulative Layoutverschiebung (CLS) = Aufprallanteil x Distanzanteil Wenn, ist der Aufprallanteil 0.645 und Distanzanteil ist 0.179 Dann, CLS = 0.645 x 0.179 CLS = 0.1154.
Was verursacht kumulative Probleme bei der Layoutverschiebung?
Laut Google gibt es fünf Hauptgründe für die kumulative Layoutverschiebung:
Bilder und Videos ohne Abmessungen
Es empfiehlt sich, immer die Breite und Höhe Ihrer Bilder und Videos anzugeben.
Sie können auch CSS-Seitenverhältnisfelder verwenden, damit der Browser beim Laden des Bildes den richtigen Platz auf der Webseite zuweisen kann.
Anzeigen, Einbettungen und Iframes ohne Abmessungen
Anzeigengrößen können durch hohe Anzeigengrößen den Umsatz steigern CTR.
Dies kann jedoch die Qualität des Benutzererlebnisses beeinträchtigen, da der Inhalt auf der Seite nach unten verschoben wird.
Diese Layoutverschiebung kann abgemildert werden, indem Platz für Anzeigenflächen reserviert wird, Verschiebungen vermieden werden, indem die größtmögliche Größe für die Anzeigenfläche reserviert wird oder die bestmögliche Größe der Anzeigenfläche auf der Grundlage historischer Daten ausgewählt wird.
Dynamisch injizierter Inhalt
Vermeiden Sie das Einfügen neuer Inhalte über bestehende Inhalt, es sei denn, es handelt sich um eine Reaktion auf eine Benutzerinteraktion.
Dadurch wird sichergestellt, dass auftretende Layoutverschiebungen immer erwartet werden und nicht dazu führen, dass sich das Bild oder der Text unerwartet verschiebt.
Webfonts verursachen FOIT/FOUT
Versuchen Sie, die Werte von „font:display“ mit Ihren benutzerdefinierten Schriftarten wie „Auto“, „Swap“, „Block“, „Fallback“ und „Optional“ zu verwenden, um unnötige Layoutverschiebungen zu vermeiden.
Um sicherzustellen, dass es zu keiner Layoutverschiebung kommt, verwenden Sie „font:display“ zusammen mit dem Link „rel=preload“.
Jedes Element, das diese Schriftart verwendet, wird ausgeblendet, bis das Schriftart-Asset vollständig heruntergeladen wurde. Dies wird als FOIT (Flash of Invisible Text) bezeichnet.
Aktionen, die auf eine Netzwerkantwort warten, bevor DOM aktualisiert wird
Entscheiden Sie sich immer für „Transformations“-Animationen für Animationen von Eigenschaften, die Layoutänderungen auslösen.
Kumulativer Layout-Shift-Test
Die Website-Metriken für die kumulative Layout-Verschiebungsleistung können auf eine der folgenden Arten gemessen werden:
- Die kumulative Layoutverschiebung kann wie folgt gemessen werden Feldwerkzeuge:
- Chrome-Erfahrungsbericht
- PageSpeed Insights
- Suche Console (Core Web Vitals-Bericht)
2. CLS kann auch hierüber gemessen werden Laborwerkzeuge:
Wie kann man die kumulative Layout-Verschiebung verbessern?
Hinweis dass die unten aufgeführten einzelnen Audits wahrscheinlich am meisten zu Ihrem CLS beitragen; Der CLS-Score Ihrer Seite kann jedoch auch durch andere Optimierungen beeinflusst werden, die hier nicht erwähnt werden.
Verbessern Sie Ihren CLS-Score, indem Sie bewährte Methoden in Ihren Entwicklungsworkflow integrieren, wie zum Beispiel:
- Bildabmessungen angeben
Geben Sie immer beides an, Breite und Höhe für die Bild- und Videoelemente Ihrer Website damit bei Bildern/Videos der richtige Abstand verwendet wird.
Alternativ können Sie dazu CSS-Seitenverhältnisfelder verwenden. Um mehr darüber zu erfahren, lesen Sie diesen Artikel. - Reduzierung von Layoutverschiebungen, die durch Anzeigen, Einbettungen und Iframes verursacht werden
Um durch Anzeigen, Einbettungen und Iframes verursachte Layoutverschiebungen zu reduzieren, gehen Sie wie folgt vor:
Reservieren Sie die Größe der Anzeigenfläche (vorzugsweise die größte), bevor Sie die Anzeigenbibliothek laden.
Verschieben Sie Anzeigen nach unten oder aus dem Ansichtsfenster heraus.
Verwenden Sie Platzhalter, wenn keine Anzeige verfügbar ist.
Um mehr zu erfahren, lesen Sie diesen Artikel. - Vermeiden Sie das Einfügen neuer Inhalte über vorhandenen Inhalten
Vermeiden Sie das Einfügen dynamischer Inhalte (z. B. Banner, Formulare usw.) über vorhandenen Inhalten, es sei denn, dies erfolgt als Reaktion auf Benutzerinteraktionen. Dies trägt dazu bei, unerwartete Layoutverschiebungen zu verhindern.
Um mehr zu erfahren, lesen Sie diesen Artikel. - Verhindern des Aufblitzens von unsichtbarem Text (FOIT)
Das Problem „Flash of Invisible Text“ (FOIT) kann sich auch auf den CLS Ihrer Seite auswirken. Stellen Sie sicher, dass Ihr Text beim Laden von Webfonts sichtbar bleibt, indem Sie Webfonts vorab laden und/oder das Attribut „font-display“ verwenden.
Erfahren Sie hier mehr darüber. - Vermeiden Sie nicht zusammengesetzte Animationen
Wo möglich, Führen Sie nur zusammengesetzte Animationen durch zu Reduzieren Sie die Haupt-Thread-Arbeit und verhindern das Neuzeichnen von Pixeln während des Seitenladens.
Fazit
Wenn Sie Cumulative Layout Shift (CLS) verstehen, können Sie in den kommenden Tagen ein besseres Benutzererlebnis bieten.
Da die Metrik Teil der Core Web Vitals zur Verbesserung von UX ist und im Jahr 2021 zu einem Ranking-Signal werden soll, ist es wichtig, ihre Bedeutung und Auswirkung auf Ihre Website zu verstehen.
Häufig gestellte Fragen
Cumulative Layout Shift (CLS) misst, wie stark sich eine Webseite im Laufe der Zeit unerwartet ändert. Wenn ein Website-Besucher eine Seite lädt und beim Lesen ein Banner geladen wird, wodurch die Seite nach unten springt, würde dies zu einem hohen CLS-Score führen.
CLS ist eine wichtige Kennzahl zur Messung der visuellen Stabilität, da es misst, wie oft Benutzer unerwartete Layoutverschiebungen erleben. Ein niedriger CLS stellt sicher, dass Benutzer die Seite genießen.
Layoutverschiebungen treten auf, wenn ein Element auf Ihrer Seite seine Größe oder Position ändert und sich dadurch auf die Position des Inhalts um es herum auswirkt. Es ist möglich, dass die Verschiebung beabsichtigt ist, beispielsweise wenn ein Container aufgrund einer Benutzeraktion erweitert wird.
Shubham ist ein digitaler Vermarkter mit umfangreicher Erfahrung in der Werbetechnologiebranche. Er verfügt über umfassende Erfahrung in der Programmbranche und leitet Geschäftsstrategien und Skalierungsfunktionen, einschließlich, aber nicht beschränkt auf, Wachstum und Marketing, Betrieb, Prozessoptimierung und Vertrieb.
