Wil je leren hoe je lazy loading in WordPress kunt implementeren?
Als uw WordPress-website sterk afhankelijk is van visuele inhoud, moet u er mogelijk Lazy Loading-functionaliteit aan toevoegen. Deze WordPress-functie helpt de paginasnelheid en prestaties van een website te verbeteren, waardoor het essentieel is voor uw SEO-inspanningen.
In dit artikel wordt onderzocht hoe Lazy Loading werkt en wat de voor- en nadelen zijn. U leert ook hoe u het op uw website kunt implementeren en hoe u het gebruik ervan kunt optimaliseren voor de beste resultaten.
Zonder verder oponthoud nodigen wij u uit om onze lijst met WordPress-thema's. Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Ga dan terug naar waarom we hier zijn.
Wat is Lazy Loading?
Het is een functie waarmee een website alleen afbeeldingen kan laden die zichtbaar zijn voor de gebruiker. Het helpt de website om een hoge laadsnelheid te behouden door geen afbeeldingen buiten de viewport te uploaden.
Hoe werkt WordPress Lazy Loading?
Wanneer een gebruiker een WordPress-website bezoekt, downloadt zijn browser alle afbeeldingen op de webpagina in één keer. Voor pagina's met veel afbeeldingen met een hoge resolutie kan dit proces de laadtijd aanzienlijk verkorten, wat nadelig kan zijn voor de prestaties van uw website.
Als u een Lazy Loading aan uw website toevoegt, wordt deze gevraagd alleen afbeeldingen te downloaden die zichtbaar zijn op het scherm van de gebruiker. De rest van de mediabestanden worden vervangen door een tijdelijke afbeelding en worden alleen geladen wanneer de gebruiker naar beneden scrolt op de webpagina.
Voordelen en nadelen van WordPress Lazy Loading
Als je je nog steeds afvraagt of je lui laden van afbeeldingen in WordPress moet implementeren, zijn hier de voor- en nadelen van de functie:
Avantages:
- Vermindert het bandbreedtegebruik, waardoor de hostingkosten worden verlaagd.
- Verbetert de snelheid van de website en verbetert daarmee de browse-ervaring van bezoekers.
- Verbetert de mobiele ervaring.
- Verbetert inspanning SEO, het verhogen van de positie van uw website in zoekmachines.
tegen:
- Veroorzaakt inhoudsbuffering, wat de laadsnelheid beïnvloedt.
- Vertraagt snel scrollen.
Lazy Loading toevoegen aan uw WordPress-website: 3 methoden
Er zijn drie manieren om lui laden op uw WordPress-website te implementeren. Wij raden u aan de methode te kiezen die het beste bij uw situatie past.
1. Upgrade naar WordPress 5.4 of hoger
WordPress 5.4 en hoger ondersteunen standaard lui laden. Je WordPress updaten naar de nieuwste versie automatisch lui laden ondersteunen.
Hoewel dit de gemakkelijkste methode is, kunt u niet configureren welke afbeeldingen lui moeten worden geladen. Daarom kan uw website de functie misbruiken, met de bovengenoemde nadelen tot uiting.
Een andere factor om te overwegen is de verschillende aard van de Lazy Loading-functie in elke versie van WordPress. Onlangs heeft WordPress een nieuwe versie van WordPress uitgebracht die verbeteringen implementeert om problemen met slechte brede inhoudsscores van oudere versies aan te pakken.
Dit betekent dat websites die op oudere versies van WordPress draaien, niet dezelfde voordelen krijgen als die met WordPress 5.9, de nieuwste versie.
2. Schakel native lui laden via de browser in
Populaire browsers zoals Chrome, Firefox en Opera ondersteunen lui laden. U hoeft alleen het attribuut toe te voegen naar gerichte afbeeldingen en video's om deze automatisch te activeren.
In native WordPress lazy loading ondersteunt het loading-kenmerk deze drie waarden:
- automobiel : Activeert standaard lui laden, wat gelijk staat aan het niet opnemen van een laadkenmerk.
- lui : Verdeelt het laden van bronnen totdat elk de opgegeven afstand van het kijkvenster bereikt.
- Gretig : laadt alle bronnen zodra de pagina wordt geladen, ongeacht hun locatie.
Hier is een voorbeeld van gebruik:
<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>Deze methode is geweldig voor het lui laden van bepaalde afbeeldingen, waarbij ze elk een laadkenmerk geven dat bepaalt wanneer ze in de viewport verschijnen. Het traag laden van afzonderlijke afbeeldingen kan echter even duren, vooral als uw website veel mediabestanden bevat.
3. Installeer een WordPress-plug-in
Omdat niet alle browsers lui laden voor afbeeldingen en video's ondersteunen, werkt de tweede methode mogelijk niet altijd. U kunt dit probleem verminderen door een Lazy loading WordPress-plug-in te installeren. Deze methode geeft je meer controle over welke afbeeldingen lui moeten worden geladen zonder codering.
Dit zijn beste WordPress-plug-ins van lazy loading om uit te kiezen, toegankelijk via de directory van WordPress plugins.
Verbeter de laadsnelheid van uw website
Een van de goede dingen van deze WordPress-plug-in is dat deze alle afbeeldingstypen ondersteunt, inclusief AVIF. Deze freemium lazy loading WordPress-plug-in biedt optimalisatie en updates. de schaal van de afbeelding om ze aan te passen aan de apparaten van bezoekers, zodat een gebruikerservaring optimaal.
Wanneer het een langzamer netwerk detecteert, geeft deze WordPress-plug-in je de mogelijkheid om de beeldkwaliteit te verslechteren. Bovendien kun je opslagruimte besparen door afbeeldingen op te slaan in de cloudbibliotheek van deze WordPress-plug-in.
Met deze gratis plug-in kun je afbeeldingen optimaliseren voor maximaal 5 maandelijkse bezoeken. Door het Pro-abonnement te kopen, kunt u afbeeldingen lui laden voor 000 maandelijkse actieve bezoekers en meer. Afbeeldingen voor beide abonnementen worden geleverd via het AWS Cloudfront CDN.
Downloaden | demonstratie | web hosting
Smush
Smush is een populaire plug-in voor beeldoptimalisatie die lui laden ondersteunt. Het is compatibel met: WordPress-thema's populair, paginabuilders en plug-ins voor mediabibliotheken. Bovendien kunt u plug-in-instellingen in onbeperkte configuraties opslaan en met slechts een paar klikken toepassen.
Andere handige functies zijn detectie van onjuiste beeldgrootte, ondersteuning voor multisite en beeldcompressietools. Door te upgraden naar Smush Pro kunt u grote afbeeldingen optimaliseren zonder beperkingen in de grootte, originele afbeeldingen opslaan en toegang krijgen tot andere WPMU Pro-plug-ins. Prijzen vanaf 5 $ / maand.
Downloaden | demonstratie | web hosting
a3 luie lading
a3 Lazy Load is een gratis mobielgerichte plug-in voor lui laden. Het is volledig compatibel met WordPress 5.9 en een aantal populaire tools, waaronder WebP- en AMP-plug-ins.
Naast het aanbieden van basisfunctionaliteit voor lui laden, kunt u met a3 Lazy Load ook lui laden van video's, inclusief video's die zijn ingesloten in pagina's, berichten, aangepaste berichttypen en widgets. Luie laadeffecten en de mogelijkheid om scripts te laden vanuit de kop- of voettekst zijn ook beschikbaar.
Andere opvallende kenmerken zoals ondersteuning voor meerdere sites, ondersteuning voor WebP-afbeeldingen en het laden van luie iframes - dit is van toepassing op iframes die de WordPress-kern niet laadt, zoals Google Maps en ingesloten media.
Downloaden | demonstratie | web hosting
WordPress Lazy Loading-tips
De sleutel om het meeste uit lui laden te halen, is door het correct te gebruiken. Hier zijn enkele tips voor het instellen van lui laden op uw WordPress-website:
- Koptekstafbeeldingen niet lui laden. Aangezien afbeeldingen die bovenaan de pagina worden geplaatst, zichtbaar zijn tijdens het laden, heeft hun lui laden geen voordeel.
- Kies de juiste tijdelijke aanduidingen. We raden u aan een effen kleurzweem of afbeelding van lage kwaliteit te gebruiken als tijdelijke aanduiding voor uw afbeeldingen.
- Voeg buffertijd toe voor het laden van afbeeldingen. Op deze manier zijn uw afbeeldingen klaar net voordat ze de bezoekersviewport binnenkomen, waardoor er geen wachttijd is.
- Definieer de afmetingen van de afbeeldingscontainers. Dit helpt u om plotselinge lay-outwijzigingen te voorkomen, waardoor uw webpagina er tijdens het laden netjes uitziet.
- Implementeer lui laden alleen op lange pagina's. Lange pagina's bevatten pagina's die meer dan twee spins nodig hebben om het einde te bereiken en die meer dan vijf afbeeldingen bevatten.
Met lui laden in WordPress kunt u bezoekers een betere browse-ervaring bieden. Naast het verbeteren van de websitesnelheid, vermindert deze functie ook uw bandbreedtegebruik. Al met al helpt het uw SEO-inspanningen voor een betere positie in de zoekresultaten van zoekmachines.
Andere aanbevolen bronnen
We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.
- Hoe omrectionele fouten op WordPress op te lossen
- Sommige plugins om Google-services te integreren op je blog
- 5 WordPress-plug-ins om meldingen weer te geven
- Hoe maak je aangepaste sjablonen WordPress
- Hoe kunt u verschillende achtergronden gebruiken op WordPress
Conclusie
Dat is het voor deze tutorial die u laat zien hoe u Lazy Loading op uw WordPress-website kunt implementeren. We hopen dat dit artikel u heeft geholpen te begrijpen hoe u het meeste uit de functie voor lui laden op WordPress-websites kunt halen. Gebruik zeker een WordPress hosting hoge kwaliteit om de prestaties van uw website verder te verbeteren.
Als u vragen of opmerkingen heeft, kunt u ons dit binnen laten weten commentaires.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Ondertussen, deel dit artikel op uw verschillende sociale netwerken.
...
