CLS Wert meckert über Punkt "Warenkorb / Header"

[ThigerDesign]

Moin zusammen,

Google bewertet CLS für unseren Header schlecht (siehe angehängtes Bild), leider wissen wir nicht wie wir das in den Griff bekommen.

Hat jemand eine Ahnung? Wir sind über jeden Tipp sehr dankbar! 🙂

Liebe Grüße

Nico

[Gabe]

Hey @ThigerDesign 

Die von dir bereitgestellte Meldung zeigt, dass es im Bereich des Headers, insbesondere im Zusammenhang mit dem Warenkorb, zu erheblichen Layoutverschiebungen kommt. Das habe ich jetzt somit gegoogelt und einige hilfreiche Community Leitfaden gefunden zum Thema hier.

Cumulative Layout Shift (CLS) ist also ein wichtiger Leistungsindikator für Webseiten, der die visuelle Stabilität misst. Wenn Elemente auf einer Seite plötzlich verschoben werden, während ein Benutzer die Seite betrachtet, kann dies zu einem hohen CLS führen, was sich negativ auf die Benutzererfahrung auswirkt.

Somit gibt es hier viele Moving Parts und mehrere mögliche Ursachen und der 🪱 sitzt meistens in eurem Theme da dies das Frontend zusammensetzt. Habt ihr neulich Änderungen zum Theme gemacht oder verwendet ihr Frontend oder Page Builder Apps?

So etwas ist bedauerlich aber das Problem liegt somit meistens am Theme wie z. B. eine häufige Ursache sind lange Ladezeiten der Produktseite bzw. dass der Inhalt und manche Page Elemente der Produktseite nicht sofort geladen werden. Es hängt also meistens vom Theme drauf ab, dass du verwendest, und von deiner speziellen Situation. Wenn du dich mit dem Programmieren nicht gut genug auskennst, um es zu tun, könntest du einen unserer Shopify Experten beauftragen, die sich auf Page Loading Speeds und die Entwicklung von Themes spezialisieren, wie z. B. den Jonat Brander von storeinspector.io oder Orion Holmes.

Weitere Dinge die man selber DIY testen kann um das Problem zu lösen:

• Feste Dimensionen festlegen: Stelle sicher, dass Bildern und iFrames feste Breiten- und Höhenangaben zugewiesen sind. Das verhindert, dass sie das Layout während des Ladevorgangs verändern.
• Webfonts optimieren: Wenn du Webfonts verwendest, stelle sicher, dass sie schnell geladen werden. Du kannst font-display: swap; verwenden, um sicherzustellen, dass Text immer angezeigt wird, auch wenn der Webfont noch nicht geladen ist.
• Scripte und Styles: Lade kritische CSS- und JavaScript-Dateien im Header und den Rest am Ende des Body. Verwende async oder defer für Skripte, die nicht sofort benötigt werden.
• Lazy Loading: Implementiere Lazy Loading für Bilder und iFrames weiter unten auf der Seite, damit sie nur geladen werden, wenn sie in den Sichtbereich des Benutzers gelangen.
• 3P Apps: Manchmal können auch Apps das Layout beeinflussen. Deaktiviere vorübergehend einige der Apps, um festzustellen, ob sie das Problem verursachen. Überprüfe, ob Widgets oder andere Inhalte von Drittanbietern das Layout verschieben. Überlege, ob diese Elemente wirklich notwendig sind oder ob es eine optimierte Alternative gibt.
• Header-Optimierung: Überprüfe den Code des Headers speziell für den Warenkorb. Stelle sicher, dass es keine dynamischen Elemente gibt, die nach dem ersten Rendern geladen werden und das Layout verschieben könnten.
• CSS Animationen und Übergänge: Überprüfe, ob es CSS-Animationen oder Übergänge gibt, die das Layout beeinflussen. Möglicherweise musst du diese entfernen oder optimieren.
• Testwerkzeuge: Verwende Werkzeuge wie Lighthouse oder WebPageTest um die Seite zu überprüfen und spezifische Empfehlungen zur Verbesserung des CLS zu erhalten.
• Expertenhilfe: Wenn du Schwierigkeiten hast, das Problem zu identifizieren oder zu beheben, ziehe einen Webentwickler oder Shopify-Experten zu Rate.

Ein häufiges Problem, das zu CLS führt, sind Elemente, die ihre Größe ändern, nachdem sie ursprünglich gerendert wurden, besonders wenn externe Inhalte wie Bilder, Anzeigen oder Widgets von Drittanbietern geladen werden. Hier kann beispielsweise eine min-height: 100vh; zum Seitencontainer der PDP hinzugefügt werden, obwohl es auch andere Elemente geben könnte, die CLS verursachen. 

Die Verwendung einer festen Höhe (min-height: 100vh; oder ein anderer fester Wert) für den Hauptcontainer kann helfen, dieses Problem zu beheben, indem sichergestellt wird, dass der Container immer die volle Höhe des Viewports einnimmt und nicht springt oder sich verschiebt, während der Inhalt geladen wird.

Um dies auf deiner Shopify Produktseite zu implementieren:

1. Gehe zu deinem Shopify-Backend:

   • Klicke im linken Menü auf „Online-Shop“.
   • Wähle dann „Themes“.

2. Bearbeite den Code:

   • Finde das Theme, das du aktuell verwendest, und klicke rechts auf „Aktionen“.
   • Wähle „Code bearbeiten“ aus dem Dropdown-Menü.

3. Suche die entsprechende Liquid-Datei:

   • Die Produktseite befindet sich normalerweise in einer Datei namens product.liquid oder product-template.liquid.

4. Füge den CSS-Code hinzu:

   • Suche nach dem Hauptcontainer der Produktseite (oftmals ist dies ein <div> mit einer Klasse wie .product-container oder ähnlichem).
   • Füge style="min-height: 100vh;" direkt zu diesem Container hinzu oder füge den entsprechenden CSS-Code zu deiner CSS-Datei hinzu.

<div class="product-container" style="min-height: 100vh;">
    <!-- Produktinformationen und andere Inhalte hier -->
</div>

Oder in deiner CSS-Datei:

.product-container {
    min-height: 100vh;
}

Speichere deine Änderungen und prüfe die Produktseite, um sicherzustellen, dass alles korrekt dargestellt wird und es keine Layoutverschiebungen gibt.

Beachte jedoch, dass dies nur ein Patch für dieses spezielle Problem ist. Andere Elemente auf der Seite könnten immer noch CLS verursachen. Es ist wichtig, die gesamte Seite gründlich zu testen und sicherzustellen, dass alle Elemente, die Layoutverschiebungen verursachen könnten, korrekt optimiert sind.