Lazy load afbeeldingen zonder plugin

Lazy load afbeeldingen zonder plugin voor een betere page speed en Web Vitals. Door afbeeldingen niet direct te laden als de website wordt geopend geeft een zeer goede verbetering voor page speed. Alles dat je niet laad is natuurlijk een winst maar vooral afbeeldingen. In het algemeen zijn de afbeeldingen de grootste files die een website moet laden. Soms gebruiken mensen afbeeldingen van meer dan 1mb tot zelfs 10mb.

Met een simpel stukje script worden afbeeldingen geladen wanneer deze in beeld komen. Afbeelding die direct in beeld zijn mogen dus geen lazy load hebben want dat zou kunnen zorgen voor een hogere CLS, Cumulative Layout Shift, wat weer slecht is voor Web Vitals.

Veel mensen, vooral ontwerpers, vinden dat alle afbeeldingen haarscherp moeten zijn op de website. Het is mogelijk deze afbeeldingen te comprimeren maar dan nog zijn het grote afbeeldingen. Door het gebruik van lazy load win je niet alleen page speed maar ook je website wordt minder belast en er wordt minder van je bandbreedte gebruik gemaakt.

Alles dat je niet direct hoeft te laden is een winst voor page speed en Web Vitals. Lazy load is hier een goede optie voor.

Lazy load afbeeldingen zonder plugin

Hier gaat het om twee onderdelen. Een stukje javascript dat zorgt dat de afbeelding wordt getoond als het in het scherm komt. Dit is eventueel met een bepaalde offset. En er is het onderdeel hoe de HTML eruit moet zien zodat de het script weet welke afbeeldingen als lazy load geladen moeten worden.

JavaScript Lazy load

Plaats onderstaand stukje code in de footer van je website. Plaats het helemaal onderin maar voor de </body> tag. Op deze manier wordt het als laatst gelezen. Als je het zo direct in de HTML plaatst hoef je hiervoor ook geen aparte file te laden. Vergeet alleen niet om de code kleiner te maken.


<script type = "text/javascript">
document.addEventListener("DOMContentLoaded", function () {
    var lazyloadImages = document.querySelectorAll("img.my-lazy-load");
    var lazyloadThrottleTimeout;
    function lazyload() {
        if(lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout)
        }
        lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            lazyloadImages.forEach(function (img) {
                if(img.offsetTop < (window.innerHeight + scrollTop + 500)) {
                    img.src = img.dataset.src;
                    img
                        .classList
                        .remove('my-lazy-load')
                }
            });
            if(lazyloadImages.length == 0) {
                document.removeEventListener("scroll", lazyload);
                window.removeEventListener("resize", lazyload);
                window.removeEventListener("orientationChange", lazyload)
            }
        }, 20)
    }
    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload)
});
</script>
Deze JavaScript functie kijkt naar afbeeldingen die de class “my-lazy-load” heeft. Als men scrolt, afmeting aanpast of bijvoorbeeld veranderd van landscape view naar portrait view dan berekent deze code de positie van de afbeeldingen. In dit geval zorgt hij dat afbeeldingen die op 500px van het zichtbare scherm staat dat deze dan wordt geladen. Hiervoor is gekozen om te zorgen dat de afbeelding geheel of gedeeltelijk is geladen voor het in het scherm komt. Dit is veel mooier voor de bezoekers.

Bekijk dit eens op deze pagina. Herlaad de pagina en scrol langzaam naar beneden. Als je goed is zie je niet dat de afbeelding wordt geladen. Herlaad de pagina en scrol snel naar beneden, dan zie je dat de afbeelding wordt geladen.

Lazy load afbeeldingen zonder plugin Freelance website ontwikkeling

Op regel 12 kan je de offset in stellen door 500 te veranderen. Dit is de afstand verticaal in px.
Op regel 3 en 16 kan je zelf bepalen welke class je wilt gebruiken. Hier is gekozen voor my-lazy-load. Let op dat je dit dan ook in je HTML gebruikt.

Lazy load image in HTML

In je HTML kan je nu op de volgende manier je afbeeldingen plaatsen.


<img class="my-extra-class my-lazy-load" data-src="/pad/naar/mijn-lazy-load-afbeelding.png" alt="Mijn Lazy load afbeelding" width="600" height="400" >

Zorg dat je my-lazy-load vervangt voor de class die je in het JavaScript gebruikt. Merk ook op dat src is veranderd in data-src. Dit is om te zorgen dat de afbeelding niet wordt geladen als de pagina wordt geopend. Later zal dit worden aangepast zodat het wel geladen kan worden en de class zal verwijderd worden.

Hier zie je ook dat een class “my-extra-class” is geplaatst. Deze kan je gebruiken om de afbeelding vooraf een bepaalde achtergrond kleur te geven. Dit is mooier als de afbeelding wordt geladen terwijl het in beeld is. Men krijgt dan niet zomaar een lege plek in de website te zien.

Vergeet niet dat de afbeelding altijd gecomprimeerd moeten worden en de juiste afmeting heeft en dergelijken dat geëist worden voor page speed en Web Vitals. Ook als je lazy load gebruikt moet je zorgen dat de afbeelding snel geladen kunnen worden voor een betere bezoekerservaring op je website.

Vraag vrijblijvende een offerte aan.

Offert Aanvragen

Lazy load afbeeldingen met plugin

Er zijn voor WordPress en Joomla verschillende plugins te vinden die dit voor je kunnen doen. Let wel op dat de plugin er ook voor zorgt dat dit alleen wordt gedaan voor afbeeldingen die niet direct in beeld zijn. En een ander punt is ook dat ze niet te veel javascript gebruiken want sommige zetten de class en dergelijke bij het laden. Ook is belangrijk op te letten dat er geen extra jQuery nodig is want dat moet dan weer apart geladen worden.

Hier in dit voorbeeld is puur JavaScript gebruikt en hiervoor is dus geen jQuery nodig. Voor Jquery moet je weer een aparte file laden voordat je hiermee kan werken. Elke browser kan werken met Javascript zonder iets extra te hoeven laden op de website. Dit is dus een extra winst voor page speed.

Er zijn nog geen reacties. Wees de eerste..!!

Reageer

E-mailadres wordt niet gepubliceerd.
Verplichte velden zijn gemarkeerd met *

*
*
*