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.

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:

  • De browser creëert het Document Object Model (DOM) van de webpagina, zonder afbeeldingen te downloaden en video’s te preloaden.
  • JavaScript wordt vervolgens gebruikt om te bepalen welke afbeeldingen moeten worden gedownload en welke video’s moeten worden voorgeladen – gebaseerd op de content die zichtbaar is wanneer de pagina wordt geladen. Deze foto’s en video’s worden gedownload en zo nodig vooraf geladen.
  • Het downloaden en weergeven van video’s die verderop de pagina komen wordt vertraagd totdat een sitebezoeker naar beneden scrolt en aanvullende content in beeld komt.

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

Vier 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.

1. BJ Lazy Load

BJ Lazy Load is een zeer populaire plug-in. De plug-in is actief op meer dan 70.000 WordPress-websites en heeft een score van 4,1/5 op basis van meer dan 60 recensies.

bj lazy load plugin wordpress

BJ Lazy Load plugin

Installatie en configuratie is erg eenvoudig. Het is een kwestie van de installer gebruiken, de plug-in installeren en vervolgens activeren. Na activatie wordt een nieuw menu-item toegevoegd bij Settings > BJ Lazy Load. Alle lazyload-opties staan standaard ingeschakeld en je wil deze instellingen waarschijnlijk met rust laten, tenzij de front-end van je site problemen ondervindt na het activeren van de plug-in.

Een optie die je uitsluitend bij deze plug-in vindt – en dus niet bij de anderen – is de mogelijkheid om een URL toe te voegen als een placeholder voor de afbeeldingen en video’s die nog niet geladen zijn. Deze ziet de gebruiker totdat de eigenlijk afbeelding of video is geladen. Uiteraard gebruik je hiervoor een heel klein bestand en niet een hoge-resolutie afbeelding!

Voor een naadloos resultaat raden we aan om een afbeelding te maken met dezelfde kleur als de achtergrond van je website en deze als PNG op te slaan.

Je kan ook een HTML-klasse opgeven die wordt uitgesloten van lazyload. Deze klasse kan je vervolgens toepassen op alle afbeeldingen en video’s die je wilt uitsluiten van lazyload. Ten slotte kan je nog aangeven hoe dichtbij een afbeelding of video bij het viewport kan komen voordat deze wordt gedownload en gerenderd.

Laten we eens kijken hoe snel onze pagina wordt geladen met een BJ Lazy Load-configuratie.

Snelheidstest met BJ Lazy Load-plug-in

Snelheidstest met BJ Lazy Load-plug-in

Razendsnel! De site werd meerdere keren per dag een aantal maal getest en de laadtijden lagen constant tussen de 300 en 400 milliseconden.

Deze verbazingwekkend goede resultaten zijn zeker niet het resultaat van een paar toevallige uitschieters.

Terwijl de pagina razendsnel laadt met deze plug-in geïnstalleerd, is de grootte van de pagina juist toegenomen. Hoe kan dat? In theorie zou de grootte van een pagina moeten afnemen na activatie van lazyload, simpelweg omdat niet alle afbeeldingen worden gedownload wanneer een pagina wordt geladen.

Het is daarom een verrassing om te zien dat de grootte toeneemt, maar er is wel degelijk een logische verklaring voor.

Hoe levert WordPress afbeeldingen?

Wat WordPress normaal gesproken doet is een reeks van bestandsgroottes aan de browser presenteren. Hierbij maakt WordPress gebruik van het srcset-attribuut van het img-element die wordt gebruikt om de afbeelding in te sluiten. De browser bekijkt vervolgens de lijst met beschikbare formaten en laadt hiervan de kleinste versie die de beschikbare ruimte kan vullen.

Dit betekent dat wanneer je een erg groot afbeeldingsbestand uploadt, dat WordPress automatisch kleinere versies van dat bestand laat zien aan websitebezoekers. De browser van de bezoeker pakt vervolgens de kleinst mogelijke afbeelding op basis van de hoeveelheid pixels die nodig is om de afbeelding goed weer te geven.

Welke verandering brengt BJ Lazy Load in dit standaard WordPress-proces?

BJ Lazy Load verandert dit standaardproces van WordPress. Het srcset-attribuut wordt in dit geval vervangen door een data-lazy-srcset-attribuut dat samenwerkt met het script van de plug-in. Er wordt nu niet langer een gereduceerde versie van het afbeeldingsbestand gedownload, maar de afbeelding wordt nu in zijn volledigheid gedownload en gerenderd.

Dit is niet ideaal, maar zolang je de afbeeldingsbestanden optimaliseert bij het uploaden naar WordPress – iets wat we nalieten in deze test – hoeft dit geen problemen op te leveren.

Pagina wordt geladen met BJ Lazy Load

Pagina wordt geladen met BJ Lazy Load

Wees er wel van bewust dat je een placeholder moet uploaden, wanneer je een niet-witte achtergrond gebruikt voor je website. Standaard gebruikt de plug-in namelijk een witte gif-afbeelding als placeholder in plaats van de afbeelding.

2. Lazy Load XT

Lazy Load XT presteerde goed in onze tests en is een andere geschikte plug-in om lazyload aan je WordPress-site toe te voegen. Met iets meer dan 4.000 actieve installaties geniet deze plug-in wellicht niet van dezelfde populariteit als BJ Lazy Load, maar met een indrukwekkende score van 4.9/5 kan je niet om deze plug-in heen. Slechts een van de 22 recensies was minder dan de maximale score.

lazy-load-xt-plug-in

Lazy Load XT plug-in

Na activatie kan je de plug-in configureren door naar het menu te gaan onder  Settings> Lazy Load XT. Mocht je hier zijn aanbelandt, dan kom je er al snel achter dat deze plug-in veel meer in huis heeft dan enkel lazyload van afbeeldingen en video’s. Je kan deze plug-in ook gebruiken om JS- en CSS-bestanden te minimaliseren, JavaScript- en CSS-bibliotheken laden middels Cloudflare CDN en scripts naar de footer van de site verplaatsen.

Verder zijn er nog een aantal andere opties die je kan gebruiken om je site te finetunen. Omdat we ons in dit artikel beperken tot lazyload heb ik de standaardinstellingen met rust gelaten en maak ik geen gebruik van de vele opties die deze plug-in naast lazyload aanbiedt. Na het inschakelen van de plug-in heb ik de cache geleegd en de testpagina door de Pingdom-snelheidstest gehaald.

Snelheidstest met Lazy Load XT

Snelheidstest met Lazy Load XT

De pagina is nog steeds 2MB groot en het eerste dat opvalt is dat de pagina niet zo snel laadt als met BJ Lazy Load. Toch kunnen we tevreden zijn, want we hebben onze paginalaadtijd met 50% weten te verminderen in vergelijking met de pagina zonder lazyload.

Als we kort de pagina analyseren dan zien we dat hier hetzelfde aan de hand is als met BJ Lazy Load. In plaats van een geoptimaliseerde versie van de afbeelding te laden, wordt na activatie van de plug-in de volledige versie van de afbeelding gedownload en weergegeven.

Hoewel de plug-in niet dezelfde snelheidsboost produceerde als BJ Lazy Load, gaat de schoonheidsprijs wel naar Lazy Load XT. In tegenstelling tot BJ Lazy Load is de placeholder die door Lazy Load XT wordt gebruikt namelijk transparant. Als gevolg hiervan vind je op deze pagina geen lelijke witte vakken terwijl de afbeeldingen en video’s worden geladen en hoef je je zich geen zorgen te maken over het maken en uploaden van placeholder-afbeelding.

3. 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. Zowel BJ Lazy Load als Lazy Load XT produceerden een paginaformaat van 2,0MB. 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.

Zowel BJ Lazy Load als Lazy Load XT stoppen dit proces en leveren in plaats daarvan de afbeelding met de volledige resolutie. a3 Lazy Load laat het standaard WordPress-proces echter intact en het resultaat is dat een veel kleiner afbeeldingsbestand wordt geleverd.

Vreemd genoeg laadt de site, ondanks het verschil in paginagrootte, sneller met BJ Lazy Load dan met a3 Lazy Load. We hebben de tests meerdere keren uitgevoerd om zeker te weten dat deze bevindingen niet op toeval berustten. Na analyse blijkt dat het verschil neerkomt op het aantal HTTP-verzoeken dat nodig is om de pagina te laden. Op het eerste gezicht lijkt het erop dat BJ Lazy Load meer verzoeken nodig heeft. Als we echter beter kijken dan zien we wat er écht aan de hand is.

Lazy Load Data URI's

Lazy Load Data URI’s

De pagina van BJ Lazy Load bevat ongeveer twintig verzoeken die beginnen met data:image/gif. Dit zijn data URI’s in plaats van HTTP-verzoeken. In feite vertellen ze de browser om lokaal een gif aan te maken in plaats van die gif aan te vragen bij een server. Als gevolg hiervan heeft BJ Lazy Load slechts 17 HTTP-verzoeken nodig om de pagina te bouwen tegenover de 27 HTTP-verzoeken die nodig zijn voor a3 Lazy Load. Dat verklaart waarom de pagina zo razendsnel laadt.

Lazy Load XT maakt gebruik van een soortgelijke tactiek, maar vereist nog steeds een paar verzoeken meer dan BJ Lazy Load, wat verklaart waarom deze plug-in niet kan tippen aan BJ Lazy Load.

4. Lazy Load

Een vierde 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.

5. 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 en aanbevelingen

Om mee te beginnen: alle besproken plug-ins leveren fantastisch werk in het terugbrengen van paginalaadtijden door lazyload van afbeeldingen en video’s. Welke plug-in de beste keuze is, is voornamelijk een kwestie van persoonlijke voorkeur en of je de afbeeldingen ‘voorbereidt’ voordat je ze uploadt naar je WordPress-website.

  • Als je afbeeldingen niet optimaliseert voordat je ze uploadt naar je WordPress-website – iets dat je echt zou moeten doen – kies dan voor a3 Lazy Load, zodat je gebruik maakt van het voordeel dat WordPress automatisch afbeeldingen voor je optimaliseert.
  • Als je wel je afbeeldingen optimaliseert voordat je ze uploadt en je zoekt de laagst mogelijke laadtijden voor de minste moeite, dan is BJ Lazy Load een logische keuze. Ook Lazy Load is een goede optie.
  • Als je afbeeldingen optimaliseert voordat je ze uploadt en extra configuratie-opties wilt waarmee je kan aanpassen hoe CSS- en JavaScript-bronnen worden afgeleverd en afgehandeld, kies dan voor Lazy Load XT.

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.

27
keer gedeeld