Pagespeed optimaliseren 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.

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!”

https://twitter.com/addyosmani/status/1114777583302799360?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1114777583302799360&ref_url=https%3A%2F%2Fwebleaders.nl%2Fpagespeed-optimaliseren-lazy-loading-dit-is-hoe-het-werkt%2F

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 pagespeed. 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”

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.

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.