Lazy Loading WordPress: verbeter de prestaties van je site met LWS Optimize

Procédure

Wat is lui laden?

Stel je voor dat je een website bezoekt en eindeloos moet wachten tot hij helemaal geladen is, door een overdaad aan grote afbeeldingen en video's die je browser met moeite laadt. De kans is groot dat je stopt met surfen op die site ten gunste van een andere, beter geoptimaliseerde site. Om te voorkomen dat dit voorbeeld werkelijkheid wordt op je site, is het essentieel dat je de tijd neemt om je afbeeldingen te optimaliseren en lazy loading te activeren.

Wat is lui laden? I Het is een techniek waarmee je alleen de afbeeldingen en video's laadt die zichtbaar zijn boven de waterlijn (d.w.z. wat je op de site ziet zonder naar beneden te scrollen), waardoor de browser de belangrijke inhoud van de pagina eerst laadt, waardoor de laadtijd korter wordt en de prestaties verbeteren.

Het effect is vooral merkbaar op sites met veel afbeeldingen, omdat deze tot de zwaarste en langst ladende elementen op een site behoren.

Verbeter de snelheid van je site met lui laden, waardoor je afbeeldingen en video's pas worden geladen wanneer ze zichtbaar worden op het scherm. Met LWS Optimize activeer je deze optie met één klik en behoud je de controle over welke elementen je wilt uitsluiten. Deze beste WordPress caching plugin is een complete oplossing voor het verbeteren van de prestaties, beschikbaar in de officiële directory als de beste gratis WordPress caching plugin.

Hoe gebruik je lazy-load op je site?

Al een paar jaar biedt WordPress standaard lazy-loading voor afbeeldingen en iframes; als je een versie van WordPress gebruikt die hoger is dan 5.6, zou je hier al gebruik van moeten kunnen maken.
Als je dit echter handmatig wilt doen, WordPress niet gebruikt of een versie gebruikt die ouder is dan 5.6, voeg dan het lazy="load" attribuut toe aan het element dat je wilt laten laden, als het compatibel is:

Dit vertelt de browser om het lui te laden. Browsers kiezen automatisch wanneer afbeeldingen worden geladen, dus je hoeft niets meer te doen. Als het element waaraan je het attribuut hebt toegevoegd niet compatibel is, gebeurt er niets.

Met bepaalde extensies kun je ook het Lazy loading van WordPress verbeteren of regelen. Een van deze extensies is LWS Optimize, een extensie gemaakt door LWS.

Lui laden activeren met LWS Optimize

Om lazy-load van LWS Optimize te activeren, ga je gewoon naar de extensie-instellingen, in het geavanceerde gedeelte via de speciale knop en dan naar het tabblad "Media":

Vink hier de acties "Lazy Loading for Images" en "Lazy Loading for Iframes and videos" aan om ze te activeren. Klik op de knop "Nieuwe configuratie opslaan" rechtsonder om de activering te bevestigen.

Je kunt ook items uitsluiten van lui laden. Klik hiervoor op de knop "Bestanden uitsluiten", waarmee een nieuw venster wordt geopend waarin je verschillende items kunt beheren:

Je kunt elementen uitsluiten van lui laden op basis van de CSS-klassen die ze hebben of het mediatype waartoe ze behoren (video, iframe, enz.). Je kunt ook eenvoudigweg de URL opgeven die moet worden uitgesloten, waardoor elk element dat deze URL bevat, wordt uitgesloten van het proces. Zodra je de uitsluitingen hebt ingevoerd, klik je op de knop "Opslaan" om je wijzigingen op te slaan.

Conclusie

U weet nu hoe u: de laadtijden van uw site kunt verkorten door lui laden te implementeren, deze techniek zowel handmatig als met extensies kunt gebruiken en uitzonderingen voor bepaalde elementen kunt beheren. 🚀

Dankzij dit artikel heeft het optimaliseren van je webpagina's geen geheimen meer voor je. Je zult nu in staat zijn om lazy loading in te schakelen op je WordPress site, plugins zoals LWS Optimize te gebruiken voor verdere controle en zelfs weten hoe je bepaalde afbeeldingen of video's kunt uitsluiten van deze optimalisatie indien nodig. 💡

Uw gebruikers zullen kunnen genieten van een verbeterde gebruikerservaring, met pagina's die snel en zonder frustratie laden. 🌐✨

Bedankt voor het lezen! We zijn benieuwd naar uw mening: hebt u lazy loading al geïmplementeerd op uw site? Loop je tegen specifieke uitdagingen aan? Deel gerust uw ervaring en stel uw vragen in het commentaargedeelte hieronder. Je feedback is waardevol en kan andere lezers helpen!

En als dit artikel nuttig voor u is geweest, kunt u overwegen om het te delen met andere webmasters of ontwikkelaars die baat zouden kunnen hebben bij deze tips! 🤓