Hvad er lazy loading, og hvordan virker det?

Ikke alle billeder på en side behøver at blive indlæst på samme tid. Lazy loading af billeder udskyder download af billeder, der ikke er synlige endnu i den besøgendes visningsfelt, så browseren koncentrerer sig om det indhold, den besøgende faktisk kan se, i stedet for at indlæse hele siden på én gang. På sider med mange billeder kan den ændring alene mindske den første indlæsningstid markant og forbedre de tal, der betyder noget både for besøgendes oplevelse og for placeringer i søgning. Denne artikel forklarer, hvad lazy loading er, hvordan det virker teknisk, hvad der bør og ikke bør indlæses med lazy loading, og hvordan det påvirker point for Core Web Vitals.

Når en browser indlæser en side uden lazy loading, downloader den alle billeder på siden, uanset om nogen af dem er synlige endnu. En besøgende, der åbner en side og med det samme forlader den igen, udløser stadig download af alle billeder under det synlige område. Det er spildt båndbredde, og det gør indlæsningen af alt i det synlige område, som den besøgende faktisk ser, langsommere. Lazy loading ændrer det, så kun det indhold, der er i visningen lige nu, bliver downloadet. Du kan læse, hvordan det passer ind i det bredere billede af hastighed i indlæsningen, i artiklen om hvordan du mindsker indlæsningstiden på din hjemmeside.

Hvad er lazy loading?

Lazy loading er en teknik, der udskyder indlæsningen af ressourcer, der ikke er afgørende, til de skal bruges. For billeder betyder det, at et billede ikke bliver downloadet, før den besøgende ruller tæt på det. I stedet for at browseren beder om alle billeder, når siden indlæses, beder den kun om de billeder, der er synlige eller ved at blive det, mens den besøgende bruger siden.

Hvad lazy loading ændrer ved forløbet i indlæsningen

• Uden lazy loading: browseren beder om alle billeder, når siden først indlæses, uanset om de er i visningsfeltet
• Med lazy loading: browseren beder kun om billeder, der er i eller tæt på det nuværende visningsfelt. De øvrige bliver hentet, efterhånden som den besøgende ruller hen mod dem
• Den samlede mængde data, der overføres, når man ruller hele siden igennem, er den samme, men den første indlæsning er markant lettere
• Besøgende, der ikke ruller længere end et bestemt punkt på en side, udløser aldrig download af billeder, de aldrig når frem til

Hvordan virker lazy loading teknisk?

Der er to måder at bruge lazy loading på billeder: den indbyggede attribut i browseren og løsninger med JavaScript.

Indbygget lazy loading

• Alle de store browsere understøtter indbygget lazy loading gennem attributten loading="lazy", som du tilføjer direkte i billedets tag
• Du behøver ikke JavaScript eller eksterne biblioteker. Browseren klarer indlæsningen selv
• Det er nu standardmetoden til lazy loading af billeder på nettet, og den kræver kun lidt teknisk viden
• Browseren afgør, hvornår den begynder at indlæse et billede, ud fra hvor langt det er fra visningsfeltet, en grænse der varierer lidt mellem browsere

Lazy loading med JavaScript

• Før indbygget lazy loading blev bredt understøttet, brugte udviklere JavaScript-biblioteker, der fulgte med i, hvor langt nede på siden man var, og udløste indlæsning af billeder, når de kom ind i visningsfeltet
• Intersection Observer API er standardmetoden med JavaScript og opdager, når et element kommer ind i eller forlader visningsfeltet, uden at skulle lytte efter scrollhændelser
• Lazy loading med JavaScript bruges stadig til mere komplicerede situationer, for eksempel lazy loading af baggrundsbilleder, der er sat i CSS, eller af video
• Til almindelige billedelementer er indbygget lazy loading med loading="lazy" enklere og mere pålideligt

Hvad kan ellers indlæses med lazy loading end billeder?

Iframes

• Attributten loading="lazy" virker også på iframes i alle de store browsere
• Indlejrede kort, formularer og indhold fra tredjeparter i iframes kan udskydes, til den besøgende ruller hen til dem
• Det er især nyttigt på sider med indlejrede kort eller widgets fra tredjeparter nederst på siden, fordi de ofte kræver tunge eksterne scripts

Video

• Videofiler er markant større end billeder og kan have stor betydning for den første indlæsningstid, når de ligger under det synlige område
• Lazy loading af video kræver en løsning med JavaScript, fordi den indbyggede attribut loading ikke gælder for videoelementer
• En almindelig metode er kun at indlæse et miniaturebillede eller et plakatbillede først og begynde at indlæse videofilen, når den besøgende bruger den eller ruller hen til den

Komponenter og afsnit

• I applikationer med meget JavaScript kan hele afsnit eller komponenter på en side indlæses med lazy loading, så deres kode og indhold ikke bliver hentet, før den besøgende når til den del af siden
• Det er en avanceret teknik, der bruges i komplekse webapplikationer, og den bliver typisk klaret af frameworket og ikke lavet i hånden

Hvad bør ikke indlæses med lazy loading?

Lazy loading forbedrer ydeevnen, når det bruges rigtigt, men hvis du bruger det det forkerte sted, giver det problemer i stedet for at løse dem.

Billeder i det synlige område

• Hovedbilledet, logoet eller andet fremtrædende visuelt indhold, der er synligt, når siden først åbner, skal indlæses med det samme
• Hvis du bruger lazy loading på billeder i det synlige område, forsinker det LCP, og det forværrer point for Core Web Vitals og de besøgendes oplevelse
• Reglen er enkel: Alt, der er synligt uden at rulle, skal indlæses med det samme. Alt under det synlige område kan indlæses med lazy loading

Billeder tæt på kanten af det synlige område

• Billeder lige under det synlige område kan dukke hurtigt op, når den besøgende begynder at rulle. Hvis lazy loading bruges for hårdt, kan de billeder stadig være ved at indlæse, når den besøgende når dem, så en blank plads kort er synlig
• Indbygget lazy loading løser det ved at bruge en grænse og begynde at indlæse billeder, før de er helt inde i visningsfeltet, i stedet for at vente til sidste øjeblik

Vigtigt indhold på sider, der indlæses hurtigt

• På sider med meget lidt indhold og kun få billeder er indlæsningen allerede hurtig. Her giver lazy loading mere kompleksitet uden en meningsfuld gevinst
• Lazy loading er mest værd på sider med mange billeder eller langt indhold, man ruller igennem

Hvordan påvirker lazy loading Core Web Vitals?

Lazy loading har direkte effekt på to af Core Web Vitals og ingen effekt på det tredje, når det bruges rigtigt.

Largest Contentful Paint (LCP)

• Lazy loading bør aldrig bruges på det element, der sandsynligvis er kandidaten til LCP, typisk hovedbilledet
• Når det bruges rigtigt, mindsker lazy loading antallet af ressourcer, der konkurrerer om båndbredden under den første indlæsning, og det kan forbedre LCP, fordi indholdet i det synlige område kan indlæses hurtigere
• Hvis det bruges forkert på billeder i det synlige område, forværrer lazy loading direkte LCP ved at forsinke det største synlige element

Interaction to Next Paint (INP)

• Når færre billeder indlæses først, er der mindre aktivitet på nettet, der konkurrerer med kørsel af JavaScript i det kritiske vindue under indlæsningen
• Det kan indirekte mindske blokering af hovedtråden og forbedre point for INP på sider, der tidligere indlæste mange billeder på samme tid

Cumulative Layout Shift (CLS)

• Lazy loading påvirker ikke CLS direkte, men billeder med lazy loading uden fastsat bredde og højde kan give skift i layoutet, når de indlæses
• Sæt altid faste mål på billeder med lazy loading, så browseren afsætter den rigtige plads, før billedet indlæses

Du kan læse en fuld gennemgang af, hvordan LCP, INP og CLS får point, og hvad grænserne er, i artiklen om hvad Core Web Vitals er.

Påvirker lazy loading SEO?

Når det bruges rigtigt, skader lazy loading ikke SEO og kan bidrage til bedre placeringer i søgning gennem bedre point for hastighed.

Sådan behandler søgemaskiner indhold med lazy loading

• Søgemaskiners crawlere viser sider på samme måde som browsere og kan indeksere indhold, der indlæses med lazy loading
• Billeder med lazy loading kan stadig crawles og kan vises i søgeresultater for billeder
• Fordelen for SEO kommer først og fremmest af de forbedringer af hastighed, lazy loading gør mulige. Sider med bedre point for Core Web Vitals, som lazy loading kan hjælpe med at forbedre, har en fordel i rangeringen

Alt-tekst gælder stadig

• Billeder med lazy loading skal have den samme alt-tekst som alle andre billeder. Attributten alt bør udfyldes med en beskrivelse af billedet, uanset om det indlæses med lazy loading
• Du kan læse vejledning i at skrive god alt-tekst i artiklen om hvordan du bruger billeder på din hjemmeside

Hvordan tilføjer du lazy loading til din hjemmeside?

For enkelte billeder i HTML

• Tilføj loading="lazy" til alle billedtags, der ligger under det synlige område
• Sørg for, at hvert billede med lazy loading har faste attributter for width og height, så layoutet ikke skifter, når billederne indlæses
• Tilføj ikke loading="lazy" til hovedbilledet eller billeder, der er synlige uden at rulle

Gennem din platform til hjemmesider

• Mange hjemmesidebyggere bruger automatisk lazy loading på billeder under det synlige område uden at kræve, at du gør det i hånden
• Tjek platformens dokumentation om ydeevne for at se, om det bliver klaret automatisk, før du tilføjer det i hånden

Du kan læse en komplet vejledning i at optimere billeder ud over lazy loading, blandt andet filformater, komprimering og responsive størrelser, i artiklen om hvordan du optimerer billeder, så de indlæses hurtigere.

Sådan håndterer WEMASY lazy loading

WEMASY's hjemmesidebygger bruger automatisk lazy loading på billeder under det synlige område på alle sider. Billeder i det synlige område, blandt andet hovedbilleder og alt indhold, der er synligt uden at rulle, er holdt uden for lazy loading, så de vises med det samme. Billeder bliver også leveret med fastsatte mål som standard, og det forhindrer skift i layoutet, når billeder med lazy loading indlæses på deres plads.

Lazy loading virker sammen med komprimering af billeder og levering via CDN i alle WEMASY-planer. De tre forbedringer sammen mindsker både sidens vægt ved første indlæsning og leveringstiden for billeder, og det bidrager direkte til hurtigere LCP og bedre point for Core Web Vitals i analytics-dashboardet.

Se, hvad der er med, hos WEMASY hjemmesidebygger, eller se planerne på prissiden.

Ofte stillede spørgsmål