In deze blog post bespreken we hoe je lazyload correct kunt instellen voor afbeeldingen op je WordPress-website en hoe je problemen zoals zwarte blokken bij afbeeldingen kunt oplossen. De zwarte blokken worden meestal veroorzaakt door conflicterende instellingen. Volg daarom de onderstaande stappen om je afbeeldingen goed te laten laden zonder conflicten. Op de Digitale Site gebruik ik overigens de betaalde versie van WP Rocket.
Wat zijn de voordelen van het gebruik maken van lazyload van afbeeldingen. We zitten het even op een rij.
Lazy loading van afbeeldingen (zoals de featured images in WordPress) heeft deze voordelen:
- Snellere laadtijd: Alleen de afbeeldingen die op het scherm zichtbaar zijn, worden direct geladen. De rest wordt pas geladen als je naar dat deel van de pagina scrolt. Dit maakt de eerste weergave van de pagina veel sneller.
- Minder dataverkeer: Gebruikers downloaden minder data, vooral handig op mobiel of trage netwerken.
- Betere Core Web Vitals scores: Lazy loading kan helpen bij een hogere Google Pagespeed score, wat SEO-voordeel oplevert.
Maar, als de featured images als zwarte blokken verschijnen, dan is dat een probleem, niet een normaal gevolg van lazy loading. Dan gaat er iets fout, bijvoorbeeld:
- JavaScript fouten: Lazy loading is vaak afhankelijk van JS. Als een script crasht of ontbreekt, worden de afbeeldingen niet meer goed ingeladen.
- Foute instellingen in het theme of plugin: Sommige themes of plugins markeren een image als “lazy load”, maar zetten niet de juiste “src” of “srcset”, waardoor geen fallback afbeelding zichtbaar is.
- Browser-incompatibiliteit: Heel oude browsers ondersteunen
loading="lazy"niet goed (maar dat komt nauwelijks nog voor anno 2025).
Zwarte blokken zijn een fout in implementatie, niet een nadeel van lazy load zelf.
Lazyload heeft dus zeker voordelen voor performance en SEO, maar zwarte blokken horen daar natuurlijk niet bij. We doen nu eerst een checkin om het probleem af te pellen.
1. Controleer de HTML van een kapotte afbeelding
We kunnen bijvoorbeeld kijken in de browser (bijvoorbeeld Chrome) door rechts te klikken op een zwarte box en dan voor Inspecteren te kiezen. Wat staat er bij de img tag?
- Heeft de
<img>eensrc=""(leeg)? - Of zie je een
data-src=""(dat pas later geladen zou moeten worden)? - Staat er
loading="lazy"bij? - Staat er een foutmelding in de console van de Developer Tools?
Onderstaand een voorbeeld van zo’n image tag.
<img width="380" height="220" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAADcAQMAAABJQojTAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAACFJREFUaN7twQENAAAAwqD3T20PBxQAAAAAAAAAAAAALwYqHAABtsDFHQAAAABJRU5ErkJggg==" class="attachment-csco-thumbnail size-csco-thumbnail pk-lazyload wp-post-image" alt="Updaten PowerShell laatste versie" decoding="async" data-pk-sizes="auto" data-pk-src="https://www.digitalemels.nl/wp-content/uploads/2025/04/image-13-380x220.png" />2. Gebruik je een plugin voor lazy loading?
Bijvoorbeeld plugins zoals:
- WP Rocket
- Smush
- a3 Lazy Load
- Autoptimize
- LiteSpeed Cache
Sommige plugins laden de afbeeldingen niet correct als bijvoorbeeld de cache stuk is.
3. Test: lazy loading even uitzetten
Als je kort lazy loading uitschakelt:
- In WordPress 5.5+ zit standaard lazy loading op
<img>vialoading="lazy". - Sommige plugins voegen ook hun eigen lazy loading toe.
Je zou kunnen testen:
- In de plugin-instellingen (bijvoorbeeld Smush → Lazy Load uitzetten)
- Of in je theme code/plugin de
loading="lazy"tijdelijk verwijderen.
Kijken we of de afbeeldingen dan normaal laden, dan weten we zeker dat lazy loading de oorzaak is.
4. Is je WordPress theme up-to-date?
Soms zit het probleem in een verouderd theme dat niet goed omgaat met native lazy loading of bepaalde plugins.
1. De Basisinstellingen Controleren in de plugin WP Rocket
Als je de WP Rocket plugin gebruikt, begin dan met het uitschakelen van de lazyload-optie die door WP Rocket wordt aangeboden.
- Ga naar Instellingen > WP Rocket > Media.
- Zet de optie LazyLoad voor afbeeldingen uit.
- Dit voorkomt dat WP Rocket automatisch lazyload toepast op afbeeldingen.
2. Andere Plugins Controleren
Lazyload kan door meerdere plugins worden toegevoegd. Controleer daarom of er andere plugins zijn die lazyload implementeren:
- Plugins zoals Autoptimize, a3 Lazy Load, of Smush kunnen ook lazyload toepassen. Zet deze tijdelijk uit als je ze hebt.
3. Handmatige Aanpassing van Afbeeldingen in HTML
Controleer of afbeeldingen de juiste lazyload-instellingen gebruiken:
- Afbeeldingen die niet correct laadden, hadden meestal lazyload-classes zoals
lazyautosizesenpk-lazyloaded. Dit kon conflicteren met andere instellingen. - Verwijder deze extra lazyload-classes als ze niet nodig zijn.
- Zorg ervoor dat de afbeelding de
loading="lazy"-attribute heeft om native lazyload in de browser te gebruiken:
<img width="380" height="220" src="https://www.jouwsite.nl/afbeelding.jpg" class="wp-post-image" alt="Beschrijving afbeelding" decoding="async" loading="lazy">5. Cache Leegmaken en Harde Refresh
Na het aanpassen van instellingen, leeg altijd de cache van WP Rocket en Converter for Media:
- Ga naar de WP Rocket instellingen en klik op Cache legen.
- Voer een harde refresh uit in je browser door Ctrl + F5 (Windows) of Cmd + Shift + R (Mac) in te drukken om oude cache te omzeilen.
6. Testen in Incognito Modus
Controleer de wijzigingen in de incognito modus van je browser om ervoor te zorgen dat geen oude cache of instellingen invloed hebben op de test.
7. Het Resultaat
Als alles goed is ingesteld, zou de afbeelding nu correct moeten laden zonder de zwarte blokken en zonder conflicten met lazyload-plugins. De browser zal de afbeelding pas laden wanneer deze in het zicht van de gebruiker komt door de loading="lazy"-attribute.
Conclusie zwarte blokken en lazyload images
Met deze stappen kun je de lazyload-functionaliteit van je website correct instellen, zonder dat er conflicten ontstaan tussen verschillende plugins. Het uitschakelen van lazyload in WP Rocket en Converter for Media, gecombineerd met de juiste HTML-instellingen voor lazyload, zorgt ervoor dat je afbeeldingen probleemloos laden.
Tips voor verdere optimalisatie ter voorkoming van zware blokken in combinatie met lazyload
- Optimaliseer afbeeldingen door gebruik te maken van tools zoals Smush, Conververter for Media of Imagify om je afbeeldingen te comprimeren en de laadtijd verder te verbeteren.
- Zorg ervoor dat je alle caching leegt (in WP Rocket en andere plugins) wanneer je nieuwe instellingen aanbrengt.
Door deze stappen te volgen, zou je een betere gebruikerservaring moeten bieden met snellere laadtijden en zonder visuele onderbrekingen zoals zwarte blokken.
Troubleshooting zwarte blokken en lazyload
Je kunt heel gemakkelijk controleren of alle lazyload bij de tags zijn verdwenen is. Je gebruikt hiervoor de development tools van je browser.
<img width="380" height="220" src="https://www.digitalemels.nl/wp-content/uploads/2025/04/image-13-380x220.png" class="attachment-csco-thumbnail size-csco-thumbnail wp-post-image lazyautosizes pk-lazyloaded" alt="Updaten PowerShell laatste versie" decoding="async" data-pk-sizes="auto" data-pk-src="https://www.digitalemels.nl/wp-content/uploads/2025/04/image-13-380x220.png" sizes="152px">Er is dus nog steeds een vorm van lazyload zichtbaar. De zwarte blokken zijn wel weg want het conflict is als het goed is opgelost. Maar we willen het verder optimaliseren en we willen weten waar het vandaan komt. Je kunt nu dus kijken in de header van de pagina welke javascripts geladen wordt. In mijn geval was dat die met het WordPress theme mee geleverd wordt (PowerKit).
<link rel="stylesheet" id="powerkit-lazyload-css" href="https://www.digitalemels.nl/wp-content/plugins/powerkit/modules/lazyload/public/css/public-powerkit-lazyload.css?ver=2.9.7" media="all">Voor de duidelijkheid een plaatje van de header.
Nu is het natuurlijk de bedoeling om te kijken of de betreffende PowerKit plugin aangepast kon worden en lazy load uitgezet kon worden. Dat was het geval.
Als we nu de code gaan bekijken, zien we inderdaad geen lazy load meer. Nice!
<img width="380" height="220" src="https://www.digitalemels.nl/wp-content/uploads/2025/04/image-13-380x220.png" class="attachment-csco-thumbnail size-csco-thumbnail wp-post-image" alt="Updaten PowerShell laatste versie" decoding="async">We kunnen dus nu beslissen welke lazyload optie we willen laden; die vanuit het theme of die vanuit de plugin. We willen alleen niet dat een en ander conflicteert met elkaar want dan komt de black box weer terug.
Hopelijk helpt bovenstaande om conflicten tussen cachen, JavaScript, CSS en response tijden te voorkomen.
Meer informatie over de auteur van deze blog post vind je hier.
