Largest Contentful Paint (LCP) måler tidspunktet, hvor det største synlige indholdselement i brugerens viewport er renderet. Det er ofte hero-billedet, men kan også være en stor overskrift eller tekstblok. LCP er sammen med INP og CLS en af Googles Core Web Vitals.

Hvad fortæller LCP om en side?

LCP ligger tættere på brugerens oplevelse end “siden er fuldt indlæst”. Når hovedindholdet først vises sent, opleves forsiden som langsom, selv om menu eller footer allerede er synlig. Grænserne er højst 2,5 sekunder som god, 2,5–4 sekunder som behov for forbedring og over 4 sekunder som dårlig. I Core Web Vitals vurderes feltdata ved 75. percentil, ikke kun én lokal test.

Målingen påvirkes af hele kæden: en langsom TTFB forsinker HTML, HTML opdager LCP-ressourcen sent, og CSS eller JavaScript kan forhindre browseren i at male elementet. Brug Google PageSpeed Insights til at se, om problemet findes hos rigtige brugere, og brug Lighthouse eller DevTools til at reproducere det.

Find og prioriter LCP-elementet

Optimer ikke alle billeder på én gang. Identificér først LCP-elementet i rapporten og kontrollér det på mobil, hvor et andet element eller en mindre CPU ofte ændrer resultatet. Hvis et hero-billede er LCP, skal det leveres i passende dimensioner og et moderne format, og browseren skal opdage det direkte i HTML. Undgå at sætte loading="lazy" på det; det forsinker netop det element, der skal være synligt tidligt.

Et LCP-billede, som først indsættes af JavaScript eller vælges som CSS-baggrund efter mange stylesheets, bliver typisk opdaget for sent. I relevante tilfælde kan fetchpriority="high" eller preload hjælpe, men kun efter måling. Overdreven preload konkurrerer med CSS, skrifttyper og HTML om båndbredden.

Praktiske WordPress-forbedringer

  • Aktivér cache af offentlige sider, så WordPress ikke bygger samme HTML ved hvert besøg.
  • Reducér PHP-, plugin- og databasearbejde ved cache-miss; det forbedrer serverens første svar.
  • Brug korrekte width- og height-attributter, responsive billedstørrelser og AVIF eller WebP, hvor det giver mening.
  • Indlæs kritisk CSS tidligt og udskyd ikke-kritisk JavaScript. Gennemgå især sidebyggere, sliders, chat og marketingtags.
  • Brug et CDN og fornuftig browsercache til billeder, skrifttyper og statiske filer.

Lazy loading er stadig nyttigt for billeder under folden, men er ikke en universal-løsning for LCP. Sørg også for, at billeder har plads reserveret, så du ikke forbedrer LCP på bekostning af CLS.

Mål før og efter ændringer

Test samme URL, enhed, netværk og cachetilstand før og efter en ændring. Se både laboratoriedata og reelle brugerdata, når de findes. En bedre LCP-score er værdifuld, men det vigtigste er at levere sidens centrale indhold hurtigt uden at gøre interaktioner langsomme eller layoutet ustabilt.