Lazy loading: vilka bilder ska laddas senare?
Lazy loading gör att bilder längre ned på sidan laddas först när besökaren närmar sig dem. Det kan ge en snabbare start, men bilder som syns direkt ska inte behöva vänta. Kontrollera att bilderna visas i tid och att texten inte flyttas när de laddas.
Lazy loading gör inte bildfilerna mindre. Kombinera det med bildoptimering och rätt bildstorlek, så att även bilderna längre ned går snabbt att ladda.
Vilka bilder ska vänta?
| Bild | Så bör bilden laddas | Varför? |
|---|---|---|
| Stor huvudbild i första skärmbilden | Ladda direkt | Besökaren behöver den omedelbart. |
| Produktbilder längre ned | Lazy loading | De behövs först när besökaren närmar sig dem. |
| Logotyp i sidhuvudet | Ladda direkt | Den visas direkt på sidan. |
| Bildgalleri långt ned i en artikel | Lazy loading | Undviker onödig hämtning vid korta besök. |
Se var bilden hamnar på olika skärmar. En bild kan synas direkt på datorn men ligga längre ned på mobilen. Anpassa laddningen efter det.
Så ser det ut i HTML
<img src="verkstad.webp" alt="Mekaniker byter bromsskivor" width="800" height="533" loading="lazy">Attributet loading="lazy" låter webbläsaren senarelägga hämtningen. Bredd och höjd reserverar utrymme så att innehållet inte behöver hoppa när bilden kommer fram. Enligt Googles dokumentation om inbyggd lazy loading kan detta användas utan ett separat JavaScript-bibliotek.
Webbläsaren avgör när bilden ska hämtas och kan börja innan den syns på skärmen. Räkna därför inte med att laddningen alltid börjar vid samma avstånd.
Undvik lazy loading på LCP-bilden
En vanlig miss är att ett tillägg markerar alla bilder för lazy loading. Då kan huvudbilden få börja laddas senare än nödvändigt. Om den utgör sidans största synliga innehåll kan det försämra LCP.
På en kategorisida med en huvudbild och tjugo produktkort bör huvudbilden och de produktkort som redan syns laddas direkt. Bilder längre ned kan vänta tills besökaren närmar sig dem.
Kontrollera när bilderna börjar laddas
Öppna Network i Chrome innan du laddar om sidan och filtrera på bilder. Börja högst upp utan att scrolla och notera vilka bildanrop som görs. Scrolla sedan lugnt mot en bild längre ner och se när dess anrop dyker upp. Upprepa med en bild i det första synliga området.
Att en bild laddas innan den syns är alltså normalt. Undersök däremot om en viktig bild högst upp laddas sent eller om bilder som styrs med JavaScript aldrig visas när koden slutar fungera.
Testa också med en långsam anslutning. Finns bildens utrymme kvar medan den laddas, eller flyttas texten? loading="lazy" ersätter inte rätt filstorlek eller angiven bredd och höjd. Bakgrundsbilder kan hanteras på ett annat sätt av temat eller ett tillägg och behöver testas separat.
Kontrollera resultatet efter ändringen
- Öppna sidan i en ny session och testa med begränsad nätverkshastighet.
- Kontrollera att första skärmbilden visas utan tomma bildytor som dröjer.
- Skrolla ned och se att bilderna kommer fram i tid.
- Testa bildgallerier, filter och innehåll som öppnas efter ett klick.
- Jämför LCP och layoutförskjutningar före och efter ändringen.
I WordPress kan både temat, bildtillägget och cachelösningen styra lazy loading. Ta reda på vilken funktion som används innan du ändrar inställningarna. Om bilden inte visas kontrollerar du även bildadressen och eventuell JavaScript-kod.
Gör gärna kontrollen på en artikel, en kategori och en produktsida. Mallarna kan behandla bilder olika även om de tillhör samma webbplats.
Be utvecklaren visa vad som ändrades
Be utvecklaren visa en bild som laddas direkt och en som laddas senare. Kontrollera sidans HTML och jämför mätningar med samma nätverksinställningar före och efter ändringen. Läs också vår guide om snabbare hemsidor om sidan fortfarande känns långsam.
”*” anger obligatoriska fält
