Lazy load af billeder har været kendt i mange år. Helt basalt går det ud på kun at loade billeder på en hjemmeside, når der er brug for dem.
Forestil dig at du har en lang produktliste på din webshop. Der er måske 100 eller flere produkter på. Hvis brugeren skal loade alle produktbilleder i samme sekund de lander på siden, vil det går stærkt ud over hastigheden.
Som bruger er du jo ret ligeglad med at det du ikke kan se. Når du lander på en produktliste, ser du måske kun de første 10 produkter. Resten skal du scrolle ned for at kunne se. Alligevel vil browseren som standard loade alt, der er. Det giver unødig ventetid og det koster. Både på brugeroplevelsen, SEO og serveren.
Her kommer lazy load af billeder til sin rette. Med lazy load funktionalitet, loades billederne i takt med at du scroller ned af siden. Den loader altså først billederne når der er brug for dem, og i nogle tilfælde, lige lidt før, så der ikke kommer tomme billeder frem.
Det er smart, for det øger hastigheden på indlæsningen af din side, og brugeren mærker i de fleste tilfælde ikke noget. Kun at hastigheden og dermed brugeroplevelsen bliver forbedret markant.
Se det f.eks. her på Curvii’s side med Zhenzi.
Flere måder at lave lazy load på
Da lazy load lige kom frem, kunne man integrere funktionaliteten via javascript. Den metode har man brugt i mange år, med et rigtig godt resultat. Google har ligefrem anbefalet det, og man har fået straf for det i Google Page Speed tool, hvis man loadede billeder uden for synsfeltet eller viewporten som det hedder.
Man lavede ganske enkelt src-attributten om til en data-src, hvor stien til billedet blev lagt. Når så billedet kom inden for viewporten, blev data.src lavet om til src via javascript, og browseren genkendte det nu som en billedsti, og hentede billedet. Smart.
<img data-src"image.jpg" class="lazy-load" />
Det er dog et par ulemper ved det man skal være klar over. For det første bliver der ikke loadet nogle billeder, hvis brugeren har slået javascript fra. Det er ikke særlig hensigtsmæssigt på en webshop, hvor billederne jo gerne skal kunne sælge produktet.
For det andet er der også tvivl om Google bot’en kan og vil scrolle, så den faktisk kan registrere billederne. Den problematik slipper man for med den nye måde at integrere lazy load.
Browser supported lazy loading
Browser supported lazy loading eller native lazy loading, er en måde du kan lave lazy load uden javascript. Som med så meget andet, bliver mange funktionaliteter der startede eksternt, lige så stille integreret i nye browsere. Dette gælder nu også for lazy load.
Ved at benytte en almindelig src attribut og tilføje loading=”lazy” fortæller du browseren at billedet skal lazy-loades.
<img src"image.jpg" loading="lazy" />
Herefter er der op til browseren af definere hvornår billedet skal loades. Som fallback vil billedet blive loadet på normal vis, hvis brugeren har en browser der af en eller anden grund ikke understøtter dette. Der er altså ingen fare for at brugeren får tomme billeder, eller at Googles bot ikke kan se dem. Alt sammen en kæmpe win/win.
Husk dog på at de billeder der optræder i brugerens viewport, når de lige lander på siden, ikke skal lazy-loades, men blot loades på normal vis.