Largest Contentful Paint (LCP) är ett Core Web Vital som mäter upplevd laddningshastighet: tiden tills det största synliga innehållselementet har renderats i den synliga delen av webbläsarfönstret, viewporten. LCP är det mätvärde som starkast korrelerar med användarens uppfattning om att sidan ”har laddats”. Globalt är det också LCP som flest mobilsajter missar.
Definition och gränsvärden
LCP identifierar det största synliga elementet i viewporten och mäter tiden från navigeringsstart till att elementet renderats fullständigt. Bedömningen baseras på 75:e percentilen av fältdata: minst 75 procent av sidbesöken måste klara gränsvärdet.
| Betyg | Gränsvärde |
|---|---|
| Bra | ≤ 2,5 sekunder |
| Behöver förbättras | 2,5-4,0 sekunder |
| Dåligt | > 4,0 sekunder |
LCP i Sverige: stor spridning
I Laddtider.se:s granskning av 284 kommunsajter varierar LCP-värdet från 513 millisekunder (Vallentuna) till nästan 4 sekunder (Övertorneå). Hos de långsammaste kommunerna beror fördröjningen i första hand på serverns svarstid (TTFB): i Arvidsjaur dröjer det över 3 sekunder innan första svaret kommer.
Laddtider.se sänkte sin egen LCP från över 4 sekunder till 1,7 sekunder, utan att byta webbhotell. De viktigaste åtgärderna var att slopa externa fonter, byta till inline SVG-ikoner och ta bort renderingsblockerande resurser. Läs mer om bildoptimering och hur moderna format minskar LCP.
Vilka element kvalificerar som LCP?
Enligt specifikationen övervakar webbläsaren följande elementtyper och rapporterar det till ytan största:
<img>-element (inklusive bilder inuti<picture>)- Bilder inuti
<svg> <video>-element (posterbilden eller första videoframen)- Element med bakgrundsbild via CSS (
background-image: url()) - Textblock på blocknivå: rubriker, paragrafer, listor
I praktiken är LCP-elementet oftast en hero-bild, en produktbild eller sidans huvudrubrik.
LCP:s fyra delfaser
LCP-tiden kan brytas ned i fyra sekventiella faser. Att identifiera vilken fas som utgör flaskhalsen är avgörande för att rikta optimeringen korrekt:
- Serversvarstid (TTFB): tiden från navigeringsstart till att första byten av HTML-svaret anländer. Påverkas av serverprestanda, DNS-uppslagning, TLS-handskak och nätverkslatens.
- Resursupptäcktsfördröjning: tiden från TTFB till att webbläsaren börjar ladda LCP-resursen. Renderingsblockerande CSS och JavaScript kan fördröja upptäckten.
- Resursladdningstid: tiden att ladda ned LCP-resursen. Påverkas av filstorlek, bandbredd och prioritering.
- Renderingsfördröjning: tiden från att resursen laddats till att den visas. Påverkas av JavaScript som blockerar huvudtråden.
Optimeringsåtgärder
Minska serversvarstiden
En server med svensk placering och korrekt konfigurerad cache ger lägre TTFB för svenska besökare. CDN-distribution minskar latensen ytterligare. Se serveroptimering för detaljer.
Förladda LCP-resursen
Om LCP-elementet är en bild bör webbläsaren upptäcka den så tidigt som möjligt. Förladdning med preload och hög prioritet eliminerar resursupptäcktsfördröjningen:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">Undvik att placera LCP-bilden i JavaScript-komponenter som renderas sent eller i CSS-bakgrundsbilder som inte kan förladdas via HTML.
Minska resursens filstorlek
Moderna bildformat som WebP och AVIF minskar filstorleken: WebP ger enligt Google 25 till 34 procent mindre filer än JPEG vid samma kvalitet, och AVIF komprimerar ofta ännu bättre. Responsiva bilder via srcset säkerställer att mobila enheter inte laddar onödigt stora filer.
Eliminera renderingsblockerande resurser
CSS blockerar rendering tills den laddats fullständigt. Genom att inlina kritisk CSS (eng. critical CSS) och ladda övrig CSS asynkront kan renderingen påbörjas tidigare. JavaScript bör laddas med defer eller async. Se CSS- och JavaScript-optimering.
Undvik fördröjd laddning av LCP-elementet
Attributet loading="lazy" fördröjer laddning av bilder utanför viewporten, men LCP-bilden befinner sig per definition i viewporten och ska laddas omedelbart. Sätt fetchpriority="high" och avlägsna loading="lazy" från LCP-elementet.
Vanliga fallgropar
Två misstag som återkommer i svenska webbprojekt:
- Hero-bild via CSS
background-image: Webbläsaren upptäcker bilden först efter att CSS-filen parsat. Flytta hero-bilden till ett<img>-element medfetchpriority="high"så slipper du en hel fas av fördröjning. loading="lazy"på LCP-elementet: WordPress hoppar sedan version 6.3 själv över fördröjd laddning för den bild som troligen avgör LCP, men teman, sidbyggare och tillägg kan fortfarande lägga till attributet. Kontrollera alltid att bilderna överst på sidan undantas.
Mätning
- Fältdata: PageSpeed Insights (CrUX-sektionen), Google Search Console
- Labbdata: Lighthouse, GTmetrix, Chrome DevTools (Performance-fliken)
I Chrome DevTools identifieras LCP-elementet genom en Lighthouse-audit. Klicka på LCP-raden i rapporten för att markera elementet i DOM-trädet.
Senast faktagranskad: 3 oktober 2026