Hoe offscreen-afbeeldingen in WordPress uit te stellen

We weten allemaal dat snelheid erg belangrijk is SEO en conversie. Door een website snel te maken, kan die website hoger scoren in Google. En het kan uw 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 gecontroleerd via snelheidstesttools zoals Google PageSpeed ​​Insight of Web.dev, is een van de waarschuwingen die u kunt krijgen, "offscreen-afbeeldingen uitstellen".

In dit artikel zal ik uitleggen wat dat betekent, vertellen hoe je het probleem kunt oplossen en aanbevelingen doen plugins je kunt gebruiken om het te repareren.

U moet echter weten dat het uitstellen van afbeeldingen buiten het scherm uw mobiele snelheid kan verhogen. De belangrijkste factoren die uw snelheid beïnvloeden, zijn uw hosting en thema. Hier bij BloggenGereedschap, we gebruiken Cloudways omdat het de snelste WordPress-hosting is. Als u Cloudways niet kunt betalen, zijn Bluehost of Hostinger goede opties. Voor Thema gebruiken we de snelste WordPress-thema bekend als 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 meest populaire WordPress-plug-ins met meer dan 5 miljoen actieve installaties. Als je Jetpack al hebt geïnstalleerd, hoef je geen extra plug-in te installeren voor lui laden.

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 prestatie-plug-in. Als u Autoptimize gebruikt, is het niet nodig om een ​​plug-in voor lui laden te installeren, aangezien Autoptimize dezelfde functie heeft.

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-plug-in. Als je WP Rocket gebruikt, heb je geen andere plug-in nodig, ze hebben lazyloading ingeschakeld.

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

4. LiteSpeed-cache

Als u de LiteSpeed ​​Cache-plug-in, Het heeft een luie laadfunctie. Om te activeren, navigeert u eenvoudig naar het mediagedeelte en daar kunt u lui laden inschakelen.

5. a3 luie lading

Als je alleen een plug-in nodig hebt voor alleen Lazy loading, dan a3 luie lading is daar een goede plug-in voor. Ga gewoon naar plug-in > nieuwe toevoegen. Zoek naar a3 Lazy Load. Installeren en activeren. Ga dan naar plugin-instellingen 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)