Während sich die globalen Internetgeschwindigkeiten deutlich verbessert haben—und Anfang 2024 im Schnitt 90,67 Mbit/s bei Festnetz-Breitband und 44,67 Mbit/s bei mobilen Verbindungen erreichten—haben viele Kund:innen je nach Standort und Netzbedingungen weiterhin langsamere Verbindungen. Deshalb ist es entscheidend, dass deine Produktseiten für alle Kund:innen so schnell wie möglich laden.
Eine einfache Lösung ist, Lazy Loading zu deinen Seiten hinzuzufügen. Lazy Loading ist eine Strategie, Ressourcen als nicht blockierend zu kennzeichnen und sie erst bei Bedarf zu laden. Dadurch wird der kritische Rendering-Pfad verkürzt und die Ladezeit der Seite reduziert. Es wird hauptsächlich für Bilder auf einer Website eingesetzt.
Vorteile von Lazy Loading
Einerseits verbessert es Performance und Geschwindigkeit. Lazy Loading wirkt sich direkt auf die Shop-Performance aus, indem es die initiale Ladezeit reduziert, Core Web Vitals wie Largest Contentful Paint (LCP) verbessert und die Serverressourcen schont—alles wichtige Kennzahlen, die Google beim Ranking von Websites berücksichtigt. Andererseits sorgt es dafür, dass Kund:innen das Laden der Produkte als schneller wahrnehmen—ein Effekt, der als „perceived performance“ (wahrgenommene Performance) bekannt ist.
Du kannst Lazy Loading in deinem Shopify-Shop auf folgende Arten hinzufügen.
Native HTML Lazy Loading verwenden
Native Lazy Loading wird inzwischen von allen gängigen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Der einfachste und modernste Ansatz ist, das Attribut loading=”lazy” direkt zu deinen Bild-Tags hinzuzufügen. So geht’s:
- Gehe in den Shopify-Adminbereich und wähle Online Store.
- Wähle Themes und entscheide dich für das Theme, das du bearbeiten möchtest.
- Wähle Actions und klicke auf Edit Code.
- Suche in deinen Template-Dateien nach Bild-Tags (z. B. Produkt-Templates, Kategorieseiten usw.).
- Füge das Attribut loading=”lazy” zu Bild-Tags für Bilder hinzu, die unterhalb des sichtbaren Bereichs („below the fold“) erscheinen.
<img src="image.jpg" loading="lazy" alt="Product image" />Wichtig: Lade keine Bilder per Lazy Loading, die beim Seitenaufruf sehr wahrscheinlich im sichtbaren Bereich liegen—insbesondere LCP-Bilder (Largest Contentful Paint), da das die Performance negativ beeinflussen kann. Für Above-the-fold-Bilder verwende stattdessen loading=”eager”.
Lazy-Loading-Script hinzufügen (Legacy-Methode)
Wenn du ältere Browser unterstützen musst oder lieber mit einer JavaScript-Library arbeiten möchtest, kannst du diese Methode weiterhin nutzen. So geht’s:
- Gehe in den Shopify-Adminbereich und wähle Online Store.
- Wähle Themes und entscheide dich für das Theme, das du bearbeiten möchtest.
- Wähle Actions und klicke auf Edit Code.
- Gehe in das Verzeichnis Layouts .
- Klicke auf themes.liquid.
- Füge anschließend den folgenden Code im Online-Code-Editor vor dem Tag </head> ein.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}Speichere die Änderungen. Ab jetzt werden Bilder mit der Klasse lazyload per Lazy Loading geladen.
Lazy Loading für bestimmte Bilder hinzufügen
Du kannst auch festlegen, welche Bilder per Lazy Loading geladen werden sollen, wenn du die Einstellung nicht auf den gesamten Shop anwenden möchtest. Wenn ein bestimmtes Bild Lazy Loading nutzen soll, gib ihm die Klasse ‘lazyload’. Außerdem ersetzt du das src-Attribut durch data-src.
<!-- Before -->
<img src="image.jpg" />
<!-- After -->
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />Lazy Loading zum JS-Dokument hinzufügen
Wenn du diesen JavaScript-Code in die Datei js.liquid oder eine .js-Datei im Verzeichnis Assets deines Shops einfügst, wird Lazy Loading auf der Website aktiviert.
$(document).ready(function(){$("img.lazyload").lazyload();});Eine App verwenden
Wenn du dich mit dem Bearbeiten von Theme-Dateien nicht wohlfühlst und eine schnelle Lösung brauchst, kannst du dir Apps ansehen, die diese Funktion anbieten.
Loadify
Verbessere die Performance und User Experience deines Shopify-Shops mit anpassbaren Ladebildschirmen und flüssigen Seitenübergängen mit Loadify. Implementiere Lazy Loading und Link Prediction, um die Seitengeschwindigkeit zu erhöhen, indem Bild- und Video-Loads bis zum Bedarf verzögert werden—und nutze dabei hover-basierte Link Prediction.
Tiny SEO Image optimize
TinyIMG bietet eine umfassende Suite an Tools zur Page-Speed- und SEO-Optimierung, darunter Bild-ALT-Texte, JSON-LD, 404-Seiten-Management, 301-Weiterleitungen, Plugin-SEO, Rich Snippets und einen SEO-Bildkompressor. Außerdem umfasst es KI-generierte Beschreibungen, Foto-Resizing, Bildkomprimierung, Lazy Loading, Sitemap-Erstellung und eine ChatGPT-AI-Integration.
Fazit
Lazy Loading ist eine effektive Technik, um die Performance und Geschwindigkeit deines Shopify-Shops zu verbessern, indem Bilder erst dann geladen werden, wenn sie wirklich benötigt werden. Image Lazy Loading ist eine leistungsstarke Methode, die die Website-Performance verbessern kann, indem sie die initiale Ladezeit und den gesamten Bandbreitenverbrauch reduziert—und dank moderner Browser und JavaScript-APIs ist die Umsetzung von Lazy Loading einfacher denn je.
Wenn du Lazy Loading über native HTML-Attribute (der empfohlene moderne Ansatz) oder über Scripts implementierst, sorgst du für ein flüssigeres Browsing-Erlebnis—insbesondere für Nutzer:innen mit langsameren Internetverbindungen. Das kann zu höherer Kundenzufriedenheit und potenziell besseren Conversion-Rates führen. Lazy Loading zu deinem Shopify-Shop hinzuzufügen ist ein unkomplizierter Schritt mit spürbaren Vorteilen für die Performance deines Shops und das Erlebnis deiner Kund:innen—zumal die Ladegeschwindigkeit weiterhin ein entscheidender Erfolgsfaktor im E-Commerce bleibt.
