Wünschen Sie sich mehr Besucher, mehr Leads und mehr Umsatz? Optimieren Sie die Leistung Ihrer Website regelmäßig, um die Suchmaschinenoptimierung (SEO) oder eine Neugestaltung der Website zu erleichtern. Eine verbesserte Website steigert Ihre Marketing-Performance, sorgt für mehr Besucher, höhere Umsätze und letztlich für eine bessere Rendite Ihrer Bemühungen. Eine Sache, die Sie sich ansehen sollten, ist die Cumulative Layout-Shift.
Was ist eine kumulative Layout-Verschiebung?
CLS ist eine wichtige Kennzahl für Webdesigner und ein wesentlicher Faktor für das Verständnis der Leistung Ihrer Website. CLS spiegelt die Wahrnehmung der Stabilität einer Website durch den Benutzer wider: Ein hoher CLS-Wert kann zu einer schlechten Benutzererfahrung führen, da es für die Benutzer schwierig ist, mit der Seite wie erwartet zu interagieren. Ziel ist es, die Layoutverschiebung zu minimieren, damit die Benutzererfahrung stabiler und vorhersehbarer wird.
Welche Auswirkungen hat die kumulative Layout-Verschiebung?
Die kumulative Layoutverschiebung kann die Benutzerfreundlichkeit einer Website oder Webanwendung erheblich beeinträchtigen. Ein hoher CLS-Wert kann zu Verwirrung und Frustration bei den Nutzern führen, da die unerwartete Bewegung visueller Elemente die beabsichtigte Interaktion mit der Seite erschweren kann. Dies kann dazu führen, dass Nutzer die Seite vorzeitig verlassen oder die gewünschte Aktion nicht ausführen. Im Hinblick auf die Suchmaschinenoptimierung wirkt sich ein hoher CLS-Wert negativ auf das Seitenerlebnis, das Suchmaschinen-Ranking und die allgemeine Sichtbarkeit der Website aus.
Wie gut ist die Leistung Ihrer Website? Bewerten Sie Ihre Website und erfahren Sie es in einer Minute:
Das SEO-Audit für Ihre Website hat also Probleme aufgedeckt; was können Sie tun? Es gibt mehrere Maßnahmen, die Sie ergreifen können, um die kumulative Layout-Verschiebung (CLS) auf Ihrer Website sowie die Platzierung in Suchmaschinen und die organischen Klickraten zu verbessern:
-
Reservieren Sie Platz für Anzeigen und andere dynamische Inhalte: Indem Sie Platz für Anzeigen und andere dynamische Inhalte reservieren, können Sie Layoutverschiebungen verhindern, die durch das Laden dieser Elemente nach dem ersten Laden der Seite verursacht werden.
-
Verwenden Sie Breiten- und Höhenattribute für Bilder: Die Angabe von Breiten- und Höhenattributen verhindert Layoutverschiebungen, die durch Größenänderungen von Bildern beim Laden verursacht werden.
-
Verschieben Sie nicht kritische Ressourcen: Das Verschieben von nicht kritischen Ressourcen, wie z. B. Skripte von Drittanbietern und Anzeigen, kann dazu beitragen, Layoutverschiebungen zu reduzieren, die durch das Laden dieser Elemente nach dem ersten Laden der Seite verursacht werden.
-
Verwenden Sie Animationen, um Änderungen im Layout anzuzeigen: Auf diese Weise werden Layoutveränderungen weniger störend, da die Nutzer ein Gefühl dafür bekommen, wohin sich die Elemente bewegen.
-
Überwachen und messen Sie Ihren CLS-Wert: Verwenden Sie Browser-Entwicklungstools oder webbasierte CLS-Testtools, um Ihre CLS-Bewertung zu überwachen und zu messen und Bereiche zu ermitteln, in denen Verbesserungen möglich sind.
-
Optimieren Sie Bilder und Ressourcen: Die Optimierung von Bildern und Ressourcen kann dazu beitragen, die Größe der geladenen Assets zu reduzieren und die durch sie verursachten Layout-Verschiebungen zu minimieren.
-
Verwenden Sie die Funktion setTimeout(): Vor dem Hinzufügen oder Aktualisieren von DOM-Elementen kann die Funktion setTimeout() dazu beitragen, Layout-Verschiebungen zu verhindern, die durch die Neuberechnung des Layouts durch den Browser verursacht werden.
-
Verwenden Sie die CSS-Eigenschaft font-display: Die CSS-Eigenschaft kann Layout-Verschiebungen verhindern, die durch das langsame Laden von Web-Schriften verursacht werden.
Denken Sie daran, dass es wichtig ist, Ihre Website/Webanwendung in verschiedenen Browsern und auf verschiedenen Geräten zu testen, da verschiedene Faktoren Layoutverschiebungen beeinflussen können.
Zu verwendende Tools
Es gibt mehrere SEO-Tools für Webdesigner, die Ihnen helfen können, die kumulative Layoutverschiebung (CLS) auf Ihrer Website oder Webanwendung zu verbessern:
-
Browser-Entwickler-Tools: Die meisten modernen Browser enthalten Entwickler-Tools, mit denen Sie Layout-Verschiebungen auf Ihrer Website messen und identifizieren können. In Google Chrome können Sie beispielsweise das Lighthouse-Tool im Audits-Panel der Entwicklertools verwenden, um Ihren CLS-Wert zu messen und mögliche Probleme zu identifizieren.
-
WebPageTest: Ein Open-Source-Tool zum Testen der Website-Leistung, mit dem Sie den CLS-Wert Ihrer Website messen und die spezifischen Elemente identifizieren können, die Layout-Verschiebungen verursachen.
-
Calibre: Ein webbasiertes Tool, mit dem Sie Ihre Website testen und ihren CLS-Score messen können. Außerdem erhalten Sie eine detaillierte Aufschlüsselung der Elemente, die Layoutverschiebungen verursachen, und erfahren, wie Sie diese beheben können.
-
SpeedCurve: Ein Tool zur Überwachung der Website-Performance, mit dem Sie den CLS-Wert Ihrer Website im Laufe der Zeit messen und Muster oder Trends erkennen können, die auf verbesserungsbedürftige Bereiche hinweisen könnten.
-
Chrome User Experience Report (CrUX): Bei diesem Bericht handelt es sich um einen öffentlichen Datensatz mit Metriken zur Benutzerfreundlichkeit beliebter Websites, wie sie von Chrome-Benutzern unter realen Bedingungen erlebt werden. Die Daten werden von der Chrome User Experience Report (CrUX) API gesammelt, die echte Nutzerdaten zu Leistungsmetriken wie First Contentful Paint und Speed Index liefert.
-
Google Search Console: Google Search Console hat einen neuen Core Web Vitals-Bericht hinzugefügt, der CLS enthält. Damit können Sie den Layout Shift Score Ihrer Website überwachen und Seiten identifizieren, die Probleme verursachen.
Es ist erwähnenswert, dass die Kombination dieser Tools und Techniken Ihnen ein umfassenderes Verständnis der Layoutverschiebungen auf Ihrer Website geben kann und Ihnen hilft, effektivere Verbesserungen vorzunehmen.
CLS ist eine wichtige Kennzahl, die Sie bei der Bewertung der Leistung Ihrer Website berücksichtigen sollten. Wenn Sie die Auswirkungen von CLS auf das Nutzererlebnis und die Konversionsraten verstehen, können Sie die Leistung Ihrer Website verbessern und letztlich mehr Umsatz für Ihr Unternehmen erzielen.
Dieser Beitrag ist auch verfügbar in:
- Englisch: What Is Cumulative Layout Shift and How Does It Impact Marketing?
- Spanisch: ¿Qué es el cambio de layout acumulativo y cómo afecta al marketing?
Hinterlasse einen Kommentar