Lazy loading is een populaire tactiek op het gebied van performance optimalisatie. Het doel ervan is om je website sneller te maken door alle afbeeldingen en video’s ‘onder de vouw’ pas te laden op het moment dat de bezoeker naar beneden scrolt. Met andere woorden: de site laadt in de eerste instantie alleen de content die noodzakelijk is voor het zichtbare deel van het scherm, en wacht met het laden van de rest tot de bezoeker gaat scrollen. Sinds de officiële release van WordPress 5.5 in augustus kun je gebruik maken van native lazy loading. Als je ons artikel over deze nieuwe native lazy loading feature hebt gelezen, dan weet je dat WordPress afbeeldingen op je site automatisch zal ‘lazy loaden’. Tenminste, dat is de bedoeling. In werkelijkheid ligt het iets ingewikkelder. In dit artikel gaan we wat dieper in op native lazy loading in WordPress. Op basis van deze informatie kun je bepalen of dit in jouw situatie volstaat, of dat het wellicht toch beter is om een dedicated lazy load plugin te gebruiken.
Hoe werkt WordPress native lazy loading?
Native lazy loading is een feature die bij veel webbrowsers al geïntegreerd is. Je hoeft een afbeelding dan alleen maar als “lazy” aan te merken, en de webbrowser regelt de rest. Heel simpel, en je hoeft geen gebruik te maken van JavaScript (de ‘oude’ lazy loading methode). Wil je een webbrowser vertellen om een afbeelding te lazy loaden, dan voeg je simpelweg deze code aan de img tag toe:
loading=”lazy”
Sinds WordPress 5.5 voegt WordPress dat stukje code automatisch voor je toe aan afbeeldingen in de ‘body’ van een webpagina, fragmenten van een blogberichten en widgets. Cool, nietwaar? Je hebt dus geen dedicated WordPress lazy load plugin meer nodig. Of wel?
Het probleem met WordPress native lazy loading
Het probleem met native lazy loading is dat nog niet alle webbrowsers het ondersteunen. Volgens de cijfers van Can I Use Reports heeft op dit moment slechts 75% van de gebruikers een browser die ondersteuning biedt voor native lazy loading. De meest opmerkelijk achterblijver is Safari. Safari hééft een lazy loading functie, maar gebruikers moeten die eerst inschakelen via de geavanceerde experimentele features – iets waar de meeste mensen niets vanaf weten of waar ze de moeite niet voor nemen. Safari zal lazy loading in de nabije toekomst wel standaard maken. Maar op dit moment moet je er rekening mee houden dat 25% van je bezoekers niet zal profiteren van lazy loading als je alleen vertrouwt op de native lazy loading feature van WordPress.
Er is nog een tweede probleem met WordPress native lazy loading: op dit moment werkt het alleen op afbeeldingen. Lazy loading is echter ook super handig voor video’s en iframes. Dus als je die elementen wilt lazy loaden, heb je een plugin nodig.
Dus toch maar een plugin gebruiken?
Het komt erop neer dat als je die 25% van je bezoekers ook wilt voorzien van een optimale performance en je ook andere elementen dan afbeeldingen wilt kunnen lazy loaden, een dedicated lazy load plugin de beste optie is (we zullen je later deze week de beste opties laten zien). Ik ben ervan overtuigd dat native lazy loading over een jaar wel genoeg ‘dekking’ heeft om te volstaan, maar op dit moment nog niet. Goed om te weten: als je een lazy load plugin wilt gebruiken, moet je de native lazy loading feature wel uitschakelen. Dit kan met behulp van de gratis Disable Lazy Loading plugin of door het toevoegen van deze code aan het functions.php bestand van je child thema:
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
