Lazy Loading op browser-niveau

19 augustus 2019

Het mag geen geheim meer zijn dat de laadtijd van je website belangrijk is. Sitespeed is een ranking factor voor SEO én het wordt meegenomen in de berekening van de Google Ads kwaliteitsscore. Maar het belangrijkste is natuurlijk dat je je websitebezoekers een optimale ervaring biedt, en hiervoor is een snelle website cruciaal.

 

 

Diverse case studies hebben aangetoond dat er een verband is tussen de laadsnelheid van je website en het conversieratio. Door simpelweg de laadtijd van de pagina te reduceren kun je dus je conversieratio verbeteren! Ook help je de Google crawler met een snelle website. Er kunnen meer pagina’s worden geïndexeerd wat uiteindelijk een positieve impact op je organische vindbaarheid kan hebben. Kortom, voldoende redenen om de laadtijd van je website te optimaliseren. Weet je niet waar je moet beginnen? Lees dan onze PageSpeed Insights gids!

Lazy Loading

Er zijn een groot aantal methoden om de laadsnelheid van je website te verbeteren. Sommige zijn relatief eenvoudig, voor andere methoden dien je toch echt een webbouwer in de arm te nemen. Eén van deze  methoden is Lazy Loading. Met Lazy Loading worden afbeeldingen onder de vouw pas geladen als een gebruiker hier naar toe scrolt. Zeker voor pagina’s die veel afbeeldingen bevatten kan Lazy Loading een uitkomst zijn. 

Het nadeel van Lazy Loading is echter dat de implementatie behoorlijk technisch is. Het goede nieuws; hier komt verandering in! Google Chrome gaat Lazy Loading inbouwen in haar laatste Chrome browser – Chrome 76. Met een beetje HTML-basiskennis is het nu mogelijk om een ‘loading=lazy’ attribuut te implementeren. 

Naast het attribuut lazy worden er nog twee attributen ondersteunt. Met auto neem je de standaardinstelling van de browser over. Er gebeurt dan vervolgens niks, dit is hetzelfde als het attribuut niet implementeren. Daarnaast kan je kiezen voor eager. Hiermee worden afbeeldingen juist direct geladen ongeacht de positie op de pagina. Dit is het tegenovergestelde van Lazy Loading. 

De meer technische implementatie voor Lazy Loading raden wij overigens nog steeds aan voor browsers die dit attribuut niet ondersteunen. 

Update 05/09: Google lanceert Native Lazyload plug-in voor WordPress

Op 5 september 2019 heeft Google zelf een plug-in voor WordPress uitgebracht om de lazy loading op browserniveau te ondersteunen. Deze plug-in heeft tevens een back-up om te functioneren in browsers waarin javascript uitgeschakeld is of die nog geen ondersteuning voor de nieuwe functie bieden.

De Native Lazyload plug-in van Google is hier te vinden.

Vond je dit interessant?

Schrijf je in voor onze nieuwsflits en ontvang maandelijks een update met onze laatste blogs en updates!

volg ons op