Lazy loading är ett mönster där webbläsaren väntar med att ladda en resurs tills användaren faktiskt behöver den. Tänk dig en lång produktsida med fyrtio bilder. Utan tekniken hämtas alla fyrtio direkt, även de trettiofem längst ned som ingen besökare hinner scrolla till. Skjuter sidan i stället upp laddningen tills en bild närmar sig skärmen, visas det viktigaste snabbt och nätverket sparas åt resten. Det här är en av de enklaste sakerna en tung sida kan få för att kännas kvickare, särskilt på mobil där uppkopplingen ofta är trögare. Gjort rätt kan det lyfta sidhastigheten rejält, men på fel element gör det tvärtom - något vi går igenom på djupet i guiden om sidhastighet och optimering.
Av redaktionen på seoninja.se
★ SNABBVERSIONEN
- Tekniken skjuter upp laddningen av bilder, videor och annat tills de behövs, oftast när användaren scrollar nära dem.
- Motsatsen heter eager loading, där allt hämtas direkt. Lazy loading jämfört med eager loading handlar om att prioritera rätt.
- Rätt använt förbättrar det sidhastighet och Core Web Vitals, vilket gynnar både besökare och Google.
- Lazy-ladda aldrig det som syns direkt högst upp, särskilt inte sidans LCP-bild.
- I WordPress är grunden ofta påslagen automatiskt via attributet loading=“lazy”.
Vad lazy loading faktiskt är
Lazy loading är ett designmönster du hittar överallt på webben. Idén är enkel: gör mindre arbete nu, gör resten senare bara om det behövs. På en webbsida betyder det att tunga resurser inte hämtas förrän de blir relevanta, vilket minskar onödig dataöverföring och hör nära ihop med det löpande arbetet i vår guide om sidhastighet.
Typiska element som passar att skjuta upp:
- Bilder längre ned i flödet, alltså sådant som inte syns direkt.
- Inbäddade videor och iframes från till exempel ett externt arkiv.
- Tunga skript och styling som inte krävs för det första intrycket.
- Kommentarsfält och widgets som hämtar data från en extern tjänst.
Den klassiska utlösaren är scrollning. Så fort webbläsaren märker att användaren scrollar nära ett element börjar hämtningen. En besökare som lämnar efter två sekunder slipper då allt material längre ned, och servern slipper skicka data ingen ser.
Hur fungerar lazy loading rent tekniskt?
För bilder och iframes räcker numera ett enda HTML-attribut. Skriv loading="lazy" på elementet, så sköter webbläsaren resten. Det är non-blocking, alltså inget skript som låser annat innehåll medan det väntar, vilket är en av de detaljer vi lyfter i guiden om hur du optimerar sidhastigheten.
Det finns två huvudvägar att känna till.
Det inbyggda loading-attributet
Det inbyggda attributet fungerar utan kod och passar de flesta sajter. Du skriver bara loading="lazy" på bilden eller iframen, och webbläsaren avgör själv när resursen ska hämtas. Inget skript behöver köras först, vilket gör det till det enklaste och säkraste valet.
Intersection Observer-API:t
Ett eget skript som använder Intersection Observer-API:t ger full kontroll. Intersection Observer är ett API som talar om när användaren scrollar nära ett element. I ramverk för SPA:er (ensidiga webbappar) finns färdiga verktyg, som React.lazy och Suspense, byggda på samma idé för komponenter. Med dem kan du jämföra olika lösningar och välja den som matchar din stack.
Lazy loading jämfört med eager loading
Eager loading är motsatsen: allt laddas direkt, oavsett om det syns. För små, kritiska resurser högst upp är det rätt val, eftersom de ska visas så fort som möjligt. Skillnaden mellan lazy loading och eager loading handlar alltså inte om bra och dåligt, utan om att välja rätt strategi för rätt element.
Kort jämförelse:
| Egenskap | Lazy loading | Eager loading |
|---|---|---|
| När laddas resursen | När användaren scrollar nära | Direkt vid sidladdning |
| Påverkan på LCP | Kan förbättra LCP för synligt innehåll | Snabbar upp kritiska element högst upp |
| Kräver JavaScript | Nej för bilder och iframes, ja för komponenter | Nej |
| Typisk risk | Att det viktigaste högst upp skjuts upp av misstag | Att tunga resurser längst ned hämtas i onödan |
| Bäst för | Tunga element under första vyn | Kritiska element högst upp |
Varför lazy loading spelar roll för Core Web Vitals och SEO
Google vill visa snabba sidor, och sidhastighet är något Google väger in i rankningen. Tekniken påverkar flera av de mått Google tittar på, framför allt de som ingår i Core Web Vitals och som vi förklarar i sammanhang i guiden om sidhastighet. Hur väl Google litar på din sida hänger också ihop med trovärdighet och E-E-A-T, alltså erfarenhet, expertis, auktoritet och pålitlighet.
Mått värda att hålla koll på:
- LCP, som mäter hur snabbt det största synliga elementet laddas.
- INP, som mäter hur snabbt sidan svarar på interaktion och sedan mars 2024 ersatt FID som Core Web Vital. Tunga skript som skjuts upp fel kan påverka INP negativt.
- CLS (Cumulative Layout Shift), som mäter hur mycket layouten hoppar medan sidan laddas.
Lazy loading kan förbättra LCP genom att frigöra bandbredd för det som syns först. Samma teknik kan skada LCP om just det stora elementet högst upp råkar skjutas upp, något du upptäcker när du mäter sidan före och efter ändringen.
Påverkan på mobil och datamängd
För besökare på mobilnät spelar det stor roll hur mycket som laddas i onödan. När bilder under första vyn laddas sent drar en typisk sida ofta en bra bit mindre data, eftersom många aldrig scrollar hela vägen ned. Det märks särskilt för lokala sökare, till exempel den som letar efter en tjänst i ett område som Göteborg på språng, eller för den som söker lokalt i Stockholm på väg hem.
Vinster som märks mest:
- Snabbare första intryck för besökare med långsam uppkoppling.
- Lägre dataförbrukning för besökare med begränsad datamängd.
- En jämnare upplevelse där sidan inte hackar medan bilder laddas in.
- Mindre risk att layouten hoppar medan trettio bilder slåss om samma nätverk.
Vanliga missförstånd
Det finns några myter som lever kvar. De vanligaste frågorna handlar om det här:
- “Det gör alltid sidan snabbare.” Inte sant, fel använt blir den långsammare.
- “Google kan inte se lazy-laddade bilder.” Sökroboten klarar det i regel, men test krävs ändå.
- “Jag måste skriva JavaScript.” Sällan, för bilder räcker ett attribut.
- “Det är samma sak som komprimering.” Nej, det rör när något laddas, inte hur stort det är.
En vanlig följdfråga är om Google verkligen hinner se det som laddas sent, och svaret hänger ihop med hur väl sidan är beskriven med strukturerad data och hur den presterar enligt vår guide om sidhastighet.
VANLIG MISS
Lazy-ladda aldrig bilden högst upp, hjältebilden eller logotypen. Den är ofta sidans LCP-element. Med det inbyggda attributet loading="lazy" deprioriteras bilden helt enkelt och hämtas senare, vilket gör att det viktigaste syns långsammare. Med en JavaScript-baserad lazy loading blir det värre, eftersom ett skript då måste köras innan bilden ens börjar hämtas.
Så gör du i praktiken
Det går att komma långt utan en rad kod. Det här är ordningen som brukar fungera, oavsett om sajten är en blogg eller en webbutik byggd i ett vanligt CMS som du kan läsa mer om i guiden om SEO för WordPress:
- Identifiera vad som syns direkt högst upp och låt det ladda på vanligt sätt.
- Sätt
loading="lazy"på bilder och iframes längre ned på sidan. - Kontrollera att LCP-bilden inte råkat få lazy loading.
- Mät sidan i ett prestandaverktyg före och efter ändringen, gärna i Chrome.
- Verifiera i Search Console att bilderna fortfarande klarar granskning.
Verktyg som hjälper dig att hitta och åtgärda problemen:
- Webbläsarens nätverksflik, där du kan se i vilken ordning resurser hämtas.
- Ett fristående prestandaverktyg som mäter LCP, INP och total laddtid.
- Search Console, för att kontrollera att Google hittar bilderna.
När du väl mätt och förbättrat hastigheten passar det bra att knyta arbetet till en bredare innehållsstrategi, så att snabba sidor också har innehåll som drar besökare. För lokala företag, till exempel i Västerås eller Kalmar, är just snabba mobilsidor ofta det som avgör om besökaren stannar.
Lazy loading i WordPress
WordPress lägger sedan WordPress 5.5 (2020) automatiskt till loading="lazy" på bilder i innehållet. För många sajter behövs alltså ingenting alls för grundfunktionen, vilket vi går igenom tillsammans med annat matnyttigt i guiden om SEO för WordPress.
Vill du styra mer finns prestandaplugins. Tänk då på följande:
- Välj exakt vilka bilder, iframes och skript som ska laddas sent.
- Lämna alltid det som syns direkt utanför uppskjutningen.
- Kontrollera att tema och plugin inte krockar om båda hanterar laddning.
När du behöver JavaScript och ramverk
Driver du en mer avancerad webbapp, byggd som en SPA (ensidig webbapp), blir bilden en annan. Då lazy-laddas ofta hela komponenter, inte bara bilder. Då blir det här relevant:
- Webpack delar upp koden i mindre bitar som hämtas vid behov.
- Intersection Observer avgör när något ska hämtas in i vyn.
- React.lazy och Suspense skjuter upp komponenter som inte syns direkt.
Det är kraftfullt men kräver omsorg, eftersom fel kan göra att innehåll dyker upp i fel ordning eller försenat, vilket i sin tur kan störa både upplevelsen och hur sidan beskrivs med strukturerad data.
NINJA-FAKTA
Du kan testa effekten gratis. Öppna sidan i Chrome, slå på nätverksfliken i utvecklarverktygen och se hur många bilder som laddas direkt. Scrolla sedan långsamt och se hur fler dyker upp när du närmar dig dem. Syns alla på en gång är lazy loading antingen avstängt eller felinställt.
En checklista innan du publicerar
Kontrollera innan du går live
Bra och dåligt bruk ser ofta ut så här:
Bra lazy loading
- Skjuter upp tunga bilder långt ned.
- Lämnar hjältebilden eager.
- Är non-blocking och stör inte rendering.
- Testas efteråt med riktiga mätvärden.
Dålig lazy loading
- Lazy-laddar allt, även toppen.
- Kräver ett tungt skript som låser sidan.
- Glömmer att verifiera resultatet.
- Antar att det “bara funkar”.
Vill du gräva djupare i hur snabba sidor påverkar rankningen, läs vår guide om sidhastighet och optimering. För att förstå hur Google bedömer trovärdighet, börja med vår förklaring av E-E-A-T. Lazy loading är ett verktyg, inte ett mål: det löser problemet att tunga resurser laddas i onödan. På rätt element gör det sajten lättare och snabbare, på fel element tvärtom.
Vanliga frågor
Vad betyder lazy loading?
Det är ett mönster där en sida väntar med att ladda vissa resurser tills de faktiskt behövs. I stället för att hämta alla bilder, videor och skript direkt när sidan öppnas, laddas en bild först när besökaren scrollar nära den. Resultatet blir att det viktigaste visas snabbare, mindre data dras och sidan känns kvickare på mobil. Motsatsen kallas eager loading, där allt hämtas på en gång oavsett om någon ser det eller inte.
Är lazy loading bra för SEO?
Ofta, men inte alltid. Tekniken kan förbättra sidhastighet och Core Web Vitals, vilket Google väger in. Samtidigt kan den skada SEO om innehåll högst upp lazy-laddas i onödan, eller om Googles sökrobot inte hittar bilderna vid indexering. I regel lönar det sig att skjuta upp det som ligger under första vyn och alltid ladda det synliga på vanligt sätt. Kontrollera resultatet i Search Console efteråt, så slipper du obehagliga överraskningar.
Hur aktiverar jag lazy loading i WordPress?
I moderna versioner av WordPress är lazy loading påslaget som standard för bilder, via attributet loading="lazy" i HTML. Sällan behöver något göras alls. För mer kontroll finns plugins och prestandaverktyg som styr vilka bilder och iframes som laddas sent. Det enda att kolla är att den viktigaste bilden högst upp, ofta sidans LCP-element, inte lazy-laddas, eftersom det annars kan få sidan att kännas långsammare snarare än snabbare.
Vad är skillnaden mellan lazy loading och eager loading?
Eager loading hämtar alla sidans resurser direkt vid sidladdning, oavsett om besökaren kommer att se dem. Lazy loading väntar i stället tills resursen behövs, till exempel när användaren scrollar nära en bild. Eager loading passar små, kritiska resurser högst upp. Lazy loading passar tunga element längre ned som de flesta aldrig hinner se. Många sajter blandar de två: eager för det viktigaste, lazy för resten. Lazy loading jämfört med eager loading handlar alltså om att prioritera, inte om rätt och fel.
Kan lazy loading göra min sida långsammare?
Ja, om det används fel. När bilden högst upp lazy-laddas med en JavaScript-lösning måste webbläsaren först köra ett skript som hämtar den innan något syns, vilket fördröjer upplevelsen. Lazy loading med JavaScript som blockerar rendering skapar liknande problem, eftersom skriptet då stoppar renderingen. Lösningen är att bara skjuta upp resurser under första vyn och låta det synliga laddas på vanligt sätt. Mät alltid, gissa inte, för annars blir resultatet svårt att jämföra.
Behöver jag JavaScript för lazy loading?
Inte längre för det vanligaste fallet. Numera räcker attributet loading="lazy" på bilder och iframes, så sköter webbläsaren resten utan något skript. För mer avancerade behov, som att lazy-ladda komponenter i en webbapp byggd med React, används JavaScript och Intersection Observer-API:t. För en vanlig företagssajt slipper du oftast koda något själv, även om du inte kan koda.
Relaterade termer
VILL DU FÖRSTÅ MER?
Undrar du hur det funkar i praktiken för just din sajt? Hör av dig.