Emner / lcp
LCP (Largest Contentful Paint) måler hvor hurtigt det største meningsfulde indholdselement bliver synligt i viewport. På mange sites er det et hero-billede, et produktbillede eller en stor overskriftsblok. Denne emneside samler guides og artikler der hjælper dig med at finde dit LCP-element, forstå om problemet er discovery eller download, og implementere løsninger der ikke skaber nye CLS-problemer.
Typiske LCP-bremser er tunge billeder uden responsive størrelser, render-blocking CSS og JavaScript, høj TTFB og prioritering der favoriserer tredjepart frem for dit eget indhold. Vores guides går trinvis igennem optimering af billeder, fjernelse af blokering og brug af passende hints - med advarsler om at lazy-loade hero eller overforbruge preload.
LCP skal ses i sammenhæng med resten af kæden: en hurtig browser uden god server og CDN kan stadig føles langsom, og et komprimeret billede hjælper ikke hvis browseren først opdager det sent i loadforløbet. Blogindlæg på emnet giver ofte det store billede, mens guiderne er til dem der skal udføre ændringerne.
Når du har læst herfra, er næste naturlige skridt at kombinere med emner som billeder, caching og render-blocking. Så dækker du både “hvad er LCP?” og “hvordan får jeg den ned?” uden at gentage det samme indhold på flere tynde sider.
Ved gentagne målinger: sammenlign samme enhed, samme netværksprofil og samme URL - ellers ender du med at jagte forskelle der skylder testopsætningen, ikke dine ændringer.
Eksterne kilder du kan bruge til at validere målinger: PageSpeed Insights, web.dev Vitals og DevTools Performance.
Start her
- Brug Transfer-Encoding - seneste guide i emnet
- Hvordan du spotter render delay - seneste blogindlæg i emnet
- Slå relaterede begreber op i ordbogen
Relaterede begreber (ordbog)
Guides
Guide
Brug Transfer-Encoding
Lær at finde ud af om din server eller reverse proxy buffer HTML-svar, og få streaming (chunked) til at flytte første visning og LCP i den rigtige retning.
Guide
Gør hero til LCP
Hvis LCP bliver en tilfældig paragraf i stedet for hero, får du både dårligere tal og en måling der ikke matcher brugerens første indtryk. Her er en konkret metode til at få hero (H1/billede) til at blive LCP – uden at snyde.
Guide
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.
Guide
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.
Guide
Forbedr LCP med billeder
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
Guide
Lazy-load billeder korrekt uden at skade LCP og brugeroplevelse
Se hvordan du bruger lazy loading rigtigt, undgår at skade LCP og vælger de billeder der skal prioriteres tidligt i stedet.
Guide
Fjern render blocking CSS og JavaScript for hurtigere første visning
Lær hvordan du reducerer render blocking fra CSS og JavaScript, så siden viser indhold hurtigere og giver bedre FCP og LCP.
Blogindlæg
Blog
Hvordan du spotter render delay
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.
Blog
Fetchpriority, preload og preconnect
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.
Blog
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.
Fortsæt i emneklyngen
Gå videre til relaterede sidetyper for at dække emnet fra flere vinkler.