Shop Geschwindigkeit / Geschwindigkeits-Score verbessern

Topic summary

  • Shop-Geschwindigkeit: Desktop 84, mobil 42; PageSpeed bemängelt nicht optimal dimensionierte Bilder, vermutlich durch den eingebetteten Instagram-Feed mit 4 Bildern. Trotz wenig Inhalt fällt die Optimierung schwer.

  • Hinweise: Werte grundsätzlich gut; Fokus auf Nutzererlebnis und klare Navigation empfohlen. Für SEO Backlinks aufbauen; unnötige Apps sowie große Bilder/Videos vermeiden. Es wurden Ressourcen zu Performance-Optimierung verlinkt.

  • Zweites Anliegen: PageSpeed meldet LCP/FCP-Probleme (Largest Contentful Paint und First Contentful Paint) in einer Multicolumn-Sektion mit lazy-loading bei Bildern.

  • Vorgehen: Anpassung im Theme-Code möglich, etwa in product-media-gallery.liquid Lazy Loading gezielt deaktivieren oder steuern. Shopify hat standardmäßig Lazy Loading beim image_tag und Section-Properties wie section.index; Änderungen mit Vorsicht vornehmen.

  • Ergebnis: Nach Setzen von lazy_load auf false verschwand der PageSpeed-Fehler. Wunsch nach weiteren Optimierungen ohne Code.

  • Follow-up: Videoanleitungen zur Nutzung der Chrome DevTools für einen Performance-Gesundheitscheck bereitgestellt; zweites Video mit funktionierendem Ton. Nutzer zufrieden, aktuelle Werte akzeptabel.

  • Status: Thema zur mobilen Performance und Instagram-Bilderdimensionierung bleibt offen; LCP/FCP-Thema gelöst. Screenshots und Videoanleitungen waren zentral für das Verständnis.

Summarized with AI on January 5. AI used: gpt-5.

Hey @romu-naassancom

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Ich kann ja auch selber einen :eyes: in deinen Shopify Storefront werfen und schauen, wo hier der ? sitzt in deinem Theme Code. Vielleicht ist es alles ja nicht so schlimm wie du denkst.

Tbh, ich würde mit dem Lazy Loading nicht allzu viel rumspielen denn es ist ja ein wesentlicher Teil des Themes und wenn man es ändert dann kann u. U. auch das Theme nicht mehr richtig funzen.

Dennoch, um das Lazy Loading für Multicolumn-Bereiche in deinem Shopify-Shop zu deaktivieren oder anzupassen, eine allgemeine Methode, um Lazy Loading zu ändern oder zu deaktivieren, besteht darin, direkt in den Code deines Themes einzugreifen. Suche da nach Snippet-Dateien, die für das Laden von Bildern verantwortlich sind, wie z.B. product-media-gallery.liquid im Snippet-Ordner. In dieser Datei kannst du Anpassungen vornehmen, um Lazy Loading für bestimmte Bilder zu deaktivieren oder zu ändern​​.

Shopify hat auch neue Liquid-Section-Eigenschaften eingeführt, die Standardmäßig Lazy Loading für das image_tag in Abschnitten weiter unten auf der Seite hinzufügen. Mit diesen neuen Eigenschaften kannst du dieses Verhalten anpassen und andere Web-Performance-Probleme beheben, die von der Position des Layouts abhängen, wie z.B. Lazy Loading für Bilder oberhalb des Folds oder Layout-Verschiebungen durch asynchrones Laden von CSS. Die relevanten Eigenschaften sind section.index, section.index0 und section.location​​.

Wenn du nach einer Möglichkeit suchst, Lazy Loading auf eine kontrolliertere oder fortgeschrittenere Weise zu implementieren, kannst du externe Bibliotheken wie Lazysizes verwenden. Shopify bietet Anleitungen zur Nutzung dieser Bibliothek zusammen mit Beispielcode, der zeigt, wie du Lazy Loading für deine Bilder einrichten kannst. Dabei kannst du auch Techniken wie das Anzeigen der dominanten Farbe des Bildes während des Ladens oder das Anwenden eines Blur-Effekts für eine ästhetischere Übergangsgestaltung nutzen​​.

Es ist wichtig, dass du bei der Bearbeitung des Codes vorsichtig vorgehst und sicherstellst, dass du genau verstehst, welche Änderungen du vornimmst, um unerwünschte Auswirkungen auf die Performance und das Erscheinungsbild deines Shops zu zerschiessen!

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Habt ihr auch den Shop auf Ostern eingestellt das um die Ecke ist? Warum nicht eine Ostereierjagd :hatching_chick: in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

1 Like