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. Som med det mesta inom SEO finns det ett rätt och ett fel sätt, och skillnaden avgör om resultatet hjälper eller stjälper sidhastigheten, något vi går igenom på djupet i guiden om sidhastighet och optimering. Vill du dessutom förstå hur Google läser och tolkar din sida i grunden hjälper vår genomgång av strukturerad data.
★ 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 vs 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 det faktiskt är
Det här är en design pattern that du hittar överallt for the web. 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 page resources inte hämtas förrän de blir relevanta, vilket sänker the need for onödig dataöverföring och hör nära ihop med det löpande arbetet i vår guide om sidhastighet. Samma logik gäller för hur du bygger upp innehållet över tid, något vi tar upp i vår guide om innehållsstrategi.
Typiska element som passar att skjuta upp:
- Bilder längre ned i flödet, alltså sådant that aren’t synligt 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 network-tjänst.
Den klassiska utlösaren är scrolling. Once the browser registrerar att the user scrolls near them, 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, vilket också gör att Google lättare hinner med arbetet du kan förbereda med rätt strukturerad data på sidan.
Hur fungerar lazy loading rent tekniskt?
För bilder och iframes räcker numera ett enda HTML-attribut. Skriv loading="lazy" på elementet, till exempel en bild med height=“200, så sköter browser does resten. Det är non-blocking, alltså inget script that låser annat innehåll medan det väntar, vilket är en av de detaljer vi lyfter i guiden om hur du optimerar sidhastigheten.
Två huvudvägar finns att känna till:
- Det inbyggda attributet, som fungerar utan kod och passar de flesta sajter.
- Ett eget script that använder The Intersection Observer API för full kontroll.
The Intersection Observer är ett API som talar om when the user scrolls near ett element. I ramverk för SPAs finns färdiga verktyg, som React.lazy och Suspense, byggda på samma idé för komponenter. Med dem kan du compare olika lösningar och välja den som matchar din stack, ungefär som när du i en konkurrentanalys väger olika alternativ mot varandra.
Lazy loading vs eager loading
Eager loading is 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 loading vs eager loading handlar alltså inte om bra och dåligt, utan om att välja rätt strategi för rätt element, på samma sätt som en genomtänkt innehållsstrategi handlar om att prioritera rätt saker i rätt ordning.
Kort jämförelse:
| När laddas resursen | Lazy loading | Eager loading |
|---|---|---|
| Tidpunkt | När användaren scrollar nära | Direkt vid sidladdning |
| Passar bäst för | Tunga element under första vyn | Kritiska element högst upp |
Varför det spelar roll för SEO
Google vill visa snabba sidor, och sidhastighet är en av faktorerna 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 E-E-A-T, alltså erfarenhet, expertis, auktoritet och trovärdighet.
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 ersatte FID under 2024.
- Input Delay, en del av upplevelsen som tunga skript ofta förvärrar.
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 som ofta upptäcks först när du jämför din sajt med andra i en konkurrentanalys.
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. En tumregel är att en typisk sida kan dra runt 30 procent mindre data när bilder under första vyn laddas sent, 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 for users with långsam uppkoppling.
- Lägre dataförbrukning for users with begränsad datamängd.
- En jämnare upplevelse som bidrar till Enhanced User Experience.
- Mindre risk att layouts hoppar medan trettio bilder slåss om samma network.
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, och om browser does väntar med den måste ett skript köras innan bilden ens börjar hämtas. Det viktigaste syns då senare, inte tidigare.
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 find och fix problemen:
- Webbläsarens nätverksflik, där du kan se i vilken order 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 flera år 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 av flera SPAs, 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.
- The Intersection Observer avgör when something is called 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 order eller försenat, vilket i sin tur kan störa både upplevelsen och hur sidan beskrivs med strukturerad data. Allt mer trafik kommer dessutom via AI-svar, något du kan läsa mer om i vår förklaring av GEO.
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 variables.
Dålig lazy loading
- Lazy-laddar allt, även toppen.
- Kräver tungt script that 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. Och vill du synas där du verkligen finns, till exempel i Umeå, börjar det ofta med just en snabb och teknisk välbyggd sajt. 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 page resources 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 vs 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 måste webbläsaren först köra ett script that hämtar den innan något syns, vilket fördröjer upplevelsen. Lazy loading med JavaScript som blockerar rendering skapar liknande problem, eftersom det inte är non-blocking. 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 The Intersection Observer API. För en vanlig företagssajt slipper du oftast koda något själv, vilket gör tekniken tillgänglig även utan utvecklare i teamet.
Relaterade termer
VILL DU FÖRSTÅ MER?
Undrar du hur det funkar i praktiken för just din sajt? Hör av dig.