Kort fortalt: Sammen med fetchpriority , lazy loading og srcset og sizes er decoding et finjusteringsværktøj. Det erstatter ikke korrekt filstørrelse eller format - se AVIF og WebP .
auto vs. async vs. sync
async lader browseren udskyde decode når muligt; sync kan være nødvendigt for nogle layout-scenarier. Test på lav-end Android - CrUX viser om jeres billedstrategi holder i felt.
LCP-billeder
Hero-billeder bør typisk ikke lazy-loades; fetchpriority="high" og korrekt sizes er vigtigere end decode-flag alene.
decode=async og main thread
Attributten decoding="async" hint’er browseren om at billeddekodning må ske asynkront så den ikke blokerer rendering af andet indhold. Det kan hjælpe på sider med mange billeder i viewport og nær hinanden.
Det er ikke en erstatning for korrekt billedstørrelse, komprimering eller loading="lazy" på below-the-fold medier.
LCP-billedet er særligt
For det billede der forventes at være LCP-element, vil I typisk prioritere hurtig synlighed frem for at udskyde dekodning. Kombinér med fetchpriority="high", preload når det giver mening, og passende dimensionsattributter for at undgå layout hop.
Test: LCP kan skifte mellem billede og tekst hvis billedet loader for sent - mål i felt, ikke kun lokalt.
Browserforskelle og fallback
Hint’et er netop det - browsere kan ignorere det i visse situationer. Byg ikke logik der kræver præcis timing af dekodning.
Hold altid width/height eller CSS aspect-ratio for at undgå CLS når dekodning afsluttes og pixels vises.
Videre på sitet
Relaterede guides og blogindlæg finder du i kortene nederst på siden. Overblik: Blog, Guides, Ordbog.
FAQ
Ødelægger async LCP?
Sjældent hvis billedet hentes tidligt - mål med DevTools og felt.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Sådan fejlsøger du LCP fra start til slut
Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Forbedr LCP med billeder: hero, formater, preload og responsive størrelser
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
