Er zijn veel manieren om de prestaties van uw WordPress-blog te verbeteren. We hebben het gebruik van caching-plug-ins, het opruimen en optimaliseren van uw database besproken en ook tal van andere tips om de laadtijd te versnellen. In dit artikel laten we u zien hoe u de prestaties van uw site verder kunt verbeteren door uw afbeeldingen on demand te laden.

Alle blog-eigenaren weten dat afbeeldingen een belangrijke rol spelen in een blogpost. In Make Tech Easier gebruiken we graag veel schermafbeeldingen om de tutorial duidelijker en gemakkelijker te begrijpen te maken. Er is echter één probleem hiermee. Hoe meer afbeeldingen u heeft, hoe langzamer de site wordt geladen en hoe meer bandbreedte wordt gebruikt. Bovendien, omdat we onze afbeeldingen hebben uitbesteed aan Amazon S3, vertaalt de hogere bandbreedte zich ook in hogere kosten.

Een goede oplossing hiervoor is om uw afbeeldingen op aanvraag te laden of wat het meest bekend staat als lui laden.

Lazy loader is een jQuery-plug-in die het laden van afbeeldingen op (lange) webpagina's vertraagt. Afbeeldingen buiten de viewport (zichtbaar gedeelte van de webpagina) worden niet geladen totdat de gebruiker ernaartoe scrolt. Voor sites die veel afbeeldingen gebruiken, kan luie lading de pagina sneller laten laden en ook de serverbelasting (en kosten) helpen verminderen.

Om te voorkomen dat we ingaan op de technische details, laten we eens kijken naar de (eenvoudigste) manieren waarop u dit kunt integreren in uw WordPress-blog.

1. jQuery Image Lazy Loader

Zonder enige twijfel is plug-in de manier om dingen in WordPress te vereenvoudigen. jQuery Image Lazy Loader is een dergelijke plug-in die de functie voor het laden van lui op uw site integreert.

Er is geen configuratie vereist. Het enige dat u hoeft te doen is de plug-in installeren en activeren.

Eenmaal geactiveerd, zal het luie load-script op alle pagina's van de site werken.

2. Lazy Loader

Lazy Loader is een andere plug-in die de functie voor het laden van lui op uw site integreert. Het verschil is, het is configureerbaar. De Lazy Loader-plug-in is niet beschikbaar in de WordPress-repository, dus u moet naar de website van de ontwikkelaar gaan en deze downloaden (wat ook betekent dat u deze niet rechtstreeks vanuit uw WordPress-dashboard kunt installeren).

Zodra je het hebt gedownload, geïnstalleerd en geactiveerd, kun je naar de " Instellingen -> Lazy Loader " sectie gaan om de plug-in te configureren.

Beschikbare opties zijn onder andere het invoegen van het lui ladingsscript op alle pagina's, startpagina, berichten, pagina's, categorie enz. U kunt ook de drempellimiet instellen (het aantal afbeeldingen dat u onder de viewport wilt laden) om vertraging in de afbeelding te voorkomen.

Andere opties zijn de laadeffecten en het gebruik van uw eigen tijdelijke afbeelding.

Conclusie

Lui laden is een goede manier om de bandbreedte van uw site te verminderen, de laadtijd van de pagina te verbeteren en de algehele prestaties te verbeteren. Als u alleen een plug-and-play-oplossing wilt, is jQuery Image Lazy Loader de perfecte keuze. Als u meer controle wilt hebben, is de Lazy Loader-plug-in een betere keuze.

Als laatste, voor hen die voldoende bekwaam zijn, wilt u misschien het luie laadproject bekijken voor een diepe integratie in uw site.

Beeldtegoed: takamorry