Når en side åbner, lægger brugeren især mærke til, hvornår det vigtigste indhold bliver synligt. Largest Contentful Paint (LCP) er en Core Web Vitals-måling, der viser, hvornår det største synlige element i visningsområdet er gengivet. Det kan for eksempel være et stort billede, en video-plakat eller en større tekstblok.
Målingen bruges til at vurdere den oplevede indlæsningshastighed. Den siger ikke kun noget om, hvornår siden begynder at reagere, men om hvornår brugeren faktisk ser det centrale indhold. Derfor er LCP en vigtig indikator for, om en side føles hurtig eller langsom.
En god LCP skaber en mere smidig brugeroplevelse, mens en høj værdi ofte får sider til at virke træge. For både SEO og brugervenlighed er det derfor en central måling.
LCP ser på det største synlige indholdselement i brugerens aktuelle visningsområde, ikke nødvendigvis på hele siden. Det er derfor den del af indholdet, der fylder mest over folden, som typisk bliver registreret. På mange sider vil det være et stort billede, et hero-banner eller en videoplakats forsidebillede, men i nogle tilfælde kan en større tekstblok også være det element, der tæller.
Hvilket element der ender som LCP, afhænger af den konkrete sidevisning. Skærmstørrelse, opløsning og layout spiller ind, fordi det synlige område ændrer sig fra mobil til computer. En webshop kan for eksempel få registreret produktets hovedbillede som LCP på mobil, mens et bredt kampagnebanner bliver målt på desktop. På en artikelside kan det i stedet være overskrift og indledning, hvis tekstblokken fylder mere end billedet.
Det betyder også, at LCP ikke altid peger på det samme element for alle brugere. Hvis et billede først vises senere, eller hvis bannere og medier skifter placering mellem enheder, kan målingen ændre sig. Derfor bør man vurdere LCP ud fra både design, indholdstype og det faktiske visningsområde.
LCP vurderes typisk ud fra to datatyper: feltdata og laboratoriedata. Feltdata bygger på rigtige brugeres besøg på siden og viser, hvor hurtigt det største synlige element faktisk bliver vist under virkelige forhold. Her indgår forskelle i enheder, netværk, skærmstørrelser og brugeradfærd. Derfor giver feltdata det bedste billede af den oplevede hastighed over tid.
Laboratoriedata måles derimod i et kontrolleret testmiljø. Her indlæses siden under faste betingelser, så man kan analysere ydeevnen mere ensartet og finde konkrete flaskehalse. Lighthouse er et eksempel på et værktøj, der leverer laboratoriedata. Den type måling er især nyttig, når man vil teste ændringer hurtigt eller fejlfinde på en bestemt side.
PageSpeed Insights viser ofte begge datatyper, og det er netop derfor, resultaterne kan se forskellige ud. En side kan klare sig fint i en laboratorietest, men stadig have svagere feltdata, hvis mange brugere besøger den på langsomme forbindelser eller ældre mobiltelefoner. Det modsatte kan også ske. Forskellen er altså ikke nødvendigvis en fejl i værktøjet, men et tegn på, at målingerne belyser LCP fra hver sin vinkel.
LCP vurderer, hvor hurtigt det største synlige indholdselement bliver vist for brugeren. Som tommelfingerregel er en god værdi højst 2,5 sekunder. Ligger målingen mellem 2,5 og 4,0 sekunder, er der tale om forbedringskrævende performance.
En LCP på over 4,0 sekunder regnes som dårlig. Her vil mange brugere opleve siden som langsom, især på mobil og ved svagere forbindelser. Det øger risikoen for, at de forlader siden, før indholdet er kommet frem.
Grænserne er relevante, fordi de giver en praktisk ramme for brugeroplevelsen. En enkelt måling siger ikke alt, men hvis mange sidevisninger lander over 2,5 sekunder, bør siden optimeres. Målet er, at det vigtigste indhold vises hurtigt og stabilt.
En høj LCP-værdi opstår ofte, fordi browseren må vente for længe på det største synlige element på siden. Det kan begynde allerede ved serverresponstiden. Hvis serveren er langsom til at levere HTML, bliver alt andet forsinket. Det ses for eksempel ved tung backend-behandling, langsomme databaser eller manglende cache. Også CSS og JavaScript er hyppige årsager. Hvis vigtige typografier, layoutregler eller scripts skal hentes og behandles, før indholdet kan tegnes, bliver visningen af hovedindholdet udskudt.
Billeder er en anden klassiker. Et stort hero-billede kan være LCP-elementet, og hvis filen er for tung, forkert komprimeret eller leveres i for store dimensioner, tager det længere tid at vise. Det samme gælder, hvis billedet først hentes sent, fordi andre ressourcer bliver prioriteret højere. Skrifttyper kan også påvirke oplevelsen. Hvis overskriften er hovedindholdet, og den valgte webskrifttype indlæses langsomt, kan teksten blive forsinket eller skifte udseende undervejs.
Endelig giver klientrendering ofte problemer. Når indhold først bygges i browseren med JavaScript, skal filer hentes, køres og måske hente data bagefter. Det er typisk langsommere end at sende færdigt HTML fra serveren. Forkert prioritering af ressourcer forværrer effekten: Et vigtigt billede, en central skrifttype eller kritisk CSS kan komme for sent, mens mindre vigtige scripts, bannere eller sporingsfiler får plads først.
Den hurtigste vej til en bedre LCP er ofte at optimere det element, brugeren ser først. Det er tit et stort billede, en hero-sektion eller en markant tekstblok. Komprimér billeder uden synligt kvalitetstab, brug moderne formater som WebP eller AVIF, og lever dem i præcis de dimensioner, layoutet kræver. Undgå også at lazy loade selve LCP-elementet, hvis det ligger over folden. Det kan forsinke visningen unødigt og forværre målingen i stedet for at forbedre den.
Næste skridt er at prioritere de vigtigste ressourcer tidligt i indlæsningen. Brug preload til centrale filer som hero-billeder, skrifttyper eller kritiske CSS-filer, så browseren henter dem med det samme. Samtidig bør du reducere renderblokering ved at minimere unødvendig CSS og udsætte ikke-kritisk JavaScript. Fjern ressourcer, der ikke bidrager til den første synlige del af siden, og sørg for, at kritisk indhold kan tegnes hurtigt.
Cache og CDN kan give mærkbare forbedringer, især på sider med mange besøg eller brugere fordelt geografisk. Med effektiv browsercache slipper tilbagevendende besøgende for at hente de samme filer igen, og et CDN kan levere billeder, scripts og stylesheets fra servere tættere på brugeren. Det sænker svartiden og gør indlæsningen mere stabil.
Til sidst bør du se på serverydelsen. En langsom server, tung backend-behandling eller ineffektive databasekald kan forsinke den første levering af HTML og dermed hele rendering-kæden. Reducér svartiden med bedre hosting, sidecache og optimeret applikationslogik. Når server, netværk og front-end arbejder effektivt sammen, falder LCP typisk markant.
I CMS-løsninger bliver LCP ofte påvirket af selve opsætningen mere end af indholdet alene. Et tungt tema, en sidebygger med mange elementer og for mange plugins kan tilføre ekstra CSS, JavaScript og serverkald, som forsinker det største synlige element på siden. Det ses især på forsider, landingssider og skabeloner med store topbilleder eller bannere.
Et af de mest effektive greb er at gøre tema og sideskabeloner lettere. Vælg et hurtigt tema, fjern unødige moduler, og brug sidebyggeren mere sparsomt, så browseren skal behandle mindre kode før visning. Gennemgå også plugins kritisk: Deaktiver eller erstat udvidelser, der indlæser mange scripts og stilarter på alle sider, selv om de kun bruges få steder.
Billedhåndtering er et andet typisk problem. Sørg for, at det største billede i toppen har korrekte mål, er komprimeret og leveres i et moderne format. Undgå for aggressiv lazy loading på det billede, der sandsynligvis bliver sidens LCP-element.
Til sidst bør cache og levering være på plads. Sidecache, objektcache og korrekt browsercache kan reducere svartid mærkbart, og et CDN kan hjælpe, hvis målgruppen er geografisk spredt. I praksis giver kombinationen af lettere tema, færre plugins og bedre billedlevering ofte den største forbedring.
LCP handler om, hvornår sidens største synlige indholdselement bliver vist i brugerens visningsområde. Det gør målingen nyttig som pejlemærke for den oplevede indlæsning. Men LCP fortæller ikke alt. Den siger for eksempel ikke meget om, hvor hurtigt de første elementer dukker op, om layoutet hopper undervejs, eller om siden reagerer hurtigt på klik og tastetryk.
Her adskiller LCP sig fra First Contentful Paint (FCP). FCP måler det første tegn på synligt indhold, mens LCP ser på det tidspunkt, hvor det vigtigste eller største indhold er kommet frem. En side kan derfor have en fin FCP og stadig føles langsom, hvis det centrale billede eller tekstblok vises sent.
Cumulative Layout Shift (CLS) måler noget helt andet: visuel stabilitet. Hvis knapper, billeder eller tekst flytter sig, efter at siden er begyndt at blive vist, påvirker det CLS, men ikke nødvendigvis LCP. Interaction to Next Paint (INP) fokuserer på responsivitet og viser, hvor hurtigt siden reagerer på brugerens handlinger. LCP beskriver altså indlæsning, CLS stabilitet og INP interaktion. Tilsammen giver målingerne et mere dækkende billede af brugeroplevelsen.
LCP er vigtig, fordi den måler, hvornår brugeren ser sidens hovedindhold. Hvis det vigtigste element vises sent, opleves siden som langsom, og det kan øge afvisninger og svække brugeroplevelsen.
Google bruger Core Web Vitals som et signal i vurderingen af sideoplevelse. LCP er derfor ikke den eneste rankingfaktor, men en dårlig værdi kan være et teknisk tegn på, at siden bør forbedres.
En god LCP er højst 2,5 sekunder. Ligger værdien mellem 2,5 og 4,0 sekunder, bør siden forbedres. Over 4,0 sekunder regnes som dårlig performance.
Det er især relevant at se på værdier fra rigtige brugere, fordi de viser, hvordan siden fungerer i praksis på forskellige enheder og netværk.
LCP kan være et stort billede, et hero-banner, en videoplakat eller en større tekstblok i det synlige område. Målingen ser på det største indholdselement, som faktisk er synligt i brugerens visningsfelt.
Hvilket element der tæller, kan ændre sig mellem mobil og desktop, fordi layout og skærmstørrelse påvirker, hvad der fylder mest over folden.
LCP måles typisk med både feltdata og laboratoriedata. Feltdata kommer fra rigtige brugeres besøg og viser den faktiske oplevelse. Laboratoriedata kommer fra kontrollerede test og bruges især til fejlfinding.
PageSpeed Insights viser ofte begge typer data, mens Lighthouse primært bruges til laboratoriemålinger. Kombinationen gør det lettere at forstå både det overordnede problem og den konkrete årsag.
First Contentful Paint måler, hvornår det første synlige indhold dukker op på siden. LCP måler derimod, hvornår det største og typisk vigtigste synlige indholdselement bliver vist.
En side kan derfor have en hurtig FCP, men stadig føles langsom, hvis hovedindholdet først kommer senere. LCP siger mere om, hvornår siden opleves som reelt brugbar.
De mest almindelige årsager er langsom serverrespons, tunge billeder, renderblokerende CSS og JavaScript samt forkert prioritering af ressourcer. Hvis browseren skal vente længe på HTML, styles eller det største billede, stiger LCP hurtigt.
På mange sider er det især hero-billeder, skrifttyper og store topsektioner, der har størst betydning. Derfor bør man finde det konkrete LCP-element, før man optimerer.
Start med at optimere det element, der sandsynligvis er LCP, ofte et stort billede eller en topsektion. Brug korrekte billedmål, komprimering og moderne formater som WebP eller AVIF, og undgå lazy loading på indhold over folden.
Derudover hjælper et lettere tema, færre plugins, sidecache og et CDN ofte mærkbart. Mange WordPress-sider bliver langsomme, fordi de indlæser unødigt mange scripts og styles på alle sider.
Ja, det kan det. Hvis det element, der bliver målt som LCP, lazy loades, risikerer browseren at hente det for sent, selv om det ligger øverst på siden og burde vises straks.
Lazy loading er normalt nyttigt for billeder længere nede på siden, men det bør bruges med omtanke. Indhold over folden skal som hovedregel indlæses med høj prioritet.
LCP er en af de tre centrale målinger i Core Web Vitals. Den beskriver indlæsningsoplevelsen, altså hvor hurtigt det vigtigste synlige indhold kommer frem.
De øvrige målinger ser på andre dele af brugeroplevelsen: CLS handler om visuel stabilitet, og INP handler om reaktionstid ved brugerinteraktion. Sammen giver de et bredere billede af sidens kvalitet.
Feltdata bygger på rigtige brugeres besøg og viser, hvordan LCP faktisk opleves under virkelige forhold. Her indgår forskelle i enheder, netværk, browsere og geografisk placering.
Laboratoriedata måles i et kontrolleret miljø med faste testforhold. De er nyttige til at finde tekniske flaskehalse, men de afspejler ikke altid den samlede brugeroplevelse lige så præcist som feltdata.
Det letteste er at bruge PageSpeed Insights eller Lighthouse, som ofte peger på det konkrete element i rapporten. I Chrome DevTools kan du også analysere ydeevnen og se, hvilket billede eller hvilken tekstblok der bliver registreret som LCP.
Husk, at elementet kan variere mellem mobil og desktop. Derfor bør du kontrollere flere visninger, især hvis layoutet ændrer sig mellem enheder.