Vad är lazy loading och hur fungerar det?

Alla bilder på en sida behöver inte laddas samtidigt. Lazy loading av bilder skjuter upp nedladdningen av bilder som ännu inte syns i besökarens visningsområde, så att webbläsaren fokuserar på innehållet som besökaren faktiskt kan se i stället för att ladda hela sidan på en gång. För sidor med många bilder kan den här ändringen ensam minska den första laddtiden rejält och förbättra de mått som spelar roll för både besökarnas upplevelse och sökplaceringarna. Den här artikeln förklarar vad lazy loading är, hur det fungerar tekniskt, vad som bör och inte bör laddas med lazy loading och hur det påverkar poängen för Core Web Vitals.

När en webbläsare laddar en sida utan lazy loading laddar den ner varje bild på sidan oavsett om någon av dem syns än. En besökare som öppnar en sida och direkt lämnar den utlöser ändå nedladdningen av varje bild nedanför det som syns utan scrollning. Det är bortslösad bandbredd, och det gör att allt som syns utan scrollning, det besökaren faktiskt ser, laddas långsammare. Med lazy loading laddas bara innehållet som just nu syns. Sammanhanget om hur det här passar in i helhetsbilden av sidans laddhastighet finns i artikeln om hur du minskar sajtens laddtid.

Vad är lazy loading?

Lazy loading är en teknik som skjuter upp laddningen av resurser som inte är kritiska tills de behövs. När det gäller bilder betyder det att en bild inte laddas ner förrän besökaren scrollar nära den. I stället för att webbläsaren begär varje bild när sidan laddas begär den bara de bilder som syns eller snart kommer att synas när besökaren interagerar med sidan.

Vad lazy loading ändrar i laddningsförloppet

• Utan lazy loading: webbläsaren begär alla bilder när sidan först laddas, oavsett om de finns i visningsområdet
• Med lazy loading: webbläsaren begär bara bilder som finns i eller nära det aktuella visningsområdet. De övriga begärs när besökaren scrollar mot dem
• Den totala mängd data som överförs under en hel scrollning genom sidan är densamma, men den första laddningen är betydligt lättare
• Besökare som inte scrollar förbi en viss punkt på en sida utlöser aldrig nedladdningen av bilder som de inte når

Hur fungerar lazy loading tekniskt?

Det finns två sätt att införa lazy loading för bilder: webbläsarens inbyggda attribut och lösningar baserade på JavaScript.

Inbyggd lazy loading

• Alla större webbläsare stöder inbyggd lazy loading via attributet loading="lazy" som läggs direkt i bildtaggen
• Inget JavaScript eller inga externa bibliotek behövs. Webbläsaren sköter laddningsbeteendet själv
• Det här är numera standardsättet för lazy loading av bilder på webben och kräver minimal teknisk kunskap att införa
• Webbläsaren avgör när den ska börja ladda en bild utifrån dess avstånd från visningsområdet, en gräns som varierar något mellan webbläsare

Lazy loading baserad på JavaScript

• Innan inbyggd lazy loading var allmänt stödd använde utvecklare JavaScript-bibliotek som bevakade scrollpositionen och utlöste bildladdning när bilderna kom in i visningsområdet
• Intersection Observer API är det vanliga JavaScript-sättet och upptäcker när ett element kommer in i eller lämnar visningsområdet utan att förlita sig på lyssnare för scrollhändelser
• Lazy loading baserad på JavaScript används fortfarande i mer komplexa fall, till exempel lazy loading av bakgrundsbilder som anges i CSS eller av videoinnehåll
• För vanliga bildelement är inbyggd lazy loading med loading="lazy" enklare och mer pålitlig

Vad kan laddas med lazy loading förutom bilder?

Iframes

• Attributet loading="lazy" fungerar också på iframes i alla större webbläsare
• Inbäddade kartor, formulär och innehåll från tredje part i iframes kan skjutas upp tills besökaren scrollar dit
• Det är särskilt användbart för sidor med inbäddade kartor eller widgetar från tredje part längst ner på sidan, eftersom de ofta innebär tunga externa skript

Video

• Videofiler är betydligt större än bilder och kan ha stor effekt på den första laddtiden när de placeras nedanför det som syns utan scrollning
• Lazy loading av video kräver en lösning med JavaScript, eftersom det inbyggda attributet loading inte gäller videoelement
• Ett vanligt sätt är att först bara ladda en miniatyrbild eller en affischbild och börja ladda videofilen först när besökaren interagerar med den eller scrollar dit

Komponenter och sektioner

• I JavaScript-tunga applikationer kan hela sidsektioner eller komponenter laddas med lazy loading, vilket betyder att deras kod och innehåll inte hämtas förrän besökaren når den delen av sidan
• Det är en avancerad teknik som används i komplexa webbapplikationer och som oftast sköts av ramverket i stället för att införas manuellt

Vad ska inte laddas med lazy loading?

Lazy loading förbättrar prestandan när det används rätt, men om det används på fel ställe skapar det problem i stället för att lösa dem.

Bilder som syns utan scrollning

• Hjältebilden, logotypen eller annat framträdande visuellt innehåll som syns när sidan först öppnas måste laddas direkt
• Om du använder lazy loading på bilder som syns utan scrollning fördröjs LCP, vilket försämrar poängen för Core Web Vitals och besökarnas upplevelse
• Regeln är enkel: allt som syns utan att scrolla ska laddas direkt. Allt nedanför kan laddas med lazy loading

Bilder nära gränsen för det som syns

• Bilder strax under det synliga området kan dyka upp snabbt när besökaren börjar scrolla. Om lazy loading används för aggressivt kan de här bilderna fortfarande laddas när besökaren når dem, så att en tom platshållare syns en kort stund
• Inbyggd lazy loading hanterar det genom att använda en gräns och börja ladda bilder innan de är helt inne i visningsområdet i stället för att vänta till sista stund

Kritiskt innehåll på sidor som laddar snabbt

• På sidor med mycket lite innehåll och bara några få bilder är laddningsförloppet redan snabbt. Lazy loading lägger i de fallen till komplexitet utan märkbar nytta
• Lazy loading är mest värdefullt på sidor med många bilder eller långt innehåll som går att scrolla

Hur påverkar lazy loading Core Web Vitals?

Lazy loading har en direkt effekt på två av måtten i Core Web Vitals och ingen effekt på det tredje när det används rätt.

Largest Contentful Paint (LCP)

• Lazy loading ska aldrig användas på elementet som sannolikt är LCP-kandidaten, oftast hjältebilden
• När det används rätt minskar lazy loading antalet resurser som konkurrerar om bandbredd under den första laddningen, vilket kan förbättra LCP genom att innehållet som syns utan scrollning laddas snabbare
• När det används fel på bilder som syns utan scrollning försämrar lazy loading direkt LCP genom att fördröja det största synliga elementet

Interaction to Next Paint (INP)

• Om färre bilder laddas från början blir det mindre nätverksaktivitet som konkurrerar med körningen av JavaScript under det kritiska laddningsfönstret
• Det kan indirekt minska blockeringen av huvudtråden och förbättra INP-poängen på sidor som tidigare laddade många bilder samtidigt

Cumulative Layout Shift (CLS)

• Lazy loading påverkar inte CLS direkt, men bilder med lazy loading som saknar angiven bredd och höjd kan orsaka layoutförflyttningar när de laddas
• Ange alltid uttryckliga mått på bilder med lazy loading så att webbläsaren reserverar rätt utrymme innan bilden laddas

En fullständig genomgång av hur LCP, INP och CLS poängsätts och vilka gränserna är finns i artikeln om vad Core Web Vitals är.

Påverkar lazy loading SEO?

När det införs rätt skadar lazy loading inte SEO och kan bidra till bättre sökresultat genom bättre poäng för sidhastighet.

Hur sökmotorer hanterar innehåll med lazy loading

• Sökmotorernas robotar renderar sidor på liknande sätt som webbläsare och kan indexera innehåll som laddas med lazy loading
• Bilder som laddas med lazy loading går fortfarande att genomsöka och kan dyka upp i bildsökningen
• SEO-nyttan kommer främst från hastighetsförbättringarna som lazy loading möjliggör. Sidor med bättre poäng för Core Web Vitals, som lazy loading kan hjälpa till att förbättra, har en rankingfördel

Alt-text gäller fortfarande

• Bilder med lazy loading kräver samma alt-text som alla andra bilder. Alt-attributet ska fyllas i med en beskrivning av bilden oavsett om den laddas med lazy loading
• Råd om hur du skriver effektiv alt-text finns i artikeln om hur du använder bilder på din sajt

Hur lägger du till lazy loading på din sajt?

För enskilda bilder i HTML

• Lägg till loading="lazy" i varje bildtagg som ligger nedanför det som syns utan scrollning
• Se till att varje bild med lazy loading har uttryckliga attribut för width och height för att förhindra layoutförflyttningar när bilderna laddas
• Lägg inte till loading="lazy" på hjältebilden eller någon bild som syns utan att scrolla

Via din sajtplattform

• Många sajtbyggare använder lazy loading automatiskt på bilder nedanför det som syns utan scrollning, utan att du behöver göra något manuellt
• Kolla plattformens dokumentation om prestanda för att bekräfta om det sker automatiskt innan du lägger till det manuellt

En fullständig guide till att optimera bilder utöver lazy loading, bland annat filformat, komprimering och responsiv storlek, finns i artikeln om hur du optimerar bilder för snabbare laddning.

Så hanterar WEMASY lazy loading

WEMASY:s webbplatsbyggare använder automatiskt lazy loading på bilder nedanför det som syns utan scrollning på alla sidor. Bilder som syns utan scrollning, bland annat hjältebilder och allt innehåll som syns utan att scrolla, undantas från lazy loading så att de renderas direkt. Bilder levereras också med angivna mått som standard, vilket förhindrar layoutförflyttningar när bilder med lazy loading laddas på plats.

Lazy loading fungerar tillsammans med bildkomprimering och CDN-leverans i varje WEMASY-plan. De här tre förbättringarna minskar tillsammans både den första sidvikten och leveranstiden för bilder, vilket direkt bidrar till snabbare LCP och bättre poäng för Core Web Vitals i analyspanelen.

Se vad som ingår på WEMASY:s webbplatsbyggare, eller titta på planerna på prissidan.

Vanliga frågor