Varför lazy loading används
Besökaren behöver inte ladda alla bilder direkt.
Det minskar den första datamängden och kan göra sidan snabbare, särskilt på mobil.
Inbyggt stöd i webbläsaren
Bilder kan använda attributet loading=”lazy”. WordPress lägger ofta till detta automatiskt på bilder längre ned i innehållet.
När lazy loading bör undvikas
Bilder högst upp på sidan, särskilt hero- och LCP-bilder, bör vanligtvis laddas direkt eftersom fördröjning kan försämra upplevelsen.
Så ser du om lazy loading fungerar
Testa sidan på mobil och med långsammare uppkoppling. En aggressiv inställning kan annars göra att bilder blinkar in för sent.
Ett exempel på var lazy loading passar och var det inte gör det
En lång referenssida innehåller 24 projektbilder.
De två första syns direkt när sidan öppnas, medan resten ligger flera skärmar ned. De första bör prioriteras normalt, men bilder längre ned kan lazy-loadas. Besökaren slipper då ladda hela galleriet om den bara läser introduktionen. Om samma teknik används på logotyp och hero skapas i stället en synlig väntan på det viktigaste innehållet. Gränsen är alltså inte ”bilder ska lazy-loadas” utan vilka resurser som behövs för den aktuella viewporten. Testa både mobil och desktop eftersom elementens position förändras när layouten staplas. Prioritera sådant som påverkar första skärmen och interaktionen.
Lazy loading sparar arbete utanför första skärmen
En lång sida kan innehålla många bilder som användaren aldrig kommer att scrolla till. Med lazy loading väntar webbläsaren med att hämta vissa resurser tills de närmar sig viewporten.
Det kan minska mängden data vid första laddningen och frigöra bandbredd för det som faktiskt syns. För vanliga bilder kan modern HTML använda attributet `loading="lazy"`, vilket gör att du ofta slipper ett separat JavaScript-bibliotek för grundfunktionen.
Allt ska inte laddas sent
Om logotyp, hero-bild eller annat centralt innehåll ligger i första skärmen behöver det ofta hämtas direkt.
Att lazy-loada sidans LCP-bild kan ge motsatt effekt och göra sidan långsammare ur användarens perspektiv. Samma sak gäller kritiska script som krävs för att en viktig funktion ska fungera. Lazy loading är därför en prioriteringsmetod: mindre viktiga resurser skjuts upp så att viktiga resurser kan komma först. Det kräver att du vet vilka element som faktiskt syns tidigt på olika skärmstorlekar.
Kontrollera beteendet med nätverkspanelen
Det är enkelt att anta att lazy loading fungerar eftersom attributet finns i HTML, men kontrollera vad webbläsaren verkligen gör.
Öppna nätverkspanelen, ladda om sidan och se vilka bilder som hämtas direkt. Scrolla sedan och observera när de övriga resurserna börjar laddas. Testa även på mobilbredd, eftersom en bild som ligger långt ned på desktop kan hamna nära första skärmen när kolumner staplas. En bra implementation ska minska initial belastning utan att skapa tomma ytor eller synliga fördröjningar.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.