Er zijn veel verschillende benaderingen beschikbaar om lazy loading op je website te implementeren. U bent van harte welkom om een kijkje te nemen in onze ranglijst van de beste plugins voor WordPress die langzaam laden ondersteunen.
Er zijn talloze gratis plugins in de WordPress directory die gebruikt kunnen worden om afbeeldingen en video's lui te laden. Na enkele tientallen plugins te hebben overwogen en er een paar te hebben getest, hebben we twee plugins gevonden die de prestaties van de website aanzienlijk verhogen. Als je graag lui laden wilt implementeren, overweeg dan de onderstaande opties.
WP Rocket gebruiken (Premium)
WP Rocket is de meest eenvoudige manier om langzaam laden op uw website te implementeren. Bovendien duurt het inschakelen ervan minder dan een minuut. LazyLoad is de naam van de plugin die WP Rocket bevat als zijn versie van lazy image loading.
Als LazyLoad aan staat, stopt WP Rocket onmiddellijk het native image lazy loading van WordPress om mogelijke problemen te voorkomen.
Volg de onderstaande stappen om de functie LazyLoad van WP Rocket in te schakelen:-
- U kunt LazyLoad activeren door te navigeren naar Instellingen > WP Rocket > Media paneel in uw WordPress installatie.
- Klik op "Enable for pictures" onder het LazyLoad gedeelte bovenaan het scherm.
- Klik op "Wijzigingen opslaan" nadat u uw keuze hebt gemaakt.
Dat is alles wat er nog moet gebeuren. Daardoor zullen bezoekers het laden van foto's traag ervaren.
LazyLoad biedt lui laden voor extra HTML-elementen, zoals iframes en video's, in tegenstelling tot de native aanpak die WordPress biedt. Bovendien zal het lui laden gebruiken voor achtergrondafbeeldingen als dergelijke afbeeldingen inline worden toegepast voor specifieke HTML componenten.
Als u de eigen functionaliteit van WordPress voor het lui laden van afbeeldingen wilt gebruiken, kunt u de optie LazyLoad in WP Rocket uitschakelen. Anderzijds wordt de nieuwe laadeigenschap nog niet door alle browsers ondersteund. Bovendien is de installatie van WordPress alleen gericht op foto's. Daarom is WP Rocket's LazyLoad nog steeds het superieure alternatief, vooral als uw website veel afbeeldingen, video's en embeds heeft.
Aandachtspunten bij het activeren van WP Rocket's Native Lazy Loading
Ook al bevat WP Rocket geen automatische compatibiliteit met Chrome-browsers die native lazy loading gebruiken, u hebt toch de mogelijkheid om te kiezen voor ondersteuning van Chrome's native lazy loading door dit in te schakelen via een helper-plugin. Hetzelfde geldt voor WP Rocket, ook al bevat het geen automatische compatibiliteit met andere browsers die native lazy loading gebruiken.
U kunt de volgende dingen verzekeren door deze nuttige plugin te gebruiken:
- Al uw foto's zullen de essentiële HTML-syntax bevatten om native lazy loading te gebruiken; browsers die compatibel zijn met Chrome zullen automatisch native lazy loading gebruiken; alle andere browsers zullen automatisch WP Rocket's LazyLoad gebruiken.
- U kunt gebruik blijven maken van onze robuuste LazyLoad-technologie of overschakelen op de ingebouwde lazy loading-functie van Chrome.
Het is allemaal aan u! Doe eerst proeven met beide benaderingen op uw locatie, en kies de benadering die voor u het beste werkt.
Gebruik van a3 Lazy Load (gratis)
Als u op zoek bent naar een gratis optie, raden wij u aan de a3LazyLoad plugin te gebruiken. Met de a3 plugin kun je het lui laden voor bepaalde afbeeldingen en pagina's uitschakelen. Bovendien kunt u hiermee het laden van video's op uw website vertragen:
Bovendien helpt deze plugin bij het lui laden van externe afbeeldingen en video's. De kernimplementatie van WordPress voert een dergelijke actie niet uit.
Je kunt deze plugin installeren en activeren vanuit je WordPress dashboard. Nu kun je de instellingen van de tool aanpassen.
Stap 2: Pas de beeldinstellingen van de plugin aan
Ga vervolgens naar Instellingen > a3 Lazy Load. Als je onder Lazy Load Activation kijkt, is de plugin standaard geactiveerd na installatie.
Open nu het tabblad LazyLoad afbeeldingen. U kunt (1) kiezen welke websiteafbeeldingen u wilt vertragen en (2) een fallback bieden voor webbrowsers die JavaScript weigeren te accepteren. Voor afbeeldingen die u het laden niet wilt vertragen, kunt u (3) een CSS-klasse instellen:
In de standaardinstellingen is elke optie ingeschakeld. Wij raden u sterk aan deze instelling te handhaven. Maak een CSS klasse waarmee u het uitgesteld laden van bepaalde afbeeldingen kunt overslaan.
Stap 3: De video-instellingen van de plugin aanpassen
Het tabblad Lazy Load Video's en iframes is de volgende stap. Met a3 Lazy Load kunt u het laden van bepaalde clips uitstellen, net als bij afbeeldingen.
De plugin staat video's toe in (1) inhoud en widgets en biedt (2) een fallback-functie voor browsers die geen JavaScript ondersteunen:
U kunt in de video-instellingen (3) een CSS-klasse opgeven om bepaalde video's uit te sluiten van uitgesteld laden. Als je een meer eenvoudige configuratie wilt, gebruik dan dezelfde klasse die je hebt gekozen in de sectie afbeeldingen.
Meer Lazy Loading Plugins voor WordPress
Naast WP rocket & a3 Lazy Load zijn er verschillende nuttige plugins voor lazy load beschikbaar die u kunt overwegen:
- Lazy Load voor video's
- BJ Lazy Load
- Meer producten laden voor WooCommerce
- WordPress Oneindig scrollen - Ajax laden Meer
- Disqus Voorwaardelijk laden
- Lazy Load voor commentaar
Laatste gedachten
Het is cruciaal om op de hoogte te zijn van mogelijke conflicten wanneer u uw website bijwerkt of wijzigt. Bekijk deze lijst met frequente problemen in verband met lui laden als u ontdekt dat het toestaan van lui laden een aspect van uw website buiten werking heeft gesteld.
Het is mogelijk dat er incompatibiliteiten zijn als gevolg van het feit dat de lazy loading-functie niet wordt toegepast op de afbeeldingen die worden geüpload door plugins zoals Revolution Slider en Envira Gallery. De volledige lijst van compatibele plugins vindt u hier.
Dit artikel en vele andere zijn te vinden op Seahawk Media Blog.
