Trin-for-trin
Find LCP-elementet og bekræft at det ikke er hero
Gør hero-indholdet til det største synlige element over folden
Sørg for tidlig discovery af LCP-asset (hvis hero har billede)
Fjern blokering og tung paint i hero-området
Verificér i både lab og felt
Mange sidder med samme frustrerende situation:
- LCP ser “ok” ud i nogle tests
- men når man klikker ind i detaljerne, er LCP-elementet en paragraf – ikke hero
- og render delay fylder mest
Det her er guiden til at ændre det rigtigt: så hero bliver LCP fordi det faktisk er det vigtigste i første viewport – og fordi du har gjort kæden kortere.
Hvis du vil have baggrunden for hvorfor det sker, kan du starte med ordbogsopslaget om Render delay.
Før du går i gang: bekræft problemet (2 minutter)
- Kør en Lighthouse/PSI-test.
- Find LCP-elementet og spørg: er det hero?
- Notér om LCP-elementet er:
- billede
- stor H1
- eller en stor tekstblok (ofte længere nede)
Hvis LCP-elementet ikke er hero, skal du typisk løse én (eller flere) af disse:
- hero er ikke stort nok (typografi/spacing)
- hero er skjult bag et overlay/modals/banner
- hero’s LCP-asset opdages for sent
- hero er dyrt at male (paint/layout)
Trin 1: Gør hero til “det største” over folden (uden tricks)
Det lyder banalt, men det er ofte hele forklaringen: din hero er visuelt vigtig, men ikke stor nok i pixels til at blive LCP-kandidat.
Praktisk betyder det typisk:
- H1 skal være tydelig og fylde (ikke en lille linje over en lang paragraf)
- undgå at en lang paragraf under hero bliver større “visuelt areal” end hero-indholdet
Typisk anti-pattern
Du har:
- en moderat H1
- efterfulgt af 2 lange afsnit tekst med stor font-size og høj line-height
Så bliver det andet afsnit ofte LCP-kandidat, især hvis hero har tung baggrund der gør paint langsom.
En enkel løsning
- kort hero-intro (1–2 linjer)
- resten af teksten længere nede (stadig synlig, men ikke “det største” element i første viewport)
Trin 2: Hvis hero har billede: sørg for tidlig discovery
Hvis hero har et billede, og det billede skal være LCP, gælder en hård regel:
Browseren skal opdage billedet tidligt, ellers hjælper “komprimering” kun lidt.
Tjekliste
- Billedet skal være i HTML tidligt (ikke først efter JS).
- Du skal have korrekte
srcsetogsizes(se srcset og sizes). - Overvej
fetchpriority="high"på det ene LCP-billede (se fetchpriority). - Overvej Preload hvis opdagelsen er for sen – men mål for dobbelt-download.
Hvis du vil have en praktisk “gør det rigtigt”-gennemgang, så brug guiden: Brug fetchpriority og preload rigtigt.
Trin 3: Fjern render delay i hero (CSS/JS/paint)
Når LCP-elementet er tekst, eller når billedet er hentet men stadig ikke bliver malet, er det render delay.
Der er tre typiske kilder:
A) Render-blocking CSS og JS
Hvis CSS/JS blokerer første paint, bliver alt senere. Start med:
- Fjern render blocking CSS og JavaScript
- og tjek om du har for meget CSS i kritisk path (se Critical CSS)
B) Main-thread arbejde (tredjepart, hydration, store handlers)
Hvis main thread er optaget, kan browseren ikke nå til paint i tide. Brug:
- Long Task
- Event loop
- og audit tredjepart: Third-party scripts
C) Dyr paint i hero
Det her er den oversete del: gradients, blur, mask-image, store fixed overlays.
Hvis du ser store “Painting” blokke i Performance trace, så:
- reducer effekter i hero på mobil
- flyt pynt til
md+ - undgå store
backdrop-filteri kritisk viewport
(Det er præcis den slags ændringer der ofte reducerer “element render delay” uden at du ændrer netværk.)
Trin 4: Sørg for at cookie banners og overlays ikke stjæler viewport
Et banner kan ændre:
- hvilket element der ender med at være “largest”
- og hvornår layout stabiliserer sig
Hvis du har et banner, skal du bygge det med:
- reserveret plads
- minimal JS før første paint
- undgå at det skubber hero ned
Se: Optimer cookie banner uden CLS og INP problemer.
Trin 5: Verificér (lab + felt)
Lab
Kør Lighthouse igen og tjek:
- LCP-elementet (er det hero nu?)
- LCP-opdeling: falder render delay?
Felt
Hvis du har adgang til feltdata (CrUX/GSC), så bekræft at forbedringen også slår igennem for rigtige brugere. Se:
Typiske fejl (så du undgår at lave “work” uden effekt)
- At gøre hero større men lade render-blocking stå → LCP-element ændrer sig, men tiden gør ikke.
- At preload’e alt → du skaber konkurrence og dobbelt-downloads.
- At optimere billedkvalitet uden at sikre discovery → billedet er stadig sent.
- At ignorere paint cost → mobil halter stadig.
Opsamling
Hvis LCP ikke er hero, er det ofte et signal om at din “første viewport” ikke er bygget som en performance-situation.
Gør hero til LCP ved at:
- gøre hero til det største reelle element over folden
- sikre tidlig discovery/prioritet for LCP-asset
- reducere render delay (blocking + main thread + paint)
- verificere i lab og felt
Videre på sitet
- Sådan fejlsøger du LCP fra start til slut
- Render delay
- Brug fetchpriority og preload rigtigt
- Fjern render blocking
Relaterede guides
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
2026-03-23Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Fjern render blocking CSS og JavaScript for hurtigere første visning
2025-12-20Lær hvordan du reducerer render blocking fra CSS og JavaScript, så siden viser indhold hurtigere og giver bedre FCP og LCP.
Brug Transfer-Encoding (chunked) til progressiv rendering: hurtigere første visning
2026-04-02Læ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.
Sådan fejlsøger du LCP fra start til slut
2026-03-27Fø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.
Lazy-load billeder korrekt uden at skade LCP og brugeroplevelse
2026-01-15Se hvordan du bruger lazy loading rigtigt, undgår at skade LCP og vælger de billeder der skal prioriteres tidligt i stedet.
Få edge cache-hit på HTML: undgå cookies, forkert Vary og dårlige cache keys
2026-03-30Mange sites har CDN, men får stadig høj TTFB fordi HTML ikke caches. Lær et praktisk workflow til at få cache-hit på offentlige sider uden at servere forkert indhold.
FAQ
Er det 'snyd' at få hero til at være LCP?
Nej, hvis hero reelt er hovedindholdet brugeren møder. Målet er at LCP måler det vigtigste element – ikke en tilfældig stor paragraf længere nede.
Hvad hvis mit hero bare er tekst?
Så handler det især om render delay: CSS, fonts, layout/paint og main-thread arbejde. Du kan stadig få hero til at være LCP ved at sikre at H1 er den største synlige tekstblok og at første paint ikke er dyr.
Kan et cookie-banner stjæle LCP?
Ja, især hvis det fylder meget over folden. Men typisk er banneret et CLS/INP-problem. Se guiden om cookie banners og CWV for implementering.
Eksterne kilder
Kilder til LCP og hvordan browseren prioriterer resources.
Næste skridt efter guiden
Brug emnesider, ordbog og blog til at validere og uddybe næste ændring.
