IN DEZE HANDLEIDING:
- 1 Wat is lazy loading en hoe werkt het?
- 2 Waarom zou je een lazy loading plugin gebruiken?
- 3 Google Core Web Vitals betekenis voor SEO -LCP FID CLS
- 4 Webbrowser sneller maken bij langzame browser (Chrome)
- 5 Website sneller maken met 7 Beste WordPress plugins
- 6 Langzame trage WordPress site oorzaken en oplossingen
- 7 Caching cache instellen website Handleiding WP plugins
- 8 Beste Lazy Load WordPress plugins
- 9 Handleidingen over Lazy loading
Wat is lazy loading en hoe werkt het?
Lazy loading is een techniek waarbij het laden van inhoud onder de vouw wordt uitgesteld totdat de gebruiker naar beneden scrollt om de inhoud te zien. Met lazy loading wordt alleen de essentiële inhoud bij de eerste keer laden geladen, waardoor de indruk wordt gewekt dat de webpagina sneller is.
Lazy loading wordt het vaakst gebruikt voor “zware” pagina-elementen zoals afbeeldingen, iframes en scripts. Teveel van deze elementen (DOM) op een pagina zal de webpagina enorm vertragen, en je zou het gebruik ervan moeten beperken tot alleen het noodzakelijke. Maar lazy loading is een andere betrouwbare manier om ze op te nemen met minimale impact op de paginasnelheid.
WordPress en lazy loading
WordPress ondersteunt van nature lazy loading voor afbeeldingen en iframes, zolang je maar een upgrade naar versie 5.7 of hoger hebt uitgevoerd. Ten tweede zijn er gratis WordPress plugins die je meer controle geven over je lazy-loaded elementen.
In dit artikel bespreken we de zeven beste plugins om je afbeeldingen, iframes en meer lazy-loaded te maken. Maar eerst, waarom zou je überhaupt een plugin willen gebruiken?
Waarom zou je een lazy loading plugin gebruiken?
Of u nu een WordPress blog, een zakelijke site, een online winkel, of een ander type WordPress website runt, trage paginasnelheid is de grootste vijand van gebruikerservaring. Het duurt slechts enkele seconden laadtijd voor zowel mobiele als desktop gebruikers om niet betrokken te raken met uw inhoud, dus alle kleine stappen die u kunt nemen om de pagina prestaties te verbeteren zijn meestal een goede investering.
Meer handleidingen over snel laden van WordPress
Google Core Web Vitals betekenis voor SEO -LCP FID CLS
De nieuwe Google Core Web Vitals is een belangrijke aankondiging van Google hoe ze uw WordPress website meten en met welke indicatoren.
Webbrowser sneller maken bij langzame browser (Chrome)
Je webbrowser sneller maken is heel handig en noodzakelijk als google chrome browser langzaam of traag is. Lees de tips. IN DEZE HANDLEIDING:1 Webbrowser sneller maken in google chrome browser2 WordPress website voert wijzigingen niet door in browser3 1 Je webbrowser bijwerken naar de laatste versie4 2 Gebruik de taakmanager […]
Website sneller maken met 7 Beste WordPress plugins
Als u moeite heeft om uw WordPress installatie te versnellen, kunnen deze WordPress plugins een drastische verbetering van de laadtijd van uw pagina’s betekenen. WordPress website sneller te maken met plugins Het is belangrijk om erop te wijzen dat je de plugins niet allemaal moet installeren. Installeer alleen wat je […]
Langzame trage WordPress site oorzaken en oplossingen
Een trage of langzaam ladende WordPress website of blog is uit den boze. Het is vervelend voor je bezoekers en een trage WordPress website of blog is niet goed voor je bezoekersaantallen. Lees wat je kan doen.
Caching cache instellen website Handleiding WP plugins
IN DEZE HANDLEIDING:1 Wat is website caching?2 Heb je caching nodig voor WordPress?3 Hoe werkt caching in WordPress?4 Vormen van caching5 Beste caching plugins voor WordPress6 Browser cache legen7 De cache leegmaken van WordPress-cache-plugins8 Legen server cache9 Hulp nodig bij caching of caching laten doen Wat is website caching? Website […]
Vanaf versie 5.7, laadt WordPress standaard afbeeldingen en iframes lazy. Om precies te zijn, WordPress wijst het lazy load HTML attribuut toe aan alle <-img /-> en <-iframe-> tags die een breedte en een hoogte specificeren (om te voorkomen dat de lay-out verschuift bij het laden). Waarom zou je dan een plugin nodig hebben als WordPress deze functionaliteit al bevat? De belangrijkste reden is als je je lazy loading instellingen verder wilt aanpassen dan wat WordPress standaard doet.
Hoewel u de onderliggende WordPress code kunt aanpassen om andere elementen dan afbeeldingen en iframes lazy te laden, willen gebruikers die niet zo handig zijn met programmeren misschien een alternatief. Plugins kunnen deze lazy-loading veranderingen voor u doorvoeren, zonder enige codering van uw kant.
Een andere reden waarom u een plugin zou willen is cross-browser compatibiliteit: Terwijl de meeste webbrowsers lazy loading ondersteunen, doet Apple‘s Safari dat niet. Dit betekent dat native WordPress lazy loading momenteel niet werkt in die browser. Tot Apple het loading attribuut ondersteunt, kunnen sommige lazy loading plugins helpen om lazy loading te activeren in deze browser en andere populaire browsers.
Nu we de voordelen van een WordPress plugin voor lazy loading hebben gezien, laten we eens kijken naar je beste opties.
Beste Lazy Load WordPress plugins
De beste Lazy Load WordPress plugins op een rij:
a3 Lazy Load
a3 Lazy Load is de populairste WordPress-plugin die uitsluitend gericht is op lazy loading, waardoor het een uitstekende keuze is voor websites waarop veel media worden weergegeven. Met deze gratis tool kunt u niet alleen uw afbeeldingen sneller laten laden, maar kunt u ook iframes en video’s laten laden dankzij de aanpassingsopties. U kunt zelfs animatie-effecten toevoegen voor wanneer de beelden wel laden (zoals fade-ins).
Deze plugin werkt uitstekend samen met andere geavanceerde plugins, en is een geweldige optie voor beheerders die lazy loading op hun e-commerce websites willen – de WooCommerce plugin is volledig compatibel met deze plugin. a3 Lazy Load werkt ook goed op mobiele sites.
Als u zich zorgen maakt over de gebruiksvriendelijkheid, hoeft u dat niet te doen. a3 Lazy Load is eenvoudig in te stellen en aan te passen voor gebruikers van alle ervaringsniveaus.
Smush
Smush is de toonaangevende plugin voor het optimaliseren van afbeeldingen voor WordPress, en dat is niet voor niets – de plugin bevat alles wat u nodig hebt om te voorkomen dat afbeeldingen de prestaties van uw pagina’s belasten, waaronder compressie, ontvangst en, natuurlijk, lazy loading.
Het activeren van lazy loading in Smush is zo eenvoudig als het klikken op een knop – dit stelt direct het laden van alle afbeeldingen onder de vouw uit. Vanaf daar kun je met Smush ook het lazy loading beperken tot bepaalde mediatypen en uitvoerlocaties (bijv. miniaturen, widgets en inhoudsgebieden).
Deze plugin is op grote schaal compatibel met andere populaire plugins en WordPress thema‘s om uw site geoptimaliseerd te houden en bezoekers vast te houden. Het beste van alles is dat je niet de premium versie van Smush hoeft aan te schaffen om lazy loading te activeren, aangezien de gratis versie deze functie bevat.
- Afbeeldingen kleiner snel maken laden compressie plugin
- Afbeelding SEO optimaliseren WP handleiding gevorderden
- Lazy Load snel laden afbeeldingen snelheid WP plugin
Afbeelding optimaliseren & Lazy Load door Optimole
Image optimization & Lazy Load is een andere populaire plugin die gericht is op het verbeteren van de prestaties door je afbeeldingen te optimaliseren. Aangezien Optimole een full service is, kun je de gratis versie van de plugin gebruiken om lazy loading mogelijk te maken, of upgraden naar een van de betaalde abonnementen voor meer functies.
Net als Smush wil Optimole een alles-in-een tool zijn voor beeldoptimalisatie, inclusief het aanpassen van het afbeeldingsformaat en compressie, een geïntegreerde CDN om afbeeldingen sneller te serveren, en een optie voor lazy loading. Merk op dat de lazy load functie is geconfigureerd om layout verschuivingen te voorkomen, zodat de gebruikerservaring niet zal worden verstoord.
Lazy Load door WP Rocket
Deze volgende plugin komt van de ontwikkelaars achter de populaire WP Rocket caching plugin – Lazy Load is nog zo’n fantastische tool die je afbeeldingen alleen zichtbaar maakt voor gebruikers als ze net boven de vouw staan. Echter, in tegenstelling tot de betaalde caching plugin, Lazy Load is gratis te gebruiken.
Deze plugin werkt op je afbeeldingen om je site te versnellen, en het zorgt ook voor je thumbnails, avatars, achtergrondafbeeldingen, tekst, iframes (die je kunt vervangen door een image thumbnail), en al het andere dat de laadsnelheid zou kunnen verminderen.
Lazy Load van WP Rocket wordt regelmatig bijgewerkt om de functies up-to-date te houden en aan te passen aan andere geavanceerde plugins in zijn soort. Bovendien kun je het gebruiken op de nieuwste versie van je WordPress site en er andere moderne plugins naast installeren.
Lazy Loader
Laat je niet in verwarring brengen door de vergelijkbare plugin-namen – als je op zoek bent naar een eenvoudige plugin zonder toeters en bellen, overweeg dan Lazy Loader. Deze lazy loading plugin stelt het laden van below-the-fold afbeeldingen, iframes, video’s en audio-inhoud uit. Het zorgt ook voor het laden van achtergrondafbeeldingen, scripts, en pagina styling.
Voor meer geavanceerde gebruikers, Lazy Loader kunt u ook inschakelen / uitschakelen op bepaalde pagina-elementen en een spinner animatie toe te voegen aan het laden van inhoud.
Speed Up – Lazy Load
Zoals de naam al doet vermoeden, verhoogt deze plugin de snelheid van je site door afbeeldingen en iframes langzaam te laden. De installatie van Speed Up is zo eenvoudig als het maar kan – er is geen configuratie vereist en de plugin doet zijn werk zodra deze wordt geactiveerd.
Speed Up is een gratis en solide keuze voor gebruikers die lazy loading willen toepassen op alle afbeeldingen en iframes. Echter, degenen die behoefte hebben aan meer granulaire controle zullen waarschijnlijk een betere ervaring hebben met een andere plugin.
Lazy Load voor video’s
Websites met veel video’s kunnen kiezen voor de gratis Lazy Load for Videos-plugin, die speciaal is ontworpen voor het lazy loading van video’s. Deze plugin vervangt elke YouTube of Vimeo embed door een klikbare afbeeldingsvoorvertoning, waardoor uw gebruikers bovenaan kritische wachttijd besparen.
Naast het normale lazy loaden, Lazy Load voor Video’s wordt geleverd met een aantal extra’s die u zou kunnen waarderen. Om er een paar te noemen: je kunt je embeds zo instellen dat er automatisch een promotievideo voor je website wordt afgespeeld nadat de eerste video is afgelopen, annotaties en YouTube-besturingselementen verbergen voor een schoner uiterlijk, de stijl van de afspeelknop wijzigen en suggesties voor gerelateerde video’s verbergen nadat je video’s zijn afgelopen.
Laat lui laden het werk doen.
Uw WordPress website kan afhankelijk zijn van afbeeldingen en video’s, maar dat betekent niet dat uw snelheid een grote klap moet krijgen als gevolg daarvan. Door middel van de eigen WordPress lazy loading functie of met een gespecialiseerde plugin, kun je het laden van deze elementen uitstellen totdat de gebruiker ze nodig heeft. Ze worden dan wel “lazy” loading plugins genoemd, maar in feite werken ze achter de schermen hard om uw bezoekers de best mogelijke ervaring te bieden.
Opmerking van Arthur:
Dit bericht is oorspronkelijk gepubliceerd in december 2020 en is in 2021 bijgewerkt voor de volledigheid.
Meer info over snelheid WordPress webpagina’s
Meer info laadtijd WordPress webpagina‘s:
- Internet pagina analyse Gemiddelde grootte Html Mb Kb
- Langzame trage WordPress site oorzaken en oplossingen
- Lazy Load snel laden afbeeldingen snelheid WP plugin
- Caching cache instellen website Handleiding WP plugins
Meer tools naast Lazy loading om website sneller te maken
Meer tips en tools naast Lazy loading om website sneller te maken:
Time To First Byte (TTFB) verbeteren laadtijd pagina
Time-to-first-byte is één van de belangrijkste metrieken om in de gaten te houden. Maar wat…
Fonts lettertypes sneller laden strategie webdesign
Fonts en lettertypes wil je laden. In deze handleiding wil ik de beste laadstrategieën met…
Minify HTML CSS JavaScript bestanden kleiner maken SEO
Wat is minify of minificatie voor WordPress website Minificatie is het proces waarbij code en…
Verwijder ongebruikte CSS code verkleinen snel laden
Verwijder ongebruikte CSS Als je code in je stylesheets hebt die niet gebruikt wordt, waarom…
SVG WebP afbeeldingen bestandsformaat gebruiken website
Wat is een SVG bestand? Een SVG-bestand is een grafisch bestand dat gebruik maakt van…
Real User Monitoring -RUM gebruikers ervaring prestatie
Real User Monitoring tools helpen softwareteams bij het identificeren van front-end prestatieproblemen, het meten van…
Daarnaast is deze link handig om de snelheid van je website te meten en te analyseren:
Snelheid meten en analyseren WordPress website
Succes met het Lazy loading van je afbeeldingen en webpagina’s!
Handleidingen over Lazy loading
Meer handleidingen over afbeeldingen en lazy loading vind je hier:
Geen Lazy loading bij LCP afbeelding foto boven vouw
Niet Lazy loading voor Grootste Contentful Paint afbeelding Het lazy loading van uw LCP afbeelding…
NitroPack versnelt website Review WordPress plugin
NitroPack kan de laadtijd van je site enorm kan verbeteren wat weer goed is voor…