WordPress lazy loading voor afbeeldingen en video’s

Webpagina’s met alleen tekst zijn niet zo heel groot qua bytes, maar wanneer je afbeeldingen en video’s op een pagina plaatst, is dit meteen een ander verhaal.

De meeste bytes op een pagina die door een bezoeker gedownload moet worden zijn afbeeldingen en dit zal in de toekomst ook niet snel veranderen.

Door deze grote bestanden moet een bezoeker wachten tot de pagina volledig geladen is, zelfs als deze bestanden niet direct zichtbaar zijn. Dit is het moment waarop je kunt denken aan lazy loading voor WordPress.

Met lazy loading wordt alleen de inhoud geladen die direct zichtbaar is voor de bezoeker, dit wordt ook wel de inhoud boven de vouw genoemd. Alle andere afbeeldingen en dergelijke worden pas geladen zodra de bezoeker hiernaartoe scrolt.

In dit artikel vertel ik je meer over lazy loading en hoe je dit kunt implementeren op je eigen WordPress-website.

Hoe werkt lazy loading precies?

Ik zal even mijn best doen om lazy loading zo eenvoudig mogelijk uit te leggen zonder al teveel technische termen. Met lazy loading wordt een techniek gebruikt dat de browser van je bezoeker de pagina laad zonder afbeeldingen en video’s.

Vervolgens wordt met behulp van JavaScript bepaald welke afbeeldingen en video’s geladen moeten worden aan de hand van wat direct zichtbaar zal zijn als de pagina geladen wordt. De afbeeldingen en video’s die direct zichtbaar moeten zijn worden dan gedownload en ingeladen.

Alle afbeeldingen en video’s die niet direct zichtbaar zijn voor de bezoeker, worden pas gedownload en ingeladen als de bezoeker naar het deel scrolt waar de afbeelding of video moet staan.

Simpel gezegd zorgt lazy loading er dus voor dat afbeeldingen en video’s pas ingeladen worden wanneer dit ook echt nodig is. Met name wanneer je van hoge resolutie afbeeldingen gebruik maakt kan dit een goede performance boost zijn.

Hoe krijg ik lazy loading in WordPress?

Met WordPress kun je lazy loading implementeren met een plugin. Het kan overigens ook een optie in het thema dat je gebruikt zijn. Diverse thema’s hebben deze optie ingebouwd zitten.

Wanneer we naar WordPress plugins voor lazy loading kijken zijn er veel verschillende opties. Hieronder volgen twee plugins die ik je kan aanbevelen als je lazy loading wilt implementeren op jouw WordPress-website.

Indien je wilt kijken of het ook echt effect heeft, is het verstandig om een voor en na test te doen via een website als Pingdom. Je kunt dan kijken naar de snelheid en de paginagrootte, want dit moet natuurlijk na het installeren van de plugin beter geworden zijn.

BJ Lazy Load

Met BJ Lazy Load worden afbeeldingen, thumbnails, gravatars en iframes vervangen met een kleine placeholder. Zodra een bezoeker in de buurt komt wordt de placeholder vervangen met de daadwerkelijke afbeelding of video. Daarnaast werkt deze plugin ook voor tekst widgets.

Wanneer je de plugin BJ Lazy Load installeert en activeert krijg je bij “Instellingen -> BJ Lazy Load” diverse instellingen te zien. Standaard staat alles aan en ik zou dit ook gewoon zo houden, tenzij je tegen problemen aanloopt.

Een optie die je bij andere plugins niet ziet, is dat je zelf een placeholder afbeelding kunt instellen die gebruikt wordt voordat de afbeeldingen en video’s gedownload worden. Standaard is dit een afbeelding van 1px, maar wellicht wil je zelf iets anders gebruiken. Probeer de placeholder wel een kleine afbeelding te houden.

Je kunt overigens ook nog een CSS class aangeven die je kunt gebruiken als je bepaalde afbeeldingen of video’s niet wilt lazy loaden. Verder is de optie om aan te geven wanneer een afbeelding of video geladen moet worden ook handig. Standaard staat dit op 200 pixels voordat de bezoeker bij de positie is.

Rocket Lazy Load

Rocket Lazy Load is een plugin gemaakt door dezelfde makers als de populaire premium caching plugin WP Rocket. Het is een eenvoudige plugin zonder al teveel poespas en instellingen.

Het verschil met deze plugin ten opzichte van andere Lazy loading plugins, is dat de plugin geen JavaScript library als jQuery gebruikt. Daarnaast is het script minder dan 6kb groot, wat heerlijk klein is.

De plugin werkt met thumbnails, alle afbeeldingen in een bericht, pagina of tekst widget, avatars en smilies. Verder kan de plugin ook iFrames en video’s lazy loaden. Zodra je de plugin installeert en activeert op je website, kun je bij “Instellingen -> Rocket Lazyload” aangeven of je lazy loading wilt inschakelen voor afbeeldingen en video’s. Meer opties zijn er niet.

Conclusie

Lazy loading is een optimalisatietechniek die je kunt gebruiken om je WordPress-website verder te optimaliseren. Wanneer je veel grote afbeeldingen plaatst op je website kan het echt heel veel schelen.

Hoewel lazy loading een prima optimalisatietechniek is, zijn er genoeg andere factoren die je kunt gebruiken om je website sneller te maken. Zo begint alles met het uploaden van afbeeldingen die geoptimaliseerd zijn als het om de bestandsgrootte gaat. Het cachen van je WordPress-website geeft ook uitstekende resultaten.