Er zijn veel verschillende manieren om lazy loading op je website te implementeren. Bekijk gerust onze lijst met de beste WordPress-plugins die lazy loading ondersteunen.
Er zijn talloze gratis plugins in de WordPress-directory die gebruikt kunnen worden om afbeeldingen en video's lazy te laden. Na een aantal plugins te hebben bekeken en getest, hebben we twee plugins gevonden die de websiteprestaties aanzienlijk verbeteren. Als je lazy loading wilt implementeren, bekijk dan de onderstaande opties.
WP Rocket (Premium) gebruiken
WP Rocket is de meest eenvoudige manier om langzame laadtijden op je website te implementeren. Bovendien duurt het inschakelen ervan minder dan een minuut. LazyLoad is de naam van de plugin die WP Rocket meelevert als onderdeel van zijn versie van lazy image loading.
Wanneer LazyLoad is ingeschakeld, stopt WP Rocket onmiddellijk het automatisch laden van afbeeldingen door WordPress zelf om mogelijke problemen te voorkomen.
Volg de onderstaande stappen om de LazyLoad-functie van WP Rocket in te schakelen:
- Je kunt LazyLoad activeren door in je WordPress-installatie naar Instellingen > WP Rocket > Media-paneel te gaan.
- Klik op 'Inschakelen voor afbeeldingen' onder het LazyLoad-gedeelte bovenaan het scherm.
- Klik op 'Wijzigingen opslaan' nadat u uw selectie hebt gemaakt.
Dat is alles wat er nog moet gebeuren. Daardoor zullen bezoekers merken dat foto's traag laden.
LazyLoad biedt lazy loading voor extra HTML-elementen, zoals iframes en video's, in tegenstelling tot de native aanpak van WordPress. Bovendien maakt het ook gebruik van lazy loading voor achtergrondafbeeldingen als deze inline worden toegepast op specifieke HTML-componenten.
Als u de ingebouwde lazy-loading-functionaliteit van WordPress voor afbeeldingen wilt gebruiken, kunt u de LazyLoad-optie in WP Rocket uitschakelen. Houd er echter rekening mee dat deze nieuwe laadfunctie nog niet door alle browsers wordt ondersteund. Bovendien is de installatie van WordPress voornamelijk gericht op foto's. Daarom blijft de LazyLoad-functie van WP Rocket de betere optie, met name als uw website veel afbeeldingen, video's en ingesloten content bevat.
Aandachtspunten bij het activeren van de native lazy loading-functie van WP Rocket
Hoewel WP Rocket geen automatische compatibiliteit biedt met Chrome-browsers die gebruikmaken van native lazy loading, kunt u de native lazy loading-functionaliteit van Chrome wel inschakelen via een hulpplugin. Hetzelfde geldt voor andere browsers die gebruikmaken van native lazy loading.
Met deze handige plugin kunt u de volgende zaken garanderen:
- Elke foto die je maakt, bevat de essentiële HTML-syntaxis voor native lazy loading; browsers die compatibel zijn met Chrome zullen automatisch gebruikmaken van native lazy loading; alle andere browsers zullen automatisch WP Rocket's LazyLoad gebruiken.
- Je hebt de mogelijkheid om gebruik te blijven maken van onze robuuste LazyLoad-technologie of over te schakelen naar de ingebouwde lazy loading-functie van Chrome.
Het is helemaal aan jou! Voer eerst een proefsessie uit met beide methoden op jouw locatie en kies de methode die het beste bij je past.
Gebruikmaken van a3 Lazy Load (gratis)
Als je op zoek bent naar een gratis optie, raden we de a3 LazyLoad - video's op je website met vertraging laden .
Daarnaast ondersteunt deze plugin het lazy loading van externe afbeeldingen en video's. De standaardimplementatie van WordPress voert deze functionaliteit niet uit.
Je kunt deze plugin installeren en activeren vanuit je WordPress-dashboard. Nu kun je de instellingen van de tool aanpassen.
Stap 2: De instellingen voor de pluginafbeelding aanpassen
Ga vervolgens naar Instellingen > a3 Lazy Load. Onder Lazy Load-activering ziet u dat de plugin na installatie standaard is geactiveerd.
Open nu het tabblad LazyLoad-afbeeldingen. U kunt (1) kiezen welke websiteafbeeldingen u wilt uitstellen en (2) een fallback instellen voor webbrowsers die JavaScript weigeren. Voor afbeeldingen die u niet wilt uitstellen, kunt u (3) een CSS-klasse instellen:
De standaardinstellingen hebben alle opties ingeschakeld . We raden u ten zeerste aan deze instelling te behouden. Maak een CSS-klasse aan waarmee u het uitgesteld laden voor bepaalde afbeeldingen kunt overslaan.
Stap 3: De video-instellingen van de plug-in aanpassen
De volgende stap is het tabblad 'Lazy Load Videos and iframes'. Met a3 Lazy Load kunt u, net als bij afbeeldingen, het laden van specifieke videofragmenten uitstellen.
De plugin maakt het mogelijk om video's weer te geven in (1) content en widgets en biedt (2) een fallback-functie voor browsers die geen JavaScript ondersteunen:
Je kunt in de video-instellingen (3) een CSS-klasse opgeven om bepaalde video's uit te sluiten van uitgesteld laden. Als je een eenvoudigere configuratie wilt, gebruik dan dezelfde klasse die je in het gedeelte voor afbeeldingen hebt gekozen.
Meer plugins voor lazy loading voor WordPress
Naast WP Rocket en A3 Lazy Load zijn er diverse handige plugins voor lazy loading beschikbaar die je kunt overwegen:
- Lazy loading voor video's
- BJ Lazy Load
- Meer producten laden voor WooCommerce
- WordPress Oneindig Scrollen – Ajax Meer laden
- Disqus voorwaardelijke laadfunctie
- Lazy loading voor reacties
Slotgedachten
Het is cruciaal om je bewust te zijn van mogelijke conflicten wanneer je je website bijwerkt of wijzigt. Bekijk deze lijst met veelvoorkomende problemen die samenhangen met lazy loading als je merkt dat lazy loading ervoor heeft gezorgd dat een onderdeel van je website niet meer werkt.
Het is mogelijk dat er incompatibiliteitsproblemen optreden doordat de lazy loading-functie niet wordt toegepast op afbeeldingen die worden geüpload door plugins zoals Revolution Slider en Envira Gallery. De volledige lijst met compatibele plugins is hier te vinden.
Dit artikel, evenals vele andere, is te vinden op de Seahawk Media Blog .
