Lazy Loading: wat het is en hoe je het op je website implementeert
Als het gaat om het gebruik van onlineplatforms zoals websites, worden laadsnelheid en optimalisatie essentieel, waarbij gebruikers steeds meer snelheid en responsiviteit eisen.
Om deze reden wordt het paginadesignpatroon dat bekend staat als lazy loading steeds belangrijker. Maar wat is lazy loading (uitgesteld laden) precies?
Dat is wat we hieronder gaan behandelen.
Wat is lazy loading?
Specifiek is lazy loading een techniek, een programmeerontwerppatroon dat wordt toegepast op websites, waarbij elementen en resources niet volledig worden geladen, maar on-the-fly worden uitgevoerd of op aanvraag volgens het gebruik van de gebruiker, waardoor een "uitgesteld laden" van de inhoud ontstaat.
Op deze manier worden resources geoptimaliseerd en wordt content zoals tekst, video's, afbeeldingen en ander materiaal alleen geladen wanneer dat nodig is, waardoor snelheid, geheugengebruik en verwerking, responsiviteit en laadtijden verbeteren. Dit staat in contrast met volledig laden, waarbij een site of pagina volledig wordt geladen, zelfs als de gebruiker niet elk element gebruikt.
Algemene voordelen van lazy loading
Aangezien het belangrijkste doel van lazy loading is om het laden van elementen alleen wanneer ze worden gebruikt te optimaliseren, zijn er meerdere voordelen die kunnen worden samengevat als:
- Snelheid bij het weergeven van de hoofdelementen van een website.
- Aanzienlijke verbetering van de gebruikerservaring op de site (UX).
- Verbeterde prestaties op mobiele apparaten, vooral wanneer ze beperkte netwerkverbindingsbronnen hebben; met Lazy Loading actief kun je browsen op pagina's die onder zulke slechte dekkingsomstandigheden anders onhaalbaar zouden zijn.
- Algehele en totale optimalisatie van resources zoals CPU, RAM en batterij op mobiele apparaten.
- De toename in dwell time op onze pagina's, doordat we geen laadproblemen hebben, vertaalt zich indirect in rankingverbeteringen.
- Daling van het bouncepercentage.
Op dezelfde manier heeft de programmeerbenadering van lazy loading voordelen en noviteiten vanuit een meer technisch oogpunt, zoals:
- Lazy loading is volledig compatibel met JS-frameworks zoals React en Angular, evenals met CMS-platforms zoals WordPress. Sterker nog, er is onlangs gemeld dat lazy loading voor afbeeldingen standaard wordt opgenomen in WordPress versie 5.5.
- Dankzij de IntersectionObserver-API verbergt het afbeeldingen niet voor zoekmachines.
- Ondersteuning voor meerdere contenttypen zoals afbeeldingen en responsive-class-resources.
- Hiermee kunnen sitebeelden worden geïndexeerd, wat van vitaal belang is voor SEO.
- Het is een 100% SEO-vriendelijke resource, omdat het direct en indirect veel belangrijke punten in SEO verbetert.
Hoe implementeer je lazy loading in WordPress?
Als we onze site op WordPress hebben, moeten we weten dat we een groot voordeel hebben, omdat er veel oplossingen zijn om lazy loading op onze pagina's te implementeren, zodat ze veel sneller laden. Deze schermafbeelding hieronder toont enkele van de mogelijke oplossingen die we in de plugin-repository hebben:
Overzicht van de meest prominente WordPress-plugins voor het implementeren van lazy loading.
Om deze implementatie uit te voeren, hebben we verschillende opties:
- Kies een specifieke lazy loading-plugin zoals "Lazy loader", "a3 lazy load"...
- Kies een web-optimalisatieplugin zoals "WP Rocket", die deze optie al standaard bevat samen met andere verbeteringen.
SEO-aspecten gerelateerd aan lazy loading
We kennen al de hoofdmissie van uitgesteld laden en de belangrijkste voordelen ervan, en hoe het de verbetering van onze paginaprestaties, onze UX en SEO beïnvloedt.
Nu moet er slim gebruik worden gemaakt van uitgesteld laden om er het maximale uit te halen, want bij oneigenlijk gebruik kan het het tegenovergestelde effect veroorzaken.
Bijvoorbeeld, lazy loading maakt gebruik van de cache om de snelheid te verbeteren, dus als er te veel inhoud daar wordt opgeslagen, kunnen er vertragingen of fouten optreden als het niet correct wordt geïmplementeerd, waardoor zelfs Google geen pagina's en elementen kan indexeren, wat een ernstig effect kan hebben op de ranking van de site. Enkele tips zijn:
- Optimaliseer de cache en maak er slim gebruik van.
- Gebruik Google Search Console om te verifiëren welke inhoud Google op de site crawlt.
- Voeg ALT-tekst toe om elke afbeelding indexeerbaar te maken door Google.
- Maak altijd gebruik van de IntersectionObserver-API.
- Voeg het loading-attribuut toe aan iframes of ingebedde inhoud van andere pagina's of bronnen, dankzij de Blink LazyLoad-functie van de Chrome-browser. Geldt voor afbeeldingen, foto's, video's, tekst en andere inhoud.
Lazy loading en UX
Als het gaat om een website is zowel technische als algemene optimalisatie om een goede gebruikerservaring (UX) te bieden essentieel, met betrekking tot laadtijden, responsiviteit, resourcegebruik en algemeen gedrag. Als een site niet erg responsief is, zal het bouncepercentage hoog zijn, en als het een slechte gebruikerservaring biedt, zal dat van invloed zijn op het verkeer, de zichtbaarheid en zelfs de SEO.
Met uitgesteld laden is het doel om de UX van een site dramatisch te verbeteren in één enkele stap, door de inhoud progressief te laden en wanneer de gebruiker dat vereist tijdens het scrollen door de pagina, of het nu afbeeldingen of tekst betreft, wat het resourcegebruik optimaliseert in vergelijking met het laden van het hele platform, waarbij waarschijnlijk elementen worden getoond die niet belangrijk zijn voor de gebruiker.
Native lazy loading (HTML) in Chrome
Als demonstratie van het belang dat Google hecht aan UX, is het sinds 2020 en vanaf versie 75 van zijn Chrome-browser mogelijk om native lazy loading toe te voegen aan HTML-paginatags en hun multimedia-inhoud zoals foto's, video's, en andere.
Op deze manier begrijpt de Chrome-browser, door automatisch het HTML lazy loading-attribuut toe te voegen, dat de pagina-inhoud zal laden volgens de navigatie van de gebruiker en niet allemaal tegelijk, waardoor de snelheid en responsiviteit verbeteren. Om het te gebruiken, wordt het loading-attribuut met waarde lazy toegevoegd aan elke tag van de visuele en multimediabronnen, evenals iframes:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Deze resource kan zowel in afbeeldingen worden gebruikt, die een groot deel vertegenwoordigen van de informatie die de browser moet downloaden, als in iframes; onthoud dat we deze gebruiken om externe resources in onze site in te bedden.
Het is belangrijk om het gebruik in iframes te benadrukken, omdat deze kritieke laadpunten op onze site kunnen vertegenwoordigen.
Aan de minkant is native lazy loading alleen compatibel met Chrome, hoewel het gebruik ervan in andere browsers kan worden geïmplementeerd via compatibele bibliotheken, voor het geval er geen ondersteuning is, zoals bij Mozilla Firefox het geval is.
Toepassingen van lazy loading
Zoals we al hebben becommentarieerd, richt lazy loading zich op het uitstellen van het laden van elementen op een pagina om de respons te optimaliseren. In die zin richt het gebruik van de tool zich op alle visuele resources, hoewel de nadruk ligt op afbeeldingen, video's en iframes die documenten en andere bestanden kunnen bevatten, allemaal door middel van het wijzigen van tags en de opname van het loading-attribuut met waarde lazy, waarbij de algemene snelheid van de site wordt geoptimaliseerd, zelfs als deze zware elementen of grote multimedia-inhoud heeft.
Heb je vragen over lazy loading of wil je het in je project implementeren? Wij staan tot je beschikking!
Documentatie en referenties:
Auteur: David Kaufmann
Ik heb de afgelopen 10+ jaar volledig in het teken van SEO gestaan — en eerlijk gezegd zou ik het voor geen goud anders willen.
Mijn carrière bereikte een nieuw niveau toen ik als senior SEO-specialist werkte voor Chess.com — een van de 100 meest bezochte websites van het hele internet. Werken op die schaal, verspreid over miljoenen pagina's, tientallen talen en in een van de meest competitieve SERPs die er bestaan, heeft me dingen geleerd die geen cursus of certificering ooit zou kunnen. Die ervaring veranderde mijn kijk op hoe geweldige SEO er echt uitziet — en werd de basis voor alles wat ik sindsdien heb gebouwd.
Vanuit die ervaring heb ik SEO Alive opgericht — een bureau voor merken die serieus werk willen maken van organische groei. Wij zijn er niet om dashboards en maandelijkse rapporten te verkopen. Wij zijn er om strategieën te bouwen die daadwerkelijk het verschil maken, door het beste van klassieke SEO te combineren met de spannende nieuwe wereld van Generative Engine Optimization (GEO) — zodat jouw merk niet alleen opduikt in de blauwe links van Google, maar ook binnen de AI-gegenereerde antwoorden die ChatGPT, Perplexity en Google AI Overviews elke dag opnieuw aan miljoenen mensen leveren.
En omdat ik geen tool kon vinden die beide werelden goed aanpakte, heb ik er zelf een gebouwd — SEOcrawl, een enterprise SEO intelligence platform dat rankings, technische audits, backlinks-monitoring, crawl-gezondheid en AI brand visibility tracking op één plek samenbrengt. Het is het platform waarvan ik altijd had gewild dat het bestond.
Ontdek meer content van deze auteur
