Lazy loading
Når det handler om at bruge platforme på nettet som websites, bliver indlæsningshastighed og optimering helt afgørende, for brugerne kræver mere og mere fart og reaktionsevne.
Derfor får designmønsteret lazy loading større og større betydning. Men hvad er lazy loading (udskudt indlæsning) egentlig?
Det ser vi på herunder.
Hvad er lazy loading?
Helt konkret er lazy loading en teknik, et designmønster i programmering brugt på websites, hvor elementer og ressourcer ikke hentes fuldt ud, men i stedet køres undervejs eller efter behov i takt med, hvordan brugeren bruger siden — altså en »udskudt indlæsning« af indholdet.
På den måde bliver ressourcerne optimeret, og indhold som tekst, videoer, billeder og andet materiale hentes først, når der er brug for det, hvilket forbedrer hastighed, hukommelses- og processorforbrug, reaktionsevne og indlæsningstider. Det står i modsætning til fuld indlæsning, hvor et site eller en side hentes helt, selvom brugeren ikke bruger hvert eneste element.
Generelle fordele ved lazy loading
Da hovedformålet med lazy loading er at hente elementer, først når de bruges, er der flere fordele, der kan koges ned til:
- Fart på visningen af de vigtigste elementer på et website.
- Tydelig forbedring af brugeroplevelsen på sitet (UX).
- Bedre performance på mobile enheder, især når de har begrænset netværksforbindelse; er lazy loading slået til, kan man browse på sider, som ellers ville være umulige med så dårlig dækning.
- Samlet optimering af ressourcer som CPU, RAM og batteri på mobile enheder.
- At tiden på vores sider stiger, fordi der ikke er problemer med indlæsningen, giver indirekte bedre placeringer.
- Lavere afvisningsprocent.
På samme måde har lazy loading som programmeringstilgang fordele og nyheder set fra en mere teknisk vinkel, for eksempel:
- Lazy loading er fuldt kompatibel med JS-frameworks som React og Angular og med CMS-platforme som WordPress. Faktisk er det for nylig blevet meldt ud, at lazy loading af billeder kommer med som standard i WordPress version 5.5.
- Takket være IntersectionObserver-API'et skjuler det ikke billeder for søgemaskinerne.
- Understøttelse af flere indholdstyper som billeder og responsive ressourcer.
- Det lader sitets billeder blive indekseret, hvilket er afgørende for SEO.
- Det er en 100% SEO-venlig løsning, fordi den direkte og indirekte forbedrer mange vigtige punkter i SEO.
Hvordan laver man lazy loading i WordPress?
Ligger vores site på WordPress, har vi en stor fordel, for der findes mange løsninger til at lægge lazy loading på vores sider, så de hentes meget hurtigere. Skærmbilledet herunder viser nogle af de mulige løsninger i plugin-biblioteket:
Overblik over de mest fremtrædende WordPress-plugins til lazy loading.
Til den opgave har vi flere muligheder:
- Vælg et plugin, der er lavet til lazy loading, som »Lazy loader«, »a3 lazy load«…
- Vælg et plugin til optimering af sitet som »WP Rocket«, der allerede har muligheden med som standard sammen med andre forbedringer.
SEO-forhold omkring lazy loading
Vi kender nu hovedformålet med udskudt indlæsning og de vigtigste fordele, og hvordan det forbedrer vores sides performance, vores UX og vores SEO.
Men udskudt indlæsning skal bruges klogt, hvis man skal have mest muligt ud af det, for bruges det forkert, kan det give den modsatte effekt.
For eksempel bruger lazy loading cachen til at få mere fart på, så bliver der gemt for meget indhold der, kan der opstå langsom indlæsning eller fejl, hvis det ikke er sat rigtigt op — det kan endda spærre for, at Google indekserer sider og elementer, hvilket kan ramme sitets placeringer hårdt. Nogle tips er:
- Optimer cachen, og brug den klogt.
- Brug Google Search Console til at tjekke det indhold, Google crawler på sitet.
- Tilføj ALT-tekst, så hvert billede kan indekseres af Google.
- Brug altid IntersectionObserver-API'et.
- Tilføj attributten loading til iframe eller indlejret indhold fra andre sider eller kilder, takket være funktionen Blink LazyLoad i Chrome. Gælder billeder, fotos, videoer, tekst og andet indhold.
Lazy loading og UX
Når det handler om et website, er både teknisk og generel optimering afgørende for at give en god brugeroplevelse (UX), når det gælder indlæsningstider, reaktionsevne, ressourceforbrug og den generelle opførsel. Er et site ikke særlig hurtigt til at reagere, bliver afvisningsprocenten høj, og giver det en dårlig brugeroplevelse, rammer det trafikken, synligheden og også SEO'en.
Med udskudt indlæsning er målet at forbedre et sites UX markant i ét skridt ved at hente indholdet gradvist, og når brugeren får brug for det i takt med, at siden scrolles, hvad enten det er billeder eller tekst — og det er en bedre brug af ressourcerne end at hente hele platformen og sandsynligvis vise elementer, der ikke betyder noget for brugeren.
Native lazy loading (HTML) i Chrome
Som et tegn på, hvor stor vægt Google lægger på UX, har det siden 2020 og fra version 75 af Chrome været muligt at lægge native lazy loading ind i sidens HTML-tags og deres multimedieindhold som fotos, videoer med mere.
Når attributten til HTML-lazy loading lægges ind automatisk, forstår Chrome, at sidens indhold skal hentes i takt med, at brugeren navigerer, og ikke på én gang — det giver mere fart og bedre reaktionsevne. For at bruge det lægges attributten loading med værdien lazy på hvert tag med visuelle ressourcer og multimedie samt på iframes:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Løsningen kan bruges både på billeder, som udgør en stor del af den information, browseren skal hente, og på iframes; husk at vi bruger dem til at lægge eksterne ressourcer ind på vores site.
Det er værd at fremhæve brugen på iframes, for de kan være kritiske punkter i indlæsningen på vores site.
På minussiden er native lazy loading kun kompatibel med Chrome, men brugen kan lægges ind i andre browsere via kompatible biblioteker, hvis der ikke er understøttelse, som det er tilfældet i Mozilla Firefox.
Brug af lazy loading
Som vi allerede har nævnt, går lazy loading ud på at udskyde indlæsningen af elementer på en side for at optimere dens respons. På den måde retter brugen af værktøjet sig mod alle visuelle ressourcer, men med vægt på billeder, videoer og iframes, der kan indeholde dokumenter og andre filer — det hele ved at ændre tags og lægge attributten loading med værdien lazy ind, så sitets generelle hastighed bliver optimeret, selv når det har tunge elementer eller meget multimedieindhold.
Har du spørgsmål til lazy loading, eller vil du lægge det ind i dit projekt? Vi står klar!
Dokumentation og kilder:
Forfatter: David Kaufmann
Jeg har brugt de sidste 10+ år fuldstændig opslugt af SEO — og helt ærligt: jeg ville ikke have det anderledes.
Min karriere rykkede et niveau op, da jeg arbejdede som senior SEO-specialist for Chess.com — et af de 100 mest besøgte websites på hele internettet. At arbejde i den skala, på tværs af millioner af sider, snesevis af sprog og en af de mest konkurrenceprægede SERP'er der findes, lærte mig ting, som intet kursus og ingen certificering kunne have lært mig. Den erfaring ændrede mit syn på, hvordan rigtig godt SEO ser ud — og den blev fundamentet for alt, hvad jeg har bygget siden.
Ud af det grundlagde jeg SEO Alive — et bureau for brands, der mener det alvorligt med organisk vækst. Vi er ikke her for at sælge dashboards og månedsrapporter. Vi er her for at bygge strategier, der rent faktisk flytter noget, og vi kombinerer det bedste fra klassisk SEO med den spændende nye verden inden for Generative Engine Optimization (GEO) — så dit brand ikke kun dukker op i Googles blå links, men også inde i de AI-genererede svar, som ChatGPT, Perplexity og Google AI Overviews leverer til millioner af mennesker hver eneste dag.
Og fordi jeg ikke kunne finde et værktøj, der håndterede begge verdener ordentligt, byggede jeg selv et — SEOcrawl AI, en enterprise-platform til SEO-intelligens, der samler placeringer, tekniske audits, backlink-overvågning, crawl-sundhed og tracking af brandets synlighed i AI ét sted. Det er den platform, jeg altid ønskede fandtes.
Find mere indhold fra denne forfatter
