WordPress Lazy Loading van afbeeldingen

WordPress Lazy Loading is een bekend mechanisme dat veel gebruikt wordt om de prestaties en laadtijd van je website aanzienlijk te verbeteren. Alleen al voor het WordPress CMS zijn er talloze plugins die Lazy Loading mogelijk maken.


Wat is Lazy Loading?

Lazy Loading is een techniek waarmee je afbeeldingen op je website pas laadt wanneer deze in beeld komen. Vooral als je een website hebt met meerdere afbeeldingen kan het veel schelen in je laadtijd. Deze afbeeldingen worden dan dus niet allemaal geladen wanneer je de pagina opent, maar pas wanneer deze in beeld zouden moeten verschijnen.

Aangezien Lazy Loading een onmisbare prestatieverbetering is geworden, is het toevoegen van de loading tag bedoeld om de techniek te standaardiseren en websites nog sneller te maken. Volledig geïntegreerd in WordPress.

According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.

Native lazy-loading for the web, web.dev

Hoe het was

Voorheen ging Lazy Loading uitsluitend via Javascript. Je had dus altijd een externe ‘bibliotheek’ of een stuk code nodig die dit regelde in jouw website. Het idee om dit te integreren in WordPress ontstond twee jaar geleden al. Echter was de techniek toen nog niet ver genoeg en maakte men zich zorgen dat het teveel problemen zou geven bij de gemiddelde gebruiker.

Maar de techniek is er klaar voor

Sinds enige tijd ondersteunen een aantal browser, zoals Chrome en Edge, al de nieuwe Loading tag voor afbeeldingen. Perfect voor een betere gebruikerservaring zonder dat al je content verspringt. Een mooie stap voor WordPress om er nog snellere websites mee te kunnen maken.

Nog even wachten op WordPress 5.4 (Maart 2020) en dan kunnen we hier mee aan de slag!

Google Chrome introduceerde de nieuwe loading-tag in 2019 al! Bekijk dit korte filmpje voor meer informatie hierover.