Haben Sie schon einmal eine Website besucht und wollten gerade auf einen Hyperlink klicken, als sich das Layout plötzlich änderte? Wenn ja, sah Ihr Seitenerlebnis wahrscheinlich ungefähr so aus:
Obwohl Sie ursprünglich vorhatten, den Artikel anhand seiner Quellen zu überprüfen, werden Sie nun an einen anderen, unbekannten Ort voller Kreditkartenangebote weitergeleitet, weil Sie stattdessen auf eine Anzeige geklickt haben.
Sofern Sie Ihren Cookie-Cache nicht leeren, werden Ihnen bis zum Ende der Zeit Anzeigen von MasterCard angezeigt.
Ohne diese Layoutänderung hätte das ganze Problem vermieden werden können, und Google stimmt dem zu.
Für Google hat die Benutzererfahrung (UX) höchste Priorität. Aus diesem Grund wurde im Juni 2021 neben zwei weiteren Core Web Vitals auch der Cumulative Layout Shift (CLS) eingeführt.
Wie viele andere Aspekte der Benutzererfahrung wird Cumulative Layout Shift jedoch von vielen nicht verstanden. Aus diesem Grund sind Websites oft mit aufdringlichen Anzeigen und Bannern vollgestopft, die die Seitenerfahrung komplett ruinieren, aber die Core Web Vitals sind da, um das zu ändern.
Was ist Cumulative Layout Shift (CLS)?
Die kumulative Layoutverschiebung ist ein Maß dafür, wie stark sich das Layout einer Seite während des Ladens verschiebt. Seitenlayouts verschieben sich, weil verschiedene Elemente einer Seite mit unterschiedlicher Geschwindigkeit geladen werden können und sich dadurch die Seitenansicht des Benutzers ändert.
Beispielsweise kann eine langsam ladende Anzeige oder ein langsam ladendes Video einen bereits geladenen Block mit lesbarem Inhalt nach dem Laden weiter nach unten auf der Seite schieben. Dies stellt einen großen CLS dar.
Aus zwei Gründen ist die Messung des CLS wichtig:
- Es beeinflusst das Benutzererlebnis
- Es beeinflusst, wie Webcrawler den Inhalt der Seite lesen und interpretieren.
Seitdem Google der Benutzererfahrung eine Ranking-Metrik zugewiesen hat, fragen sich die Herausgeber: „Was ist der kumulative Layout-Shift?“ und „Wie kann ich ihn nutzen, um das Ranking meiner Website zu beeinflussen?“
Der kumulative Layout-Shift ist eine Core Web Vital-Kennzahl, die alle Layout-Shifts auf einer Seite, mit Ausnahme derjenigen, die nicht durch Benutzerinteraktion verursacht wurden, mit einer geschwindigkeitsabhängigen Berechnung summiert.
CLS berücksichtigt die Proportionen des betroffenen Ansichtsfensters und der Bewegungsdistanz.
Der CLS-Schwellenwert bestimmt auch den Layout-Shift-Score und Ihren Ranking-Faktor. Der kumulative Layout-Shift ist eine relevante Metrik für die Benutzererfahrung und wirkt sich daher auf Ihre SEO-Leistung aus.
Von den sechs Metriken, die Google PageSpeed verfolgt, macht CLS 15 % seiner Punktzahl aus und ist damit die drittwichtigste geschwindigkeitsbasierte Metrik.
CLS fasst alle unerwarteten Inhaltsverschiebungen zusammen, die auf der Seite passieren. Um die Bewertung von Google zu bestehen, benötigen Benutzer eine hohe CLS-Bewertung.
- Gut – unter 0,1,
- Verbesserungsbedürftig – zwischen 0,1 und 0,25,
- Schlecht – über 0,25.
Der Zahlenwert für CLS stellt die Schwere jeder Bewegung dar. Wenn Layoutverschiebungen auftreten, berechnet Google, wie weit sich der Inhalt innerhalb des Ansichtsfensters während der Lebensdauer der Seite bewegt hat.
Was ist der ideale Schwellenwert?
Ein guter CLS-Score ist alles unter 0,1. Obwohl Google empfiehlt, den Score unter 0,1 zu halten, liegt der ideale Schwellenwert für vollständig statische Seiten bei 0. Es ist einfacher, diesen Score zu erreichen, wenn Ihre Seiten wenig bis gar keinen dynamisch eingefügten Inhalt haben.
Mithilfe von Code können Sie Ihrer Seite mehrere Anzeigen, Banner und Formulare hinzufügen und trotzdem große Layoutänderungen vermeiden.
Immer wenn ein im Ansichtsfenster sichtbares Element seine Startposition ändert, wird die Verschiebung als instabiles Element aufgezeichnet.
Beachten Sie, dass Layoutverschiebungen nur dann erfasst werden, wenn ein Faktor dazu führt, dass sichtbare Elemente ihre Position auf der Seite ändern. Wenn neue Document Object Model-Elemente (DOM-Elemente) hinzugefügt werden oder vorhandene Elemente ihre Größe ändern, wird der CLS-Score davon nicht beeinflusst.
Layout-Shift-Scores werden durch zwei Layout-Shift-Messungen bestimmt: Impact-Fraktion und Distanz-Fraktion. Sie müssen den Impact-Bereich vor dem Impact-Fraktion berechnen.
Wie wirken sich Layoutverschiebungen auf die Benutzerinteraktion aus?
Unerwartete Layoutänderungen sind nicht nur frustrierend, sondern beeinträchtigen die Benutzerinteraktion erheblich.
Wenn sich Elemente auf der Seite verschieben, verwirren sie die Benutzer und erschweren ihnen die Navigation auf Websites. Einige Websites sind so vollgestopft mit Werbung, dass sie Ihren Cursor möglicherweise in Richtung der Schaltflächen „In den Einkaufswagen“ oder „Kaufen“ verschieben, was zu einem versehentlichen Kauf führen kann.
Solche Erfahrungen sind optisch irritierend und hinterlassen einen schlechten ersten Eindruck. Um sicherzustellen, dass Ihre Benutzer nicht über den Inhalt Ihrer Seite hinwegschwimmen, sollten Sie den CLS-Score Ihrer Sites verfolgen.
Wie wird CLS berechnet?
Wir wissen jetzt, dass ein CLS durch instabile Elemente verursacht wird, die mit unterschiedlichen Raten geladen werden und Inhalte im Ansichtsfenster verschieben. Daraus folgt, dass CLS direkt proportional zu zwei Variablen sein sollte – dem Ansichtsfensterbereich, den das instabile Element einnimmt, und der Distanz, über die sich dieses instabile Element bewegt, um eine Verschiebung zu verursachen.
Diese beiden Variablen werden als Aufprallanteil bzw. Entfernungsanteil bezeichnet. Sehen wir uns nun an, wie sie gemessen und zur Berechnung des CLS verwendet werden.
Berechnung des Auswirkungsanteils
Berechnen Sie den Auswirkungsbereich oder den von Layoutverschiebungen betroffenen Bereich, indem Sie einen Zahlenwert für den Auswirkungsbereich ermitteln. Um dann den Auswirkungsanteil zu bestimmen, teilen Sie den Auswirkungsbereich durch den Ansichtsbereich. Der Ansichtsbereich ist der Abschnitt der Seite, der sichtbar bleibt, ohne nach unten zu scrollen.
Formel zur Berechnung des Impact Fraction
Aufprallanteil = [Fläche des Aufprallbereichs [300 x 400]] / [Fläche des Ansichtsfensters [500 x 600]]
Der Aufprallanteil berücksichtigt nur die Bewegung selbst und berücksichtigt nicht, wie störend die Bewegung ist. Der Distanzanteil löst zusammen mit der Bewegungsdistanz dieses Problem.
In diesem Fall beträgt unser Einflussanteil 0,4.
Berechnung des Entfernungsanteils
Ermitteln Sie zunächst die Bewegungsdistanz, indem Sie definieren, wie weit die Elemente bewegt wurden. Teilen Sie dann die maximale Bewegungsdistanz durch die Gesamthöhe des Ansichtsfensters, um den Distanzanteil zu ermitteln.
Formel zur Berechnung des Distanzanteils
Distanzanteil = [Max. Bewegungsdistanz / Höhe des Ansichtsfensters]
Wenn wir in diesem Fall annehmen, dass der Zähler 100 und der Nenner 600 ist, kommen wir auf einen Distanzbruchteilwert von 0,166.
Verwenden Sie nun die Lösungen aus beiden Formeln, um die Berechnung der Layoutverschiebung abzuschließen.
Formel zur Berechnung des Google CLS-Scores
Wie erläutert ist CLS das Produkt aus Aufprallanteil und Entfernungsfaktor.
Mit den oben ermittelten Werten für Aufprallanteil und Distanzfaktor erhalten wir die folgende Berechnung
CLS = 0,166 x 0,4
Das ergibt einen CLS-Wert von 0,066.
Um den Layout-Shift-Score für eine Animation zu ermitteln, multiplizieren Sie den Einflussanteil mit dem Distanzanteil. Wenn Sie jedoch den gesamten kumulativen Layout-Shift berechnen möchten, nehmen Sie alle Layout-Shift-Scores für die Gesamtzahl der Animationsframes und addieren Sie sie.
Obwohl das Hinzufügen all dieser Layout-Shift-Scores effektiv war, wurden Single Page Applications mit langer Lebensdauer dabei nicht berücksichtigt, was die Formel für manche Benutzer zu unfair machte.
Um dem Rechnung zu tragen, hat Google damit begonnen, Schichten in Sitzungsfenstern zu gruppieren. Dabei handelt es sich um Zeitrahmen im Lebenszyklus einer bestehenden Seite.
Layoutverschiebungen werden dann innerhalb des Sitzungsfensters zusammengefasst, was bedeutet, dass der CLS-Score nur während der Dauer der Sitzung beeinflusst wird.
Darüber hinaus berücksichtigt der endgültige CLS-Score den Höchstwert eines Sitzungsfensters. Wenn ein Benutzer das Fenster also während einer Verschiebung schließt, wird dies nicht berücksichtigt. Alle Verschiebungen innerhalb des Eingabeausschlussfensters, einschließlich der Zeit zum Laden der Seite, werden ebenfalls nicht gezählt.
Andere Berechnungen: So messen Sie CLS
Bei CLS werden noch einige weitere Elemente berücksichtigt, darunter:
- Gezielte Änderungen am Layout: Das Eingabeausschlussfenster ignoriert Verschiebungen, die innerhalb einer halben Sekunde nach der Benutzereingabe erfolgen.
- Layout- und Animationsverschiebungen: Google ignoriert Änderungen an CSS-Transformationen und Animationen.
- Generieren von Layoutverschiebungen: Wenn beim Laden der Seite Layoutverschiebungen auftreten, kann sich dies negativ auf Ihren CLS-Score auswirken, wenn es außerhalb des Ausschlussfensters geschieht.
- Layoutverschiebungen „Above the Fold“: Google zählt nur Änderungen innerhalb des sichtbaren Ansichtsfensters.
Um Layoutverschiebungen und Layoutänderungen genau zu verfolgen, verwenden Sie ein CLS-Messwerkzeug.
Werkzeuge zur Messung des CLS
Tools zur Messung des CLS-Scores können aktiv dabei helfen, Layoutverschiebungen zu verhindern. Softwaretools messen Ihren vorhandenen Inhalt und verwenden die jeweilige Leistungsregisterkarte für die Metrik „Kumulative Layoutverschiebung“, um Unternehmen einen endgültigen CLS-Score anzubieten, den sie verbessern können.
Die meisten der folgenden Softwarelösungen interpretieren Labordaten, aber PageSpeed Insights von Google misst auch Felddaten. Die Search Console bietet einen einfachen Core Web Vitals Report.
Bei Labordaten handelt es sich um das Sammeln von Leistungsdaten in einer kontrollierten Umgebung. Da die Daten jedoch auf vordefinierten Bedingungen basieren, spiegeln die meisten Labordatenwerte die tatsächliche Benutzererfahrung nicht zu 100 % wider.
Felddaten hingegen basieren auf verfeinerten Daten, die durch die Kombination von Daten auf individueller Ebene gewonnen werden. Sie werden häufig verwendet, um statistische Analysen von Personengruppen durchzuführen und Geschäftsdaten zusammenzufassen. Obwohl Felddaten genauer sind, sind sie nicht immer verfügbar.
Die Begriffe „echte Benutzerdaten“ und „Felddaten“ sind ein und dasselbe, aber JavaScript API ist ein eigenes System. Wenn Sie über etwas Programmiererfahrung verfügen, können Sie JavaScript API verwenden, um den CLS minutengenau zu messen. Starten Sie die Layout Instability API , wenn Sie nach unerwarteten Layoutverschiebungen suchen möchten.
PageSpeed Insights und Search Console können Ihnen dabei helfen, CLS zu optimieren und große Layoutverschiebungen zu vermeiden. Die PageSpeed Cumulative Layout Shift Test-Prüfungen für responsives Webdesign liefern Webentwicklern weitere Details und unterstützen Sie beim Einfügen dynamischer Inhalte.
Ein idealer PageSpeed-Score wird erreicht, wenn alle Geschwindigkeitsmetriken im Durchschnitt 90 oder mehr betragen. Wenn Sie feststellen, dass eine oder mehrere Ihrer Metriken orange sind, konzentrieren Sie sich auf die Verbesserung dieser Bereiche.
- Gut: 90 oder höher (grün)
- Verbesserungsbedürftig: 50 bis 90 (orange)
- Schlecht: unter 50 (rot).
Auf der Registerkarte „Leistung“ können Benutzer genau sehen, wie PageSpeed Insights die visuelle Stabilität misst. PageSpeed verwendet Chrome User Experience Report, seine statistische Analysesoftware, um Metriken zusammenzustellen, die für die Messung der visuellen Stabilität nützlich sind, da es responsive Bilder, Bildseitenverhältnis, Webschriftarten, Schriftdarstellung, anfängliches Laden der Seite und vieles mehr prüft.
Alle Web Vitals in der Übersichtsregisterkarte werden unterschiedlich gewichtet: FID, Speed Index und Time to Interactive werden mit 10 % bewertet, CLS mit 15 %, LCP mit 25 % und Total Blocking Time mit 30 %. Google zählt keine Verschiebungen, die durch Benutzerinteraktionen zustande kommen.
Bedenken Sie, dass sich die Metriken gegenseitig beeinflussen. Wenn beispielsweise LCP und Total Blocking Time langsam sind, wird Ihre Ladezeit wahrscheinlich im Schneckentempo voranschreiten.
Wie kann der kumulative Layout-Shift (CLS) reduziert werden?
Um Probleme mit kumulativen Layoutverschiebungen zu beheben, ist es wichtig, zunächst einmal zu verstehen, was den CLS beeinflusst. Mehrere Faktoren tragen zu schlechten CLS-Werten bei, darunter:
- Hinzufügen von Videos und Bildern ohne Abmessungen
- Installieren von Anzeigen, Iframes und Embeds ohne Abmessungen
- Aktionen, die auf das Laden einer Seite oder eine Netzwerkantwort warten, um DOM-Elemente zu aktualisieren (dynamisch eingefügter Inhalt)
- Webfonts, die ein Aufblitzen von unsichtbarem Text (FOIT) oder Aufblitzen von unformatiertem Text (FOUT), langsame Systemfonts, Font-Ladevorgänge oder eine fehlerhafte Font-Anzeige verursachen
CLS spielt auf Mobilgeräten eine bedeutende Rolle. 77 % aller Amerikaner besitzen ein Smartphone und fast 40 % aller E-Commerce-Käufe wurden über ein Mobilgerät getätigt. Allerdings sind Tablets und Smartphones die Geräte, die am schwierigsten zu optimieren sind.
Aufgrund einer schwächeren CPU, eines komplizierteren Netzwerks und eines kleineren Ansichtsfensters kann es für mobile Programmierer schwierig sein, zu bestimmen, wie viel Platz auf der Seite benötigt wird, damit alle Elemente sichtbar bleiben.
Sie müssen sicherstellen, dass Ihre Video- und Bildattribute je nach Ansichtsfenstergröße verkleinert werden.
1. Bildbreite- und -höhenattribute
Wenn Sie für Ihre Site keine Breiten- und Höhenattribute angeben, weiß der Browser beim Laden der Seite nicht, wie viel Platz zum ordnungsgemäßen Zuordnen von Elementen erforderlich ist.
Höchstwahrscheinlich wird der reservierte Platz nicht ausreichen und die Anzeige muss verschoben werden, damit sie passt.
Berücksichtigen Sie Bildabmessungen und Videoelemente, um die richtige Menge an Platz zu schaffen.
2. FOUT/FOIT Web-Schriftart
Manchmal kann es mehr als zwei gerenderte Frames dauern, bis benutzerdefinierter Text geladen ist, was zu unsichtbarem Text oder zur Verwendung einer Ersatzschriftart führt. Wenn es länger dauert, bis benutzerdefinierter Text angezeigt wird, als die anfängliche Seitenladezeit erlaubt ist, führt dies zu Layoutverschiebungen und wirkt sich auf Ihren CLS-Score und die Webschriftart selbst aus.
Um dieses Problem zu lösen, verwenden Sie eine vorinstallierte Schriftart oder Systemschriftart, die direkt in Ihren Code eingebettet ist.
3. Nicht angegebene Anzeigen-, Iframes- und Embeds-Abmessungen
Eine weitere Möglichkeit, große Layoutverschiebungen zu vermeiden, besteht darin, die Abmessungen von Anzeigen, Iframes und eingebetteten Elementen anzugeben. Eine Layoutverschiebung tritt auf, wenn das falsche Anzeigenseitenverhältnis in den Code der Website eingebettet wird.
Während Sie bei der Verwendung von Medienabfragen möglicherweise geringfügige Unterschiede in den Anzeigen-/Platzhaltergrößen und Formfaktoren berücksichtigen müssen, können Sie Platz reservieren, um dieses Problem zu vermeiden.
4. Wie Animationen und dynamische Inhalte
Aktionen, die vor ihrer Ausführung auf eine Netzwerkantwort des Webservers warten, verursachen ebenfalls Verschiebungen.
Wenn Benutzereingaben zu einer Vergrößerung der Layoutverschiebungsbereiche geführt haben, wird dies nicht zu einem CLS-Score gezählt, insbesondere wenn die Verschiebung in das gleiche Seitenverhältnis fällt, das vor der Layoutverschiebung verwendet wurde. Wenn jedoch codierte Layoutverschiebungseinträge berücksichtigt werden, müssen Sie dafür Platz reservieren.
Um zu erfahren, wie Sie Layoutverschiebungsprobleme in WordPress lösen, fahren Sie mit dem nächsten Abschnitt fort.
Wie behebt man kumulative Layoutverschiebungsprobleme in WordPress?
Programmierer haben mehrere Methoden, mit denen sie Probleme mit der kumulativen Layoutverschiebung in WordPress beheben können. Wenn Sie über gute Programmierkenntnisse verfügen und eine kumulative Layoutverschiebung auf Ihrer Website reduzieren möchten, können Sie mit diesem 10-Schritte-Prozess WordPress-spezifische CLS-Probleme beheben.
Schritt 1: Erfahren Sie, welche Elemente sich verändern
Tools wie Cumulative Layout Shift Debugger und PageSpeed Insights können Ihnen genau zeigen, wo Verschiebungen auftreten. Alternativ können Sie Chrome Dev Tools verwenden und das Kontrollkästchen „Layout Shift Regions“ aktivieren, wodurch die verschobenen Elemente blau hervorgehoben werden.
Schritt 2: Asynchrones CSS deaktivieren oder kritisches CSS verwenden
Die meisten Cache-Plugins verfügen über eine Einstellung zum asynchronen Laden von CSS. Dies kann jedoch zu FOUC führen und Ihre Webschrift verschieben. Sie können die CSS-Bereitstellung in den Einstellungen Ihres Plugins deaktivieren.
Entwickler könnten kritisches CSS auch nur laden, indem sie mod_pagespeed deaktivieren oder seitenspezifische kritische CSS-Pfade generieren.
Schritt 3: Vorinstallierte lokale Schriftarten hosten
Vorinstallierte Schriftarten ermöglichen keine Optimierung. Häufig dauert das Laden dieser Web-Schriftarten ewig und sie müssen auf eine Ersatzschriftart zurückgreifen, bevor sie geladen werden. Hosten Sie Schriftarten immer lokal von Ihrer Website aus, indem Sie Tools wie Transfonter oder das OMGF-Plugin verwenden, um die Schriftart-URLs direkt einzufügen.
Schritt 4: Font-Display hinzufügen: Zu Fonts wechseln
Bestimmte Webfonts werden je nach Größe möglicherweise immer noch langsam geladen. Durch Hinzufügen von font-display:swap zum CSS Ihrer Schriftart stellen Sie jedoch sicher, dass sich Ihr Layout aufgrund von FOIT nicht verschiebt.
Um eine aktive Schriftartanzeige beizubehalten, installieren Sie String Locator, um nach der problematischen Schriftart zu suchen, und fügen Sie dann &display=swap zu Ihrem Code hinzu.
Schritt 5: Stellen Sie die globale Schriftart im Oxygen Builder auf Mulish ein
Wenn Sie Oxygen Build verwenden, können Sie Ihre CLS-Probleme lösen, indem Sie Ihr Stylesheet öffnen und „Mulish“ in die Mitte des Textkörpers einfügen, wie folgt: body { font-family: 'Mulish', Arial; }
Schritt 6: Bild-, Video- und Iframe-Abmessungen festlegen
Fügen Sie einfach width=”000” height=”000” nach dem Bildsignifier im Code ein oder width=”000” height=”000 > nach einem Video oder Iframe, um sicherzustellen, dass für Ihre Medien genügend Platz vorhanden ist.
Schritt 7: CSS-Transform-Eigenschaft für Animationen verwenden
Animationen können zu dramatischen Layoutverschiebungen führen und die Berücksichtigung von Seitenverhältnissen löst Ihr Problem möglicherweise nicht. Fügen Sie die CSS-Transformationseigenschaft transform:translate() hinzu, anstatt Breite + Höhe zu verwenden.
Schritt 8: Lassen Sie Platz für Werbung und platzieren Sie diese richtig
Reservieren Sie Platz für Anzeigen. Andernfalls verdrängen Anzeigen beim Laden den restlichen Inhalt der Seite.
Google rät Erstellern, Platz für die größte Anzeigegröße zu lassen, die wie folgt konfiguriert ist:
Schritt 9: Installieren Sie ein leichtes DSGVO-Plugin
GDPR-Cookie-Compliance-Software ist praktisch für Websites, die CCPA-konform bleiben möchten, aber sie verursacht oft Probleme mit kumulativer Layoutverschiebung.
Umfangreiche DSGVO-Plugins können beim Laden Elemente übereinander stapeln. Verwenden Sie daher ein leichtes DSGVO/CCPA-Plugin, um dieses Problem zu lösen.
Schritt 10: Header und Menüs hart codieren
Ihre Kopfzeilen und Menüs können zur Layoutverschiebung Ihrer Website beitragen. Wenn Sie diese Aspekte in CSS fest codieren, treten bei Webseiten weniger Probleme auf. Die meisten Seitenersteller verursachen ebenfalls Kopfzeilen- und Menüverschiebungen, aber Elementor und Divi fügen fest codierte Elemente für Benutzer hinzu.
Abschluss
Cumulative Layout Shift (CLS) ist einer der drei Core Web Vitals, die von Google entwickelt wurden, um das Benutzererlebnis für Websitebesitzer in den Mittelpunkt zu stellen. Obwohl CLS und andere wichtige Metriken etwas gewöhnungsbedürftig sein können, kann CLS die Leistung und die Gesamtladezeit einer Website verbessern.
Mithilfe von Drittanbietersoftware wie Lighthouse und Googles PageSpeed Insights können Benutzer feststellen, wo CLS-Layoutverschiebungen auftreten. Gleichzeitig kann die Software den Benutzern Best Practices zur Verbesserung ihres gesamten SEO-Scores bieten, was ihnen zu einem höheren Ranking verhilft.
Benutzer können Layout-Verschiebungskorrekturen fest codieren oder Plugins verwenden, um ihren CLS-Score zu verbessern. Wenn Ihr dynamischer Inhalt statisch bleibt, verringern Sie die Frustration der Benutzer und steigern den Gesamtumsatz.
Jetzt, da Ihre Anzeigen gut an ihren Plätzen platziert sind, wenden Sie sich an Publift, um herauszufinden, wie Sie Ihre Werbeeinnahmen durch die Optimierung Ihrer Anzeigenplatzierung und Werbepartner weiter steigern können.
Kumulative Layoutverschiebung – Häufig gestellte Fragen
Was ist eine erwartete und unerwartete Layoutverschiebung?
Wenn sich das Layout einer Seite als Reaktion auf ein erwartetes Ereignis, wie z. B. eine Benutzereingabe, ändert, nennt man das eine erwartete Layoutverschiebung. Unerwartete Layoutänderungen treten auf, wenn verschiedene Elemente einer Seite zu unterschiedlichen Zeiten geladen werden oder wenn sich die Seite nicht wie erwartet verhält.
Beeinflusst Lazy Loading die kumulative Layoutverschiebung?
Ja, Lazy Loading kann kumulative Layoutverschiebungen verursachen. Lazy Loading oder Deferred Loading bezeichnet das langsamere Laden nicht unbedingt notwendiger Elemente einer Seite, damit die kritischen Elemente zuerst geladen werden können.
Dies ist zwar eine gute Strategie zum Einsparen von Bandbreite, langsamer ladende Elemente können jedoch dennoch dazu führen, dass zuvor geladene Elemente verschoben werden.