Wat is lazy loading?

Ken je de term Lazy Loading? Het is een term die in principe weinig tot de verbeelding spreekt. Langzaam laden. Wil je nog meer uitleg? Diverse website testen zoals bijvoorbeeld GTMetrix.com (meer uitleg) en de nieuwe snelheidstest van Google, Lighthouse geven aan dat afbeeldingen niet langzaam geladen worden.

Lazy Loading in WordPress zorgt ervoor dat eigenlijk simpelweg alleen de afbeeldingen getoond worden die in de viewport zijn. Voorbeeld: je komt op de homepage van een webshop en ziet daar vijf afbeeldingen staan voor verschillende categorieën.

Onder de vouw, als je gaat scrollen staan nog meer afbeeldingen. Zonder lazy loading zullen deze direct bij het openen van de pagina geladen worden ondanks dat je de bezoeker ze eigenlijk nog helemaal niet nodig heeft op dit moment.

Deze aanpassing kan er dus voor zorgen dat jouw homepage die ongeveer 1mb is in totaal na ingebruikname van lazy loading maar 300kb is wat direct ingeladen word. Dit is dus een enorme winst.

Waarom Lazy Loading gebruiken in je website?

Lazy Loading zorgt ervoor dat afbeeldingen echt pas geladen worden als ze daadwerkelijk op een beeldscherm vertoond moeten worden. Wat is dan het voordeel van Lazy Loading in WordPress? Het grootste voordeel is dat je website sneller getoond zal worden. En een seconde minder laadtijd kan ervoor zorgen dat er meer bezoekers van jouw website veranderen in klanten.

Lazy loading WordPressAls je het gebruikt op je website zal deze sneller geladen worden. Waarom? Omdat er minder requests zijn van de server naar de browser van je bezoekers. Wat? Ieder element van je website moet geladen worden en doet een oproep aan de server: stuur mij dit of dat. Als je lazy loading activeert zal dit request pas gedaan worden op het moment dat de afbeelding ook echt getoond moet worden.

Hoe activeer je Lazy Loading?

Voor WordPress zijn er veel thema’s waar je lazy loading kunt activeren binnen de thema instellingen. Mocht je thema dit niet ondersteunen dan zou je gebruik kunnen maken van een hele eenvoudige plugin zonder verdere instellingen met de verrassende naam Lazy Load.

Naast het thema of een plugin heb je ook cache plugins die lazy loading aanbieden. Je kunt hiervoor bijvoorbeeld Swift Performance gebruiken.

Kun je zonder Lazy Loading?

Net als iedere aanpassing aan je website moet je rekening houden met heel veel factoren. Wat bij jouw concurrent perfect werkt en een supersnelle website oplevert kan bij jou juist een vertraging opleveren. Ook lazy loading kan je website uiteindelijk vertragen.

Daarnaast vinden sommige bezoekers het vervelend als de foto’s met een hele kleine vertraging geladen worden of als je ze op ziet bouwen van wazig naar scherp. Neem dus zeker mee of je de user experience op jouw website niet beïnvloed door lazy loading in te zetten.

Kun je zonder? In sommige gevallen ben je zelfs beter af zonder. Maar veel websites hebben een behoorlijke performanceboost als het goed ingezet wordt.

Mocht je nog meer willen weten lees dan zeker deze informatie over lazy loading van Google Dev.

Related Articles