De belangrijkste oorzaak van prestatieproblemen in webapplicaties en de noodzaak van Lazy Loading

In moderne webapplicaties zijn afbeeldingen een van de belangrijkste elementen die de gebruikerservaring (UX) en webprestaties beïnvloeden. Met de toename van het gebruik van hoge resolutie afbeeldingen en de groei van de hoeveelheid afbeeldingsinhoud op pagina's, is een afname van de laadsnelheid van websites een onvermijdelijk probleem geworden. Het laden van alle afbeeldingen tegelijk bij de initiële laadfase veroorzaakt de volgende ernstige prestatieknelpunten.

  • Verhoogt de initiële laadtijd (vertraging van FCP, LCP): Door ook afbeeldingen buiten het viewport te downloaden, wordt het moment waarop de gebruiker daadwerkelijk content kan zien (First Contentful Paint) en het moment waarop het grootste contentelement is geladen (Largest Contentful Paint) aanzienlijk vertraagd. Dit heeft ook een negatieve impact op de Core Web Vitals cijfers.

  • Onnodig bandbreedteverbruik: Gebruikers verspillen netwerkbronnen aan afbeeldingen die ze nietScrollingoon zien, wat de datakosten in een mobiele omgeving verhoogt en in een desktopomgeving andere belangrijke laads van bronnen verstoort door onnodige netwerkverzoeken.

  • Verhoogde serverbelasting: Het gelijktijdig optreden van verzoeken voor alle afbeeldingen legt een zware belasting op de server, wat kan leiden tot een verslechtering van de stabiliteit van de service.

Een van de meest effectieve strategieën om deze problemen op te lossen is Lazy Loading van afbeeldingen. Lazy Loading is een techniek die de afbeeldingen asynchroon laadt op het moment dat ze in het viewport van de gebruiker komen of wanneer een drempel is bereikt, in plaats van alle afbeeldingen bij de initiële laadfase in te laden.

De werking en toepassing van afbeelding Lazy Loading

Er zijn twee hoofdzakelijke manieren om Lazy Loading toe te passen, en het is belangrijk om de voor- en nadelen van elk te begrijpen en een keuze te maken die past bij de eisen van het project.

1. Native Lazy Loading van de browser (loading="lazy")

De eenvoudigste en krachtigste methode, die kan worden geïmplementeerd door simpelweg de loading="lazy" eigenschap aan de HTML <img> tag toe te voegen. De meeste moderne browsers ondersteunen dit en de browser zelf optimaliseert de manier waarop Lazy Loading wordt afgehandeld.

<img src="placeholder.jpg"
     data-src="actual-image.jpg"
     alt="Beschrijving van afbeelding"
     loading="lazy"
     width="500"
     height="300">

  • Voordelen:

    • Eenvoudige implementatie: Het kan worden toegepast door slechts een HTML-eigenschap toe te voegen zonder apart JavaScript.

    • Prestatie-optimalisatie: Aangezien het op het niveau van de browserengine wordt geïmplementeerd, kan het efficiënter en sneller werken dan JavaScript-gebaseerde oplossingen.

    • Verminderde belasting voor ontwikkelaars: De browser behandelt dit zonder complexe Intersection Observer API of evenementlistenerbeheer.

  • Nadelen:

    • Browserondersteuning: Niet alle legacy browsers ondersteunen het perfect (maar de meeste moderne browsers doen dat).

    • Gebrek aan gedetailleerde controle: Het is moeilijk voor ontwikkelaars om de laadparameters (drempel) of laadstrategieën nauwkeurig te beheersen.

Aanbeveling: Als er geen specifieke controlebehoeften zijn, is het aan te raden om Native Lazy Loading voorrang te geven.

2. JavaScript-gebaseerde Lazy Loading (gebruik van Intersection Observer API)

Als gedetailleerdere controle nodig is of als er een fallback vereist is voor browsers die de loading="lazy" eigenschap niet ondersteunen, kan JavaScript-gebaseerde Lazy Loading worden geïmplementeerd. Vroeger werd vooral de scroll-evenementlistener gebruikt, maar vanwege prestatieproblemen is het standaard geworden om de Intersection Observer API te gebruiken.

Basisimplementatielogica:

  1. In het begin moet de src eigenschap van de afbeelding een Placeholder-afbeelding worden ingesteld of de data-src eigenschap moet de werkelijke afbeeldings-URL opslaan.

  2. Een Intersection Observer instantie wordt gemaakt en de afbeeldingelementen worden geobserveerd.

  3. Wanneer een afbeeldingelement de viewport betreedt of een gedefinieerde drempel bereikt, wordt de observer-callback functie uitgevoerd.

  4. Binnen de callback functie wordt de werkelijke afbeeldings-URL die is opgeslagen in data-src verplaatst naar de src eigenschap om de afbeelding te laden.

  5. Zodra het laden van de afbeelding is voltooid, stopt het observeren van dat afbeeldingelement.

// HTML (voorbeeld)
// <img class="lazyload" data-src="actual-image.jpg" alt="Beschrijving">

// JavaScript
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    // lazyImage.srcset = lazyImage.dataset.srcset; // srcset indien nodig
                    lazyImage.classList.remove("lazyload");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        }, {
            // Root Margin: het gebied waarin de afbeelding vóór de randen van de viewport wordt geladen (px of %)
            // Bijvoorbeeld: "0px 0px 200px 0px" betekent dat er 200px onderaan wordt geladen
            rootMargin: "0px 0px 200px 0px"
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback voor browsers die IntersectionObserver niet ondersteunen
        // (bijvoorbeeld door gebruik te maken van scroll-evenementlisteners of door alle afbeeldingen onmiddellijk te laden)
        // Deze aanpak wordt prestatiegewijs niet aanbevolen, dus overweeg de belangrijke browsers die gericht zijn
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
        });
    }
});

  • Populaire JavaScript Lazy Loading bibliotheken:

    • lazysizes: Zeer lichtgewicht, SEO-vriendelijk en ondersteunt verschillende afbeeldingsformaten, inclusief srcset en picture. Het kan ook worden gebruikt als fallback voor Native Lazy Loading.

    • lozad.js: Biedt een kleine bundelgrootte en hoge prestaties.

Overwegingen en optimalisatietips bij het toepassen van Lazy Loading

Lazy Loading is een krachtige prestatieoptimalisatietechniek, maar het willekeurig toepassen op alle afbeeldingen kan de gebruikerservaring juist schaden.

  1. 'Above the Fold' afbeeldingsbeheer: Toepassing van Lazy Loading op afbeeldingen die onmiddellijk zichtbaar zijn op het initiële scherm (Above the Fold) moet worden vermeden. Deze afbeeldingen hebben directe invloed op de Largest Contentful Paint (LCP) van de pagina, dus ze moeten worden gedefinieerd met loading="eager" of worden uitgesloten van Lazy Loading om onmiddellijk te worden geladen.
<img src="logo.png" alt="Bedrijfslogo" width="100" height="50" loading="eager">

LCP breakdown analysis

  1. Vermelding van width en height eigenschappen: De width en height eigenschappen van de afbeelding moeten in HTML worden vermeld om layoutverschuivingen (Cumulative Layout Shift, CLS) te voorkomen. Dit stelt de browser in staat om ruimte voor de afbeelding te reserveren voordat deze is geladen, zodat de lay-out tijdens het laden niet springt. Dit is cruciaal voor de verbetering van Core Web Vitals-scores.

  2. Gebruik van placeholderafbeeldingen: Gebruik een vage afbeelding met lage resolutie of een effen achtergrondplaceholder om visuele leemtes voor gebruikers te verminderen voordat Lazy Loading-afbeeldingen zijn geladen. Dit helpt gebruikers te informeren dat de pagina aan het laden is.

  3. Gebruik van srcset en <picture> tags: Gebruik responsieve afbeeldingen (srcset) en afbeeldingsrichting (picture tag) in combinatie met Lazy Loading om afbeeldingen te bieden die zijn geoptimaliseerd voor verschillende schermgroottes en resoluties en om onnodig downloaden van afbeeldingen nog verder te verminderen.

<picture>
    <source srcset="image-large.webp" type="image/webp" media="(min-width: 1200px)" loading="lazy">
    <source srcset="image-medium.webp" type="image/webp" media="(min-width: 768px)" loading="lazy">
    <img src="placeholder.jpg" data-src="image-small.jpg" alt="Beschrijving" loading="lazy">
</picture>

Lighthouse performance score

Conclusie: prestaties en gebruikerservaring, twee vliegen in één klap met Lazy Loading

Afbeelding Lazy Loading is niet alleen het vertragen van het laden van afbeeldingen, maar ook een essentiële weboptimalisatietechniek die de aanvangsnelheid van de webpagina aanzienlijk verbetert, het gebruik van bandbreedte optimaliseert en de serverbelasting vermindert. Vooral met de toenemende focus op webprestatiesmetrics zoals Core Web Vitals is de strategische toepassing van Lazy Loading iets dat ontwikkelaars zeker in overweging moeten nemen.

Overweeg eerst Native Lazy Loading, maar als gedetailleerdere controle nodig is of specifieke browseromgevingen moeten worden ondersteund, overweeg dan de implementatie van JavaScript of het gebruik van bibliotheken die gebaseerd zijn op de Intersection Observer API. Bovendien kunnen optimalisatietips zoals het beheren van 'Above the Fold'-afbeeldingen, het specificeren van width/height, en het gebruik van placeholders tegelijkertijd toegepast worden om een snelle en aangename webervaring voor gebruikers te bieden.