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 in WordPress
- Paginalaadsnelheid verbeteren met WordPress lazyload plugins
- Impact van lazyload op SEO
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 in WordPress
Goed nieuws! Net als met zoveel andere prestatiegerelateerde problemen, is ook het probleem van lazyload in WordPress met een plugin te verhelpen. Er zijn tal van gratis plugins 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 plugins te hebben doorgenomen en een aantal flink te hebben getest, hebben we de lijst uiteindelijk teruggebracht tot vier plugins 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 optimalisatieplugins of technieken zoals caching.
Dit is hoe Pingdom onze websitesnelheid beoordeelt voordat we afbeeldingen of video’s hebben toegevoegd.
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?
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 plugins
Twee plugins 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 plugins getest, maar deze lieten geen significante verbetering in performance zien. Wanneer je besluit om lazyload-plugins 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 plugin 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.
Het activeren van de plugin 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.
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.
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.
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 plugin die door het team van WP Rocket is gemaakt. De plugin 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.
Deze plugin werkt op miniaturen, alle afbeeldingen in een artikel of widgettekst en op avatars en smily’s. Het grote voordeel van deze plugin 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 plugin te configureren. Je installeert de plugin en je bent klaar.
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 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 plugin Lazy Load for Videos aan. Hoewel sommige van de bovenstaande plugins ook video’s ondersteunen, is dit een geweldige oplossing voor als je alleen video content hebt.
Impact van lazyload op SEO
Welke plugin 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:
- 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.
- Zorg ervoor dat je alt-tekst blijft gebruiken bij je afbeeldingen, dit is belangrijk voor de rankings van Google Image Search.
Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— John Mueller (official) — #StaplerLife · #Is (@JohnMu) September 4, 2018
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.
Jon is de Chief Operating Officer bij Kinsta en is dagelijks betrokken bij de sales-, klantenservice- en technische ondersteuningsteams van Kinsta. Jon is een familieman. Dus als hij niet koortsachtig op de toetsen van zijn laptop aan het tikken is, is hij meestal een van zijn kinderen aan het helpen met het repareren van een fiets of het opzetten van Netflix voor een ongeduldige kleuter.
Laat een reactie achter