menu
lightspeed ecommerce

Google Chrome past lazy loading toe

Lazy loading kan een enorme verbetering geven aan de laadtijd van je pagina’s, maar was tot voor kort soms best technisch om toe te passen. Google wil daar wat aan doen. Hierdoor hebben afbeeldingen die niet direct zichtbaar zijn, straks minder invloed op jouw laadtijd.

Webwinkeliers die actief bezig zijn met hun SEO zijn het ongetwijfeld al een keer tegengekomen: lazy loading. Hiermee kun je het inladen van afbeeldingen die niet direct zichtbaar zijn even uitstellen.

Wat doet lazy loading precies?

Webwinkels hebben op veel pagina’s vaak enorm veel plaatjes en vaak zijn die niet allemaal direct zichtbaar op het scherm. Denk aan grote overzichten met productafbeeldingen waarbij de meeste afbeeldingen onder de vouw staan, of pas zichtbaar zijn na het aanvinken van een menu of filter.

Al jaren kun je deze afbeeldingen pas laten inladen nadat het direct zichtbare deel van de pagina is geladen. Op die manier is de pagina voor de bezoeker sneller geladen. Daarna komen deze afbeeldingen aan de beurt. Zodra een bezoeker naar beneden scrollt zijn ze waarschijnlijk al zichtbaar, anders zal dat nu snel gebeuren.

Voordelen lazy loading

Naast dat de bezoeker de pagina sneller geladen heeft – wat veruit het grootste voordeel is want dit heeft meestal wel een positief effect op het gedrag van je bezoekers – heeft dit ook een positieve invloed op je SEO en gebruikt je website op deze manier minder serverkracht door het spreiden van het inladen van je site.

Lazy loading bestaat al even, maar was tot nu toe wel een technisch klusje dat een gemiddelde webwinkelier niet zo snel zelf kon uitvoeren. Je webdesigner moest het dus via het template of .css hebben geregeld. Hier komt verandering in.

Google Chrome gaat automatisch lazy loaden

Google gaat via Google Chrome vanaf versie 76 automatisch uit van lazy loading. Je kunt dit ook zelf forceren door bij een afbeelding het atribuut loading=”lazy” toe te voegen, net zoals je een alt-tag toevoegt. Je krijgt dan bijvoorbeeld:

Lazy loading code

Je kunt dit vrijwel overal toevoegen, want kwaad zal het niet direct kunnen. Een afbeelding zal alleen lazy laden wanneer deze niet direct zichtbaar is. Je kunt het ook forceren om deze direct te laden via loading=”eager” of de browser laten kiezen met loading=”auto”, al is dat niet nodig om toe te voegen aangezien afbeeldingen die niets meekrijgen op deze manier zullen worden verwerkt.

Wat moet je nu doen?

Wat is nu handig om te doen als Google dit doorvoert? Webwinkels die al lazy load gebruiken hoeven nog niets te doen. Aangezien de bovenste verandering nu alleen voor Google Chrome gaat gelden, is het beter om nog gebruik te maken van reguliere oplossingen.

Webwinkels die nog geen lazy load hebben en dat nog niet makkelijk konden toevoegen kunnen wel een tag meegeven om vast aan Chrome te laten zien dat het lazy inladen van afbeeldingen wel gewenst is. Al is dit dus ook niet noodzakelijk, omdat Google zelf het eigenlijk al standaard gaat kiezen.

Feitelijk hoef je technisch dus niets te doen om er gebruik van te maken. Webwinkels die nu beperkt afbeeldingen gebruikten of bewust pagina’s beperkt hielden qua aantallen producten of afbeeldingen vanwege de laadtijd kunnen wel even goed naar hun structuur kijken. Meer afbeeldingen of een langere pagina hebben straks weinig tot geen negatieve invloed op de laadtijd van je website.

De kans is groot dat andere browsers volgen en als meer of betere afbeeldingen geen invloed hebben op de laadtijd maar wél op je bezoekersgedrag, kan het zeker slim zijn om hier nog eens goed naar te kijken!

Tags

Reacties