Hoe offscreen-afbeeldingen in WordPress uit te stellen

We weten allemaal dat snelheid erg belangrijk is voor SEO en conversie. Door een website snel te maken, kan die website hoger scoren in Google. En het kan je lezers ook blij maken. Wie houdt er niet van een snelle website?

Maar wanneer u probeert een website te optimaliseren voor snelheid, kan dit tijdrovend zijn met zoveel dingen om te doen. Ik probeer meestal zo nu en dan mijn website te testen en ervoor te zorgen dat deze niet slecht presteert. Je weet nooit wat er nieuw is. In de wereld van SEO veranderen dingen heel vaak.

Als je je website hebt getest met tools zoals Google PageSpeed ​​Insight of Web.dev, is een van de waarschuwingen die je mogelijk krijgt: "Stel afbeeldingen buiten het scherm uit".

In dit artikel zal ik uitleggen wat dat betekent, je vertellen hoe je het kunt repareren en plug-ins aanbevelen die je kunt gebruiken om het te repareren.

Je moet echter weten dat, hoewel het uitstellen van afbeeldingen buiten het scherm de snelheid van je mobiele website kan verbeteren, de belangrijkste factoren die de snelheid beïnvloeden je hosting en thema zijn. Bij BloggingTools gebruiken we Cloudways omdat dit de snelste WordPress-hosting is. Als Cloudways te duur voor je is, zijn Bluehost of Hostinger goede alternatieven. Voor het thema gebruiken we het snelste WordPress-thema, GeneratePress.

Wat betekent offscreen-afbeeldingen uitstellen?

Offscreen-afbeeldingen uitstellen betekent het uitstellen van het laden van afbeeldingen die nog niet zichtbaar zijn voor de gebruiker. Hierdoor zal de browser zich concentreren op het laden van alleen wat nodig is en uiteindelijk om de website sneller te maken.

Als je veel afbeeldingen op je berichten of startpagina hebt, begint de browser onmiddellijk alles te laden wanneer een gebruiker je site bezoekt. Als de afbeeldingen veel zijn, kan het veel tijd kosten om de pagina aan de gebruiker weer te geven.

Maar wanneer u offscreen-afbeeldingen uitstelt, worden de afbeeldingen alleen geladen wanneer de gebruiker ernaartoe scrolt.

Houd er rekening mee dat u niet alleen afbeeldingen kunt uitstellen, maar dat de meeste van uw website-items ook kunnen worden uitgesteld totdat ze nodig zijn.

Hoe offscreen-afbeeldingen in WordPress uit te stellen

U kunt afbeeldingen buiten het scherm uitstellen door afbeeldingen lui te laden. Lazy loading zorgt ervoor dat afbeeldingen alleen worden geladen wanneer ze nodig zijn. Hierdoor wordt de website weer sneller.

Zodra u afbeeldingen en andere middelen kunt lui laden die voorkomen dat uw pagina snel laadt. De "offscreen-afbeeldingen uitstellen" van Google PageSpeed ​​Insight en andere testtools zullen verdwijnen.

Volg deze stappen om offscreen-afbeeldingen in WordPress uit te stellen:

1. Installeer een Lazy loading-plug-in

Er zijn veel lazy loading-plug-ins die gratis beschikbaar zijn in de WordPress-plug-in-directory. U kunt naar de plug-in gaan, nieuwe toevoegen en vervolgens lui laden typen. Installeer iedereen met goede recensies.

Maar je hoeft geen plug-in te installeren als je al plug-ins hebt die lui laden aankunnen. De meeste caching-plug-ins hebben lui laden. Controleer uw caching-plug-in voor luie laadopties. Plug-ins voor beeldoptimalisatie hebben meestal een luie laadoptie.

Ook als je Jetpack gebruikt en automatisch optimaliseert, hebben ze luie laadopties.

2. Activeer luie laadopties

Nadat u de plug-in hebt geïnstalleerd, moet u ervoor zorgen dat u de optie voor lui laden activeert. Als je een cache-plug-in hebt met een luie laadfunctie, zorg er dan voor dat je die optie activeert.

3. Wis je cache.

Zodra lui laden is geactiveerd, wis je je cache en dat is alles!

U kunt uw site opnieuw testen, de waarschuwing zou weg moeten zijn!

Offscreen-afbeeldingen uitstellen WordPress-plug-in

Plug-ins voor offsreen-afbeeldingen uitstellen zijn hetzelfde als plug-ins voor lui laden. Hier zijn enkele hieronder:

1. jetpack

Jetpack is een van de populairste WordPress-plugins met meer dan 5 miljoen actieve installaties. Als je Jetpack al hebt geïnstalleerd, hoef je geen extra plugin te installeren voor lazy loading.

Activeer eenvoudig lui laden in Jetpack. Om te activeren, ga naar Jetpack-instellingen en vervolgens onder het tabblad Prestaties, scroll naar beneden en schakel lui laden in.

2. Auto-optimalisatie

Autoptimize is een zeer populaire plugin voor prestatieverbetering. Als je Autoptimize gebruikt, hoef je geen aparte plugin voor lazy loading te installeren, omdat Autoptimize dezelfde functionaliteit biedt.

Ga naar Autoptimize-instellingen en klik vervolgens op het tabblad Afbeeldingen en schakel Lazy loading in.

3. WP Rocket

WP Rocket is de populairste premium WordPress caching plugin. Als je WP Rocket gebruikt, heb je geen andere plugins meer nodig, omdat lazy loading is ingeschakeld.

Ga naar WP Rocket-instellingen en klik vervolgens op media, van daaruit kun je lui laden inschakelen.

4. LiteSpeed-cache

Als je de LiteSpeed ​​Cache-plugin gebruikt , beschikt deze over een lazy loading-functie. Om deze te activeren, ga je naar het gedeelte 'Media' en daar kun je lazy loading inschakelen.

5. a3 luie lading

Als je alleen een plugin voor lazy loading nodig hebt, is a3 Lazy Load een goede keuze. Ga naar Plugins > Nieuwe toevoegen. Zoek naar a3 Lazy Load. Installeer en activeer de plugin. Ga vervolgens naar de plugininstellingen en activeer lazy loading.

Over het algemeen worden sommige thema's, sommige cache-plug-ins en sommige plug-ins voor beeldoptimalisatie geleverd met een functie voor lui laden.

Veelgestelde vragen (FAQ's)