Volgens HTTP Archive is de gemiddelde webpagina 3.719kb groot en bestaat deze voor bijna 78% uit afbeeldingen en video’s. Dit is voor een browser een flink aantal bytes om te downloaden en te renderen. Daar komt nog bij dat trends lijken te wijzen op nóg grotere websites door het toenemende gebruik van afbeeldingen en video’s. WordPress is toonaangevend als het gaat om het delen van media en het opnemen van mediabestanden in het ontwerp van een site. De CRM maakt het uiterst eenvoudig om afbeeldingen en video’s in pagina’s en artikelen te integreren, of zelfs in de achtergrond van het thema.

Met de release van WordPress 5.5 is lazyloading onderdeel geworden van de kern en is het zeer eenvoudig om deze techniek te implementeren.

De keerzijde is echter wel dat deze resources het downloaden van een webpagina een steeds complexer proces maken; bezoekers moeten steeds langer wachten tot een pagina is geladen. Hieronder vallen ook de delen van een pagina die op het eerste gezicht niet eens zichtbaar zijn. Een manier om dit laatste probleem op te lossen, is door het gebruik van lazyload in WordPress.

Wat is lazyload en hoe werkt het precies?

Lazyload is een optimalisatietechniek die zichtbare content laadt, maar het downloaden en renderen van de content die daaronder komt, vertraagt. Deze techniek wordt zeer op prijs gesteld door Google en is iets dat je zeker zou moeten overwegen als je veel video’s en afbeeldingen met een hoge resolutie hebt binnen een pagina.

Lazyload werkt als volgt:

Het eindresultaat is dat afbeeldingen en video’s pas worden gedownload wanneer ze daadwerkelijk nodig zijn. Voor sites met veel afbeeldingen en video’s kan dit de prestaties aanzienlijk verbeteren.

Lazyload kan een grote impact hebben op de sitesnelheid als je veel afbeeldingen gebruikt. 🚀Click to Tweet

Lazyload in WordPress

Goed nieuws! Net als met zoveel andere prestatiegerelateerde problemen, is ook het probleem van lazyload in WordPress met een plug-in te verhelpen. Er zijn tal van gratis plug-ins beschikbaar in de WordPress-bibliotheek die je kan gebruiken om lazyload in te schakelen voor afbeeldingen en video’s. Na zo’n dertig van deze plug-ins te hebben doorgenomen en een aantal flink te hebben getest, hebben we de lijst uiteindelijk teruggebracht tot vier plug-ins die de snelheid van je website meetbaar zullen verbeteren. Als je klaar bent om lazyload ook op jouw site in te schakelen, dan zijn dit wat ons betreft de beste opties.

Is het echt waar dat afbeeldingen en video’s een site vertragen?

Voordat we met lazyload aan de gang gaan, zorg er alsjeblieft voor dat je afbeeldingen optimaliseert wanneer je ze naar WordPress uploadt!

We hebben een basisscore nodig zodat we de impact van het toevoegen van afbeeldingen en video’s kunnen zien. Het heeft natuurlijk geen zin om een probleem op te lossen als er überhaupt geen probleem is. Daarom gaan we eerst kijken wat de impact van afbeeldingen en video’s is op een testsite. We gebruiken hiervoor een standaard WordPress-installatie op een hosting-account van Kinsta. We gebruiken TwentySixteen als thema en we maken geen gebruik van optimalisatieplug-ins of technieken zoals caching.

Dit is hoe Pingdom onze websitesnelheid beoordeelt voordat we afbeeldingen of video’s hebben toegevoegd.

Snelheidstest zonder afbeeldingen of video's

Snelheidstest zonder afbeeldingen of video’s

Zoals je kan zien is de pagina erg licht met iets minder dan 155kB en geladen in minder dan een halve seconde. We kunnen gerust stellen dat het verbeteren van deze score een zo goed als onmogelijk opgave is. Maar wat gebeurt er als we een pagina met grote afbeeldingsbestanden en YouTube-video’s laden?

Snelheidstest zonder lazyload plug-in

Snelheidstest zonder lazyload plug-in

De paginagrootte is opgelopen tot 1,7MB en de laadtijden zijn verdrievoudigd naar net iets minder dan 1,3 seconden. TwentySixteen is een goed geschreven licht thema, dus zelfs met een half dozijn afbeeldingen en YouTube-video’s is de pagina nog steeds redelijk licht en laadt deze snel. Toch merken we meteen dat het toevoegen van afbeeldingen en video’s de paginagrootte veel groter maakt en daarmee de laadsnelheid aanzienlijk vertraagt.

Paginalaadsnelheid verbeteren met WordPress lazyload plug-ins

Twee plug-ins die de levering van deze website aanzienlijk versnelen zijn BJ Lazy Load, Lazy Load XT, a3 Lazy Load en Lazy Load. Laten we eens kijken hoe ze presteren! We hebben ook nog een aantal andere plug-ins getest, maar deze lieten geen significante verbetering in performance zien. Wanneer je besluit om lazyload-plug-ins te testen, zorg er dan voor dat je een voor-en-na-test doet om er zeker van te zijn dat ze de resultaten opleveren waarnaar je op zoek bent.

a3 Lazy Load

a3 Lazy Load is een andere populaire lazyload-oplossing die je in de WordPress-repository kan vinden. Deze plug-in is actief op meer dan 50.000 WordPress-websites en heeft een zeer goede beoordeling gekregen van 4,7/5 sterren en heeft bijna 40 gebruikersrecensies ontvangen.

A3 Lazy Load plug-in

A3 Lazy Load plug-in

Het activeren van de plug-in voegt een nieuw menu-item toe bij Settings > a3 Lazy Load. Voor deze test heb ik de standaardinstellingen met één uitzondering gelaten voor wat ze zijn. Ik heb de optie Loading Background Colour ingeschakelt om de kleur van de placeholder overeen te laten komen met de achtergrond van de webpagina. De site presteerde zeer goed met de standaardconfiguratie – en deze ene wijziging.

Snelheidstest met A3 Lazy Load plug-in

Snelheidstest met A3 Lazy Load plug-in

De paginalaadtijd was wederom teruggebracht naar onder een halve seconde. Dat is opmerkelijk te noemen, gezien het aantal afbeeldingen en video’s op deze webpagina.

Testresultaten vergeleken

Ongetwijfeld heb je gemerkt dat de grootte van de pagina én het aantal requests enorm zijn afgenomen. Wat zorgt voor dit enorme verschil? Pingdom geeft een momentopname van de contentgrootte en een snelle vergelijking biedt het antwoord. Allereerst is hier een snapshot van de contentgrootte wanneer we a3 Lazy Load hebben geactiveerd.

Contentgrootte met de a3 Lazy Load plug-in

Contentgrootte met de a3 Lazy Load plug-in

De voetafdruk van de afbeelding is klein met iets meer dan 150kB. Zo ziet de screenshot eruit van de content wanneer die 2,0MB is.

Contentgrootte met de Lazy Load XT-plug-in

Contentgrootte met de Lazy Load XT-plug-in

Het script, HTML, CSS en andere contentgroottes zijn vrijwel identiek. De afbeeldingsgrootte is echter 1,86 MB – wat in feite overeenkomt met de full-resolution versie van de eerste afbeelding op de pagina – in plaats van slechts 150kB. Wat is er aan de hand?

Zoals ik eerder al zei levert WordPress automatisch verschillende afbeeldingsformaten en selecteert de browser de kleinst mogelijke variant die het opgevraagde formaat kan opvullen. A3 Lazy Load laat het standaard WordPress gedrag echter intact en het resultaat is dat een veel kleiner afbeeldingsbestand wordt geleverd.

Lazy Load

Een tweede optie is Lazy Load, een gratis plug-in die door het team van WP Rocket is gemaakt. De plug-in staat momenteel geactiveerd op meer dan 10.000 WordPress-sites en heeft een score van 4 uit 5. Als je op zoek bent naar een eenvoudige lazyload-optie in WordPress met een goede snelheid, dan is dit een goede keuze.

Lazy Load plug-in van WP Rocket

Lazy Load plug-in van WP Rocket

Deze plug-in werkt op miniaturen, alle afbeeldingen in een artikel of widgettekst en op avatars en smily’s. Het grote voordeel van deze plug-in is dat er geen JavaScript-bibliotheek zoals jQuery wordt gebruikt en dat het script minder dan 10kB groot is. Er zijn geen opties om de plug-in te configureren. Je installeert de plug-in en je bent klaar.

Downtime en WordPress problemen? Kinsta is de hosting oplossing speciaal ontworpen om jou tijd te besparen! Bekijk onze kenmerken

Ingebouwde lazyloading

In de afgelopen jaren ontstond er toenemende druk om de lazyloadingsfuntionaliteiten rechtstreeks in webbrowsers te integreren. Op dit moment is lazyloading onderdeel van op Chromium gebaseerde browsers, zoals Chrome, Brave en Firefox.

Ingebouwde lazyloading is goed nieuws voor siteperformance, omdat het niet afhankelijk is van inline Javascript code of externe scripts. Om gebruik te maken van deze ingebouwde lazyloading, voeg je simpelweg een loading=lazy attribuut toe aan de afbeeldingen en iframes die je wil lazyloaden.

Google Native Lazyload plugin.

Google Native Lazyload plugin.

Google heeft de Native Lazyload plugin ontwikkeld om dit proces gemakkelijker te maken. Na activatie van de plugin zal WordPress automatisch het loading-attribuut toevoegen aan je img en iframe tags.

Lazy Load for Videos

Mocht je graag alleen lazyload voor video’s nodig hebben, dan raden we de plug-in Lazy Load for Videos aan. Hoewel sommige van de bovenstaande plug-ins ook video’s ondersteunen, is dit een geweldige oplossing voor als je alleen video content hebt.

Lazy Load for Videos plug-in

Lazy Load for Videos plug-in

Impact van lazyload op SEO

Welke plug-in je ook gebruikt voor lazyload van WordPress, het is natuurlijk belangrijk dat dit de SEO van jouw website niet benadeelt. Er zijn twee dingen die je moet checken:

  1. Zorg ervoor dat Google de lazyload-afbeeldingen nog steeds kan crawlen. Je kan dit controleren met de tool ‘Fetch as Google’ in de crawl-sectie van Google Search Console. Als je je afbeeldingen in de source-code kan zien, dan zijn er hoogstwaarschijnlijk geen problemen.
  2. Zorg ervoor dat je alt-tekst blijft gebruiken bij je afbeeldingen, dit is belangrijk voor de rankings van Google Image Search.

Samenvatting

Het ligt in het verschiet dat alle browsers op termijn allemaal ingebouwde lazyloading ondersteunen, en daarom raden we een plugin aan als Google’s Native Lazy Load om je site voor te bereiden op lazyloading en een baseline op te stellen.

Chrome en Firefox bevatten inmiddels ingebouwde lazyloadfunctionaliteiten en ook Safari is binnenkort aan de beurt en dit is dan ook de toekomst van hoe het lazyloaden van afbeeldingen en iframes gaan werken. Dat gezegd hebbende, als je op zoek bent naar een op JavaScript gebaseerde optie die ook op oudere browsers werkt, dan is a3 Lazy Load een prima keuze.

Lazyload is slechts een van talloze technieken die je kan gebruiken om je WordPress-website te optimaliseren. Toch kan dit een van de belangrijkste zijn, als je een website beheert met veel afbeeldingen en video’s. Mocht het je gelukt zijn om lazyload toe te voegen aan je website, dan is het goed om te weten dat er nog veel meer dingen zijn die je kan doen om de snelst mogelijke websiteprestaties te krijgen.

Hebben we andere goede WordPress lazyload-oplossingen gemist? Zo ja, laat het ons dan weten.


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten