Lazy loading kan een aanzienlijke impact hebben op de laadsnelheid van je Shopify webshop. Het goede nieuws is dat je dit vrij eenvoudig zelf kunt implementeren door wat code toe te voegen aan je Shopify-thema. Hier is een stap-voor-stap handleiding om je op weg te helpen.
Stap 1: Ga naar je Shopify Dashboard
Log in op je Shopify-account en ga naar het dashboard. Van daaruit navigeer je naar ‘Online Store’ en vervolgens naar ‘Themes’.
Stap 2: Code-editor openen
Zoek het thema dat je momenteel gebruikt en klik op de knop ‘Actions’. Kies vervolgens ‘Edit code’ uit het dropdown-menu.
Stap 3: Vind het juiste bestand
In de code-editor zoek je naar het bestand waar je de afbeeldingen wilt toepassen met lazy loading. Dit is meestal een Liquid-bestand, zoals product-template.liquid of collection-template.liquid.
Stap 4: Code toevoegen
Zoek naar de HTML img tags in het bestand. Je zult iets zien dat lijkt op:
<img src=”{{ product.featured_image | img_url: ‘300x’ }}” alt=”{{ product.title }}”>
Verander dit in:
<img data-src=”{{ product.featured_image | img_url: ‘300x’ }}” alt=”{{ product.title }}” class=”lazyload”>
Let op dat we src hebben veranderd in data-src en een lazyload klasse hebben toegevoegd.
Stap 5: JavaScript-bibliotheek toevoegen
Om de lazy loading daadwerkelijk te laten werken, moet je een JavaScript-bibliotheek toevoegen die dit ondersteunt. Een populaire keuze is lazysizes. Voeg de volgende regel toe aan je theme.liquid bestand, binnen de <head> tags
<script src=”https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js” async></script>
Stap 6: Wijzigingen opslaan
Vergeet niet om alle wijzigingen op te slaan voordat je de code-editor sluit.
Stap 7: Testen
Ten slotte, test je webshop grondig om ervoor te zorgen dat de lazy loading correct werkt en dat er geen andere problemen zijn ontstaan.
Door deze stappen te volgen, kun je lazy loading succesvol implementeren in je Shopify webshop. Het is een relatief eenvoudige manier om de laadsnelheid van je site te verbeteren en zo de gebruikerservaring te optimaliseren.