Pagespeed verbeteren met lazy loading: dit is hoe het werkt

Zoals je misschien wel weet werken afbeeldingen beter dan tekst, omdat het direct de aandacht van je bezoeker trekt. Veel websites staan daarom vol met afbeeldingen die een verhaal of product ondersteunen. Afbeeldingen hebben echter niet altijd een positief effect. Door te grote bestanden kan de laadtijd van een pagina erg toenemen. En laten jouw bezoekers daar nou net niet op staan te wachten..

Het team van Google Chrome is daarom bezig geweest met het toevoegen van nieuwe features aan Google Chrome 75. Benieuwd wat dat voor jou kan betekenen? Lees het hier. Snelheid is een belangrijk onderdeel van technische SEO, dus dit raakt direct je vindbaarheid.

Lazy loading van afbeeldingen

Addy Osmani, een Engineering Manager bij Google Chrome, plaatste een tweet waarin hij de nieuwe plannen voor de Google Chrome update deelde. "Native lazy-loading is coming to the web!"

Op zijn blog deelde hij vervolgens wat meer details over deze nieuwe functie. Hierin legt hij uit wat lazy loading inhoudt en wat dit voor invloed heeft op de snelheid van je website. Nu vraag jij jezelf waarschijnlijk af: wat is lazy loading?

Wat is lazy loading?

Er staan soms zoveel afbeeldingen op een pagina dat het een tijdje duurt voordat alle afbeeldingen geladen zijn. Hierdoor duurt het langer voordat een pagina volledig is geladen. Zonde, want sommige afbeeldingen zie je pas wanneer je een stuk naar beneden scrollt. En voor de SEO van je website is het ook niet erg goed om een lange laadtijd te hebben.

Daarom is het team van Google Chrome aan de slag gegaan met een nieuwe functie voor Google Chrome 75. Je kan hiermee code aan een afbeelding meegeven waarmee je aangeeft of een afbeelding direct geladen moet worden. Komt de afbeelding niet boven de vouw (above-the-fold van een pagina)? Dan kan je lazy loading toepassen door de volgende code toe te passen: \`img loading="lazy"\`.

Het effect op je laadtijd

Het mooiste aan lazy loading zie je terug in de laadtijd. Hieronder zie je illustratief wat er gebeurt met een afbeeldingsrijke pagina wanneer je lazy loading toepast: de pagina hoeft niet meer alle afbeeldingen in één keer op te halen, dus de initiële laadtijd daalt flink.

Het verschil tussen wel en niet lazy loading hangt sterk af van het aantal en de grootte van je afbeeldingen. Ter illustratie zie je hieronder hoe het effect groter wordt naarmate een pagina meer afbeeldingen bevat:

De waarden in de grafiek en tabel zijn illustratief en dienen alleen ter verduidelijking van het principe.

Google PageSpeed Insights Score

Google PageSpeed Insights is een gratis tool van Google die de snelheid van een website meet en aanbevelingen geeft voor verbetering. De tool scant je website en geeft een score tussen 0 en 100, waarbij een hogere score aangeeft dat de website sneller laadt. Een lage score betekent dus dat het een relatief trage website is. Deze score, ook wel bekend als de Google PageSpeed Insights score, is gebaseerd op verschillende factoren zoals laadtijd, interactiviteit en visuele stabiliteit.

Google PageSpeed Insights meet de laadtijd van je website op zowel de mobiel als de desktop versie en geeft gedetailleerde aanbevelingen om de snelheid te verbeteren. Door deze aanbevelingen op te volgen, kun je je Google PageSpeed score verhogen en zorgen voor een supersnelle website.

Hoe kan je lazy loading toepassen?

Deze nieuwe methode kan toegepast worden op afbeeldingen en iframes. Je kan hier een van de volgende drie waarden aan geven:

• Lazy: de afbeelding wordt geladen zodra de gebruiker naar beneden scrollt - \`img src="bestandsnaam" loading="lazy" alt=..\`
• Eager: de afbeelding wordt direct geladen - \`img src="bestandsnaam" loading="eager" alt=..\`
• Auto: hiermee laat je browser bepalen of een afbeelding direct geladen moet worden - \`img src="bestandsnaam" loading="auto" alt=..\`

Wat is het voordeel van lazy loading?

Stel dat jouw pagina 25 grote afbeeldingen bevat. Alle afbeeldingen moeten geladen worden, waardoor de pagespeed van een pagina hoger is. En dat terwijl 15 van deze afbeeldingen pas aan de onderkant van je pagina staan. Het is zonde dat de pagina zo lang bezig is met laden terwijl de bezoeker deze 15 afbeeldingen pas ziet als ze verder scrollen.

Door de waarde mee te geven aan afbeeldingen, geef je aan dat een afbeelding pas geladen hoeft te worden zodra de bezoeker richting de desbetreffende afbeelding scrollt. Dat betekent dat dus niet al je afbeeldingen direct geladen hoeven te worden, waardoor de laadtijd van de pagina afneemt. Score!

Google Chrome 75 is in de zomer van 2019 gelanceerd, wat betekent dat je deze tactiek zelf ook kan toepassen. Hulp nodig bij het implementeren van deze waarden aan je afbeeldingen? Wij staan klaar om je te helpen vanuit onze zoekmachine-optimalisatie. Vraag gerust een vrijblijvende aanvraag aan.

Wat is het nadeel van lazy loading?

Het enige nadeel van lazy loading is dat dit voor nu alleen mogelijk is binnen de browser Google Chrome. Naar verwachting zullen andere browsers zoals Safari en Firefox deze functie ook overnemen. Inmiddels is dat gelukt: ook Safari en Firefox ondersteunen native lazy loading, dus je kunt deze techniek met een gerust hart op je hele site toepassen.