Het WordPress-thema activeert wereldwijd lazyloading – inclusief op de hero-banner en de afbeelding die de Largest Contentful Paint definieert. Lighthouse mobile geeft een LCP van 4,2 seconden weer. Als u lazy op dit enkele beeld uitschakelt, daalt het LCP naar 1,8 seconden. Het team had ‘geoptimaliseerd’ door de belangrijkste bron voor de gebruiker en voor Google nauwkeurig uit te stellen.
Lui laden vertraagt het downloaden van een bron totdat deze de viewport nadert. Bij inhoud onder de vouw is het een gratis winst in bandbreedte en initiële laadtijd. Op het eerste scherm is het een meetbare – soms dramatische – verslechtering van het prestatiesignaal dat zoekmachines waarnemen.
De juiste vraag is daarom niet “moeten we lui laden?” » maar welke bron verdient het om als eerste aan te komen, en welke kan wachten tot de gebruiker scrollt.
Boven en onder de waterlijn
De basisregel is eenvoudig te formuleren en gemakkelijk te overtreden tijdens de productie: alles wat de gebruiker ziet zonder te scrollen, moet onmiddellijk worden geladen; de rest kan wachten.
| Element | Aanbevolen strategie |
|---|---|
| Beeldheld / LCP-kandidaat | loading="gretig" + fetchpriority="high" |
| Koptekstlogo | gretig, licht bestand, vooraf laden indien kritisch |
| Eerste productlijn- of paginaminiaturen | gretig of lui |
| Afbeeldingen onderaan de pagina | loading="lui" |
| Commentaaravatars, secundaire pictogrammen | lui |
In native HTML is de syntaxis direct:
<img src="product.webp" loading="lazy" decoding="async" width="800" height="600" alt="...">
Het uitstellen van het laden van het LCP-beeld optimaliseert de verkeerde volgorde van prioriteiten.
Veel thema's en plug-ins passen standaard lui toe op alle <img>-tags. Voordat u een algemene optie inschakelt, identificeert u het daadwerkelijke LCP-item via Search Console of Lighthouse. Het is niet altijd het beeld dat u zich voorstelt.
ophaalprioriteit, voorbelasting en afmetingen
Naast het 'loading' attribuut voltooien twee hefbomen de prioritering. fetchpriority="high" vertelt de browser om prioriteit te geven aan één LCP-kandidaatbron per pagina, meestal de heldafbeelding of de hoofdproductfoto.
Vooraf laden (<link rel="preload" as="image" href="hero.webp">) compenseert late ontdekking: bijvoorbeeld wanneer de LCP-afbeelding is gedefinieerd als een CSS-achtergrond in plaats van een <img>-tag. Vermijd dit laatste indien mogelijk: LCP-afbeeldingen in CSS zijn moeilijker te optimaliseren en te meten.
De attributen width en height blijven verplicht, lui of niet: ze reserveren ruimte vóór het laden en vermijden layout-offsets (CLS). Goed geconfigureerd lazyloading compenseert nooit ontbrekende afmetingen.
Iframes, kaarten en scripts van derden
Afbeeldingen zijn niet de enige middelen die op intelligente wijze kunnen worden teruggedrongen. Een ingebed YouTube-iframe laadt verschillende megabytes JavaScript zodra de pagina wordt weergegeven – veel meer dan het gewicht van een statische miniatuur.
Twee effectieve benaderingen:
- Lite-youtube façade (of gelijkwaardig): een voorbeeldafbeelding en een speler die met een klik wordt geladen.
loading="lazy"op het iframe als de gevel niet beschikbaar is.
Voor Google Maps is een statische afbeelding met een link naar de interactieve kaart vaak voldoende totdat de gebruiker klikt. Combineer lazyloading en cookie-toestemmingsbeheer voordat u trackers van derden laadt: het is zowel compliant als efficiënter.
CMS, thema's en veelvoorkomende valkuilen
WordPress 5.5+ maakt native lazyloading van afbeeldingen mogelijk. Gebruik de wp_lazy_loading_enabled filters of de skip-lazy klasse om hero en logo uit te sluiten. Shopify en WooCommerce verdienen dezelfde verificatie: de hoofdproductgalerij mag niet standaard lui zijn als deze het eerste scherm bezet.
Op een gedeelde site of VPS compenseert lui laden aan de voorkant soms trage hosting - maar het vervangt geen CDN of geschikte beeldcompressie. Vergelijk de aanbiedingen via onze overzicht als de TTFB ondanks een goed geconfigureerde lazy hoog blijft.
De top: lui als vervanging voor reflectie
Dit is wat de opties ‘Lazy Load All Images’ verbergen achter geruststellende bewoordingen.
Om het eerste scherm te versnellen, moet je soms een afbeelding eerder laden, en niet terugduwen. Het is contra-intuïtief, maar dat is wat LCP-metingen ter plaatse laten zien.
Beslis en ga vooruit zonder blinde vlek
Gedurende een halve dag kunt u lui laden weer in dienst stellen van echte prestaties. Identificeer eerst het LCP-element via Search Console of een mobiele Lighthouse-audit en noteer de exacte selector. Forceer gretig en fetchpriority="high" op dit element en sluit het vervolgens uit van de global lazy van het thema of de plug-in. Schakel lazyloading alleen in voor afbeeldingen onder de vouw en lange galerijen. Vervang zware iframes door click-to-load façades voor YouTube en kaarten. Controleer de breedte en hoogte van alle afbeeldingen om lay-outbreuken te voorkomen. Test ten slotte in realistische omstandigheden met WebPageTest in 4G-filmstrip: de held moet zichtbaar zijn vanaf het eerste frame.
Om hosting en CDN te vergelijken als het LCP ondanks correcte lui traag blijft, gebruikt u de prestaties van vergelijker en gidsen.
Veelgestelde vragen
Moet lazyloading standaard op alle afbeeldingen worden toegepast?
Nee. Elementen boven de vouw (held, logo, eerste zichtbare afbeelding) moeten onmiddellijk worden geladen. Lazyloading heeft betrekking op de inhoud die de gebruiker zal ontdekken tijdens het scrollen, niet op wat hij ziet wanneer hij aankomt.
native load="lazy" of aangepaste Intersection Observer?
Het native attribuut is in de overgrote meerderheid van de gevallen voldoende en vermijdt extra JavaScript. Een aangepast script is gerechtvaardigd voor geavanceerde tijdelijke aanduidingen (LQIP) of zeer specifieke laadregels – niet als systematische vervanging voor native.
Heeft lazyloading een SEO-impact?
Indirect wel, via het LCP en de Core Web Vitals. Het vertragen van het hoofdbeeld verslechtert de prestatiescore. Kritieke afbeeldingen moeten toegankelijk blijven zonder interactie of oneindig scrollen waardoor de inhoud verborgen zou blijven.
En voor YouTube- of Google Maps-iframes?
Combineer loading="lazy" en een façade die de speler alleen laadt als hij klikt. De impact op het paginagewicht is vaak groter dan die van het lui laden van afbeeldingen alleen.
Nuttig lui laden vertraagt wat onzichtbaar is – niet wat de gebruiker als eerste te zien kreeg.