Er zijn veel verschillende benaderingen beschikbaar om lazyloading op uw website te implementeren. U bent van harte welkom om onze gerangschikte lijst met de beste plug-ins voor WordPress te bekijken die langzaam laden ondersteunen.
Er zijn talloze gratis plug-ins in de WordPress-directory die kunnen worden gebruikt om afbeeldingen en video's lui te laden. Na enkele tientallen plug-ins te hebben overwogen en er een paar te hebben getest, hebben we twee plug-ins gevonden die de websiteprestaties aanzienlijk verbeteren. Als u lazyloading wilt implementeren, overweeg dan de onderstaande opties.
WP Rocket gebruiken (Premium)
WP Rocket is de meest eenvoudige aanpak voor het implementeren van langzaam laden op uw website. Bovendien duurt het proces van het inschakelen van minder dan een minuut. Lazyload is de naam van de plug -in die WP Rocket bevat als de versie van luie afbeelding laden.
Wanneer Lazyload is ingeschakeld, stopt WP Rocket onmiddellijk het native beeld van WordPress Lazy Load om mogelijke problemen te voorkomen.
Volg de onderstaande stappen om de Lazyload-functie van de WP Rocket in te schakelen:-
- U kunt Lazyload activeren door te navigeren naar Instellingen> WP Rocket> Media Panel in uw WordPress -installatie.
- Klik op "Schakel voor foto's" onder het Lazyload -gebied bovenaan het scherm.
- Klik op "Wijzigingen opslaan" na het maken van uw selectie.
Dat is al het andere dat moet worden gedaan. Als gevolg hiervan zullen bezoekers een trage foto's ervaren.
Lazyload biedt luie lading voor extra HTML -elementen, zoals iframes en video's, in tegenstelling tot de native benadering die WordPress biedt. Bovendien zal het luie laden voor achtergrondfoto's gebruiken als dergelijke afbeeldingen inline worden toegepast voor specifieke HTML -componenten.
Als u WordPress's Native Picture Lazy-Loading-functionaliteit wilt gebruiken, kunt u de optie Lazyload in WP Rocket deactiveren. Aan de andere kant wordt de nieuwe lading -eigenschap nog niet door alle browsers ondersteund. Bovendien is de installatie van WordPress alleen gericht op foto's. Daarom is de Lazyload van WP Rocket nog steeds het superieure alternatief, vooral als uw website veel afbeeldingen, video's en insluitingen heeft.
Dingen waar u op moet letten bij het activeren van Native Lazy Loading van WP Rocket
Hoewel WP Rocket geen automatische compatibiliteit bevat met chromen browsers die native luie laden gebruiken, heb je nog steeds de optie om ondersteuning te kiezen voor Chrome's native luie lading door het in te schakelen via een helperplug -in. Evenzo is het het geval, hoewel WP Rocket geen automatische compatibiliteit bevat met andere browsers die native luie laden gebruiken.
U kunt de volgende dingen garanderen door deze nuttige plug -in te gebruiken:
- Elk van uw foto's bevat de essentiële HTML -syntaxis om native luie lading te gebruiken; Browsers compatibel met Chrome zullen automatisch native luie lading gebruiken; Alle andere browsers gebruiken automatisch Lazyload van WP Rocket.
- Je hebt de mogelijkheid om gebruik te maken van onze robuuste Lazyload-technologie of over te schakelen naar de ingebouwde luie laadfunctie van Chrome.
Het is allemaal aan jou! Voer eerst proeven uit beide benaderingen op uw locatie uit en kies degene die het beste voor u werkt.
A3 Lazy Load gebruiken (gratis)
Als u op zoek bent naar een gratis optie, raden we aan de A3 L AZ Y Load -plug -in te gebruiken. U kunt luie laden uitschakelen voor bepaalde afbeeldingen en pagina's met behulp van de A3 -plug -in. Bovendien staat het de vertraagde laden van video's op uw website :
Bovendien helpt deze plug -in een luie laden van externe afbeeldingen en video's. De WordPress -kernimplementatie voert dergelijke actie niet uit.
U kunt deze plug -in installeren en activeren vanuit uw WordPress -dashboard. Nu kunt u de instellingen van de tool aanpassen.
Stap 2: Pas de instellingen voor de plug-inafbeelding aan
Ga naar instellingen> A3 Lazy Load Vervolgens. Als u onder Lazy Load -activering kijkt, wordt de plug -in standaard geactiveerd na installatie.
Open nu het tabblad Lazyload -afbeeldingen. U kunt (1) kiezen welke websitefoto's u moet uitstellen en (2) een fallback bieden voor webbrowsers die weigeren JavaScript te accepteren. Voor afbeeldingen die u niet wilt uitstellen, kunt u (3) een CSS -klasse instellen:
De standaardinstellingen hebben elke optie ingeschakeld . We raden u ten zeerste aan deze instelling te handhaven. Maak een CSS -klasse waarmee u uitgestelde laden kunt overslaan voor bepaalde afbeeldingen.
Stap 3: Pas de video -instellingen van de plug -in aan
Het tabblad Lazy Load Video's en Iframes is de volgende stap. Met A3 Lazy Load kunt u vertraagde laden selecteren voor bepaalde clips, net zoals u kunt met afbeeldingen.
De plug -in staat video's toe in (1) inhoud en widgets en biedt (2) een fallback -functie voor browsers die JavaScript niet ondersteunen:
U kunt een CSS -klasse opgeven in de video -instellingen (3) om bepaalde video's uit te sluiten van uitgestelde laden. Als u een meer eenvoudige configuratie wilt, gebruikt u dezelfde klasse die u heeft gekozen in het gedeelte Afbeeldingen.
Meer luie laadplug -ins voor WordPress
Afgezien van WP Rocket & A3 Lazy Load, zijn er verschillende nuttige plug -ins voor luie belasting beschikbaar die u kunt overwegen:
- Lazy load voor video's
- BJ Lazy Load
- Laad meer producten voor WooCommerce
- WordPress Infinite Scroll – Ajax Laad meer
- Disqus voorwaardelijke belasting
- Lazy load voor opmerkingen
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 die verband houden met luie lading als u ontdekt dat het toestaan van luie laden ertoe heeft geleid dat elk aspect van uw website niet werkt.
Het is mogelijk dat er onverenigbaarheden zijn als gevolg van de luie laadfunctie die niet wordt toegepast op de foto's die worden geüpload door plug -ins zoals Revolution Slider en Envira Gallery. De hele lijst met compatibele plug -ins is hier te vinden.
Dit artikel, evenals vele anderen, is te vinden op Seahawk Media Blog .
