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 over GTMetrix) en de snelheidstest van Google Lighthouse geven aan dat afbeeldingen niet gelazyload geladen worden.
Lazy Loading in WordPress
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 WordPress 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. Hetzelfde geldt voor afbeelding in een slider die nog niet in beeld zijn.
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 WordPress?
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 geladen zal worden. En een seconde minder laadtijd kan ervoor zorgen dat er meer bezoekers van jouw website veranderen in klanten.
Waarom sneller geladen? 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 WordPress 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 WPRocket, LiteSpeed cache of Swift Performance gebruiken.
WordPress standaard Lazy Loading
Sinds WordPress versie 5.5, uitgebracht in augustus 2020, ondersteunt WordPress standaard lazy loading voor afbeeldingen. Dit betekent dat afbeeldingen op je WordPress website standaard lazy loading gebruiken, wat de laadtijd van pagina’s kan verbeteren door afbeeldingen pas te laden wanneer ze binnen het zichtbare gedeelte van de browser komen.
Lazy loading is een techniek waarbij afbeeldingen pas worden geladen wanneer ze nodig zijn, bijvoorbeeld wanneer ze binnen het zichtbare gedeelte van een webpagina komen tijdens het scrollen.
Dit helpt om de initiële laadtijd van een pagina te verkorten, omdat afbeeldingen die niet direct zichtbaar zijn, niet onmiddellijk worden geladen.
Lazy Loading noodzakelijk?
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. Afbeeldingen die boven de vouw geladen worden mogen volgens de regels van Google niet gelazyload worden. De meeste plugins zijn ondertussen hierop aangepast zodat ze dit uit zichzelf al volgens deze standaard verwerken.
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 performance boost als het goed ingezet wordt.
Mocht je nog meer willen weten lees dan zeker deze informatie over lazy loading van Google Dev.
