Hoewel de wereldwijde internetsnelheden aanzienlijk zijn verbeterd—met begin 2024 een gemiddelde van 90,67 Mbps voor vast internet en 44,67 Mbps voor mobiele verbindingen—hebben veel klanten nog steeds te maken met tragere verbindingen, afhankelijk van hun locatie en netwerkcondities. Daarom is het cruciaal om ervoor te zorgen dat je productpagina’s voor alle klanten zo snel mogelijk laden.
Een eenvoudige oplossing is om lazy load aan je pagina’s toe te voegen. Lazy loading is een strategie waarbij resources als niet-blokkerend worden aangemerkt en pas worden geladen wanneer ze nodig zijn, waardoor het kritieke renderpad korter wordt en laadtijden afnemen. Het wordt vooral gebruikt voor afbeeldingen op een website.
Voordelen van lazy loading
Aan de ene kant verbetert het de prestaties en snelheid. Lazy loading heeft direct invloed op de prestaties van je winkel door de initiële laadtijd te verkorten, Core Web Vitals-metrics zoals Largest Contentful Paint (LCP) te verbeteren en het gebruik van serverresources te minimaliseren—belangrijke metrics die Google meeneemt bij het rangschikken van websites. Aan de andere kant geeft het je klanten het gevoel dat producten sneller laden, een fenomeen dat perceived performance wordt genoemd.
Je kunt lazy load op de volgende manieren aan je Shopify-winkel toevoegen.
Gebruik native HTML lazy loading
Native lazy loading wordt inmiddels ondersteund door alle grote browsers, zoals Chrome, Firefox, Safari en Edge. De eenvoudigste en meest moderne aanpak is om het attribuut loading=”lazy” direct aan je image-tags toe te voegen. Zo doe je dat:
- Ga naar Shopify admin en selecteer Online Store.
- Selecteer Themes en kies het thema dat je wilt bewerken.
- Selecteer Actions en klik op Edit Code.
- Zoek image-tags in je templatebestanden (zoals producttemplates, collectiepagina’s, enz.).
- Voeg het attribuut loading=”lazy” toe aan image-tags voor afbeeldingen die onder de vouw (below the fold) staan.
<img src="image.jpg" loading="lazy" alt="Product image" />Belangrijk: Gebruik geen lazy loading voor afbeeldingen die waarschijnlijk direct in beeld staan wanneer de pagina laadt, vooral LCP (Largest Contentful Paint)-afbeeldingen, omdat dit de prestaties negatief kan beïnvloeden. Gebruik voor afbeeldingen boven de vouw (above the fold) in plaats daarvan loading=”eager”.
Lazy loading-script toevoegen (legacy-methode)
Als je oudere browsers moet ondersteunen of liever een aanpak met een JavaScript-library gebruikt, kun je deze methode nog steeds toepassen. Zo doe je dat:
- Ga naar Shopify admin en selecteer Online Store.
- Selecteer Themes en kies het thema dat je wilt bewerken.
- Selecteer Actions en klik op Edit Code.
- Ga naar de map Layouts .
- Klik op themes.liquid.
- Plak vervolgens de volgende code vóór de </head>-tag in de online code-editor.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}Sla de wijzigingen op. Vanaf nu worden afbeeldingen met de class lazyload lazy-loaded.
Lazy loading toevoegen aan specifieke afbeeldingen
Je kunt ook aangeven welke afbeeldingen lazy-loaded moeten worden als je dit niet op de hele winkel wilt toepassen. Als je een specifieke afbeelding lazy wilt laten laden, voeg dan de class ‘lazyload’ toe. Vervang daarnaast het src-attribuut door data-src.
<!-- Before -->
<img src="image.jpg" />
<!-- After -->
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />Lazy loading toevoegen aan een JS-document
Als je deze Javascript-code toevoegt aan het js.liquid- of .js-bestand in de map Assets van je winkel, wordt lazy load aan de site toegevoegd.
$(document).ready(function(){$("img.lazyload").lazyload();});Een app gebruiken
Als je je niet prettig voelt bij het bewerken van themabestanden en een snelle oplossing nodig hebt, kun je apps bekijken die deze functionaliteit aanbieden.
Loadify
Verbeter de prestaties en gebruikerservaring van je Shopify-winkel met aanpasbare laadschermen en soepele pagina-overgangen met Loadify. Implementeer lazy loading en link prediction om paginasnelheden te verhogen door het laden van afbeeldingen en video’s uit te stellen tot ze nodig zijn, terwijl je gebruikmaakt van hover-gebaseerde link prediction.
Tiny SEO Image optimize
TinyIMG biedt een uitgebreide set tools voor paginasnelheid en SEO-optimalisatie, waaronder image ALT-tekst, JSON-LD, beheer van 404-pagina’s, 301-redirects, plugin-SEO, rich snippets en een SEO-afbeeldingscompressor. Daarnaast bevat het AI-gegenereerde beschrijvingen, het schalen van foto’s, afbeeldingscompressie, lazy loading, het maken van sitemaps en ChatGPT AI-integratie.
Conclusie
Lazy loading is een effectieve techniek om de prestaties en snelheid van je Shopify-winkel te verbeteren door het laden van afbeeldingen uit te stellen totdat ze nodig zijn. Lazy loading van afbeeldingen is een krachtige techniek die de websiteprestaties kan verbeteren door de initiële paginalaadtijd en het totale bandbreedtegebruik te verminderen, en dankzij moderne browsers en JavaScript-API’s is lazy loading implementeren eenvoudiger dan ooit.
Door lazy loading te implementeren via native HTML-attributen (de aanbevolen moderne aanpak) of via scripts, zorg je voor een soepelere browse-ervaring voor gebruikers, vooral voor mensen met tragere internetverbindingen. Dit kan leiden tot hogere klanttevredenheid en mogelijk hogere conversieratio’s. Lazy loading toevoegen aan je Shopify-winkel is een eenvoudig proces dat grote voordelen kan opleveren voor zowel de prestaties van je winkel als de ervaring van je klanten, zeker nu laadsnelheid een kritieke factor blijft voor succes in e-commerce.
