Online hulp
De webhost toegankelijk voor iedereen
Procédure
Stel je voor dat je een website bezoekt en eindeloos moet wachten voordat deze volledig is geladen, door een overvloed aan grote afbeeldingen en video's die je browser maar moeizaam kan laden. De kans is groot dat je het surfen op die site staakt ten gunste van een andere, beter geoptimaliseerde site. Om te voorkomen dat dit voorbeeld werkelijkheid wordt op jouw website, is het essentieel dat je de tijd neemt om je afbeeldingen te optimaliseren en lazy loading te activeren.
Lazy loading, wat is dat? I Het is een techniek waarmee alleen de afbeeldingen en video's boven de vouw worden geladen (dat wil zeggen: wat je van de site ziet zonder naar beneden te scrollen), waardoor de browser de belangrijke inhoud van de pagina prioriteit kan geven en zo de laadtijden kan verkorten en de prestaties kan verbeteren.
Het effect is des te opvallender op sites met veel afbeeldingen, omdat dit een van de zwaarste en langst ladende onderdelen van een site zijn.
Verhoog de snelheid van je site dankzij lazy loading, waarmee je afbeeldingen en video's alleen worden geladen wanneer ze zichtbaar worden op het scherm. Met LWS Optimize activeer je deze optie met één klik, terwijl je controle behoudt over de elementen die je wilt uitsluiten. Deze beste WordPress-cacheplugin is een complete oplossing om de prestaties te verbeteren, beschikbaar in de officiële directory als beste gratis WordPress-cacheplugin
Sinds enkele jaren biedt WordPress standaard lazy-loading voor afbeeldingen en iframes aan; als je een versie van WordPress gebruikt die hoger is dan 5.6, zou je daar al van moeten profiteren.
Als je dit echter handmatig wilt doen, als je WordPress niet gebruikt of een versie ouder dan 5.6 gebruikt, hoef je simpelweg alleen het lazy=”load”-attribuut toe te voegen aan het element dat je lazy wilt laten laden, mits het compatibel is:
Dit geeft de browser aan dat het element lazy moet worden geladen. Browsers bepalen automatisch wanneer afbeeldingen worden geladen, je hoeft verder niets te doen. Als het element waaraan je het attribuut hebt toegevoegd niet compatibel is, gebeurt er niets.
Sommige extensies laten je ook toe om lazy loading in WordPress te verbeteren of te beheren. Een van deze extensies is LWS Optimize, een extensie gemaakt door LWS.
Lazy-loading is vooraf geactiveerd zodra de extensie is geïnstalleerd, zonder dat extra configuratie van jouw kant nodig is. LWS Optimize zorgt voor de optimalisatie van de weergave van afbeeldingen, met name die welke direct zichtbaar zijn bij het laden van de pagina, om ervoor te zorgen dat alleen de belangrijke afbeeldingen onmiddellijk worden geladen.
Om lazy-load te beheren vanuit LWS Optimize, hoef je alleen maar naar de instellingen van de extensie te gaan, in het geavanceerde gedeelte via de speciale knop, en vervolgens naar het tabblad “Media”:
Hier kun je de status van lazy-loading wijzigen en elementen uitsluiten. Klik hiervoor op de knop “Bestanden uitsluiten”, waardoor een nieuw venster wordt geopend waarin je verschillende elementen kunt beheren:
Je hebt de mogelijkheid om elementen van lazy load uit te sluiten op basis van de CSS-klassen die ze hebben of het type media waartoe ze behoren (video, iframe, ...). Je kunt ook eenvoudig de URL opgeven die je wilt uitsluiten, waardoor elk element met die URL van het proces wordt uitgesloten. Zodra de uitsluitingen zijn ingevoerd, klik je op de knop "Opslaan" om je wijzigingen te bewaren.
Je weet nu hoe je: de laadtijden kunt verkorten van je site door lazy loading toe te passen, deze techniek zowel handmatig als met behulp van extensies kunt gebruiken, en uitzonderingen voor bepaalde elementen kunt beheren. 🚀
Dankzij dit artikel zou de optimalisatie van je webpagina's geen geheimen meer voor je moeten hebben. Je kunt nu lazy loading activeren op je WordPress-site, plugins zoals LWS Optimize gebruiken voor een meer gedetailleerde controle, en zelfs weten hoe je bepaalde afbeeldingen of video's van deze optimalisatie kunt uitsluiten indien nodig. 💡
Je gebruikers kunnen genieten van een verbeterde gebruikerservaring, met pagina's die snel en zonder frustratie laden. 🌐✨
Bedankt dat je tot het einde hebt gelezen! We zijn benieuwd naar jouw mening: heb je lazy loading al geïmplementeerd op je site? Loop je tegen specifieke uitdagingen aan? Deel gerust je ervaring en stel je vragen in de reacties hieronder. 👇 Jouw feedback is waardevol en kan andere lezers helpen!
En als dit artikel nuttig voor je was, denk er dan aan het te delen met andere webmasters of ontwikkelaars die van deze tips kunnen profiteren! 🤓
Stel ze aan het LWS-team en de community. Het antwoord wordt na moderatie gepubliceerd.
Over LWS :
LWS is een 100% Frans webhostingbedrijf dat zich richt op kwaliteit en innovatie en een responsieve en competente technische service biedt tegen betaalbare prijzen.
Ja
Geen