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 viewporten. LCP är det mätvärde som starkast korrelerar med användarens uppfattning om att sidan ”har laddats” — och det mätvärde som har störst påverkan på ranking och konvertering.
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
Hur ser LCP ut på svenska sajter? I Laddtider.se:s granskning av 284 kommunsajter varierar LCP-värdet från 513 millisekunder (Vallentuna) till nästan fyra sekunder (Övertorneå). Mönstret är tydligt: sajter med enkla, textbaserade startsidor klarar sig bäst, medan kommuner med tunga hero-bilder och videokaruseller kämpar med gränsvärdet 2,5 sekunder.
Under arbetet med Laddtider.se sänktes LCP från över fyra sekunder till 1,7 sekunder — utan byte av webbhotell. Nyckelåtgärderna var att eliminera externa fonter, byta till inline SVG-ikoner och ta bort renderingsblockerande resurser. Läs mer om bildoptimering och hur moderna format minskar LCP. Skillnaden beror sällan på serverkraft utan på vilka resurser webbläsaren måste vänta på.
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 identifierar 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 ger jämförbar visuell kvalitet vid 40–50 procent lägre filstorlek jämfört med JPEG. 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: Det vanligaste felet. WordPress och flera CMS-plattformar sätterloading="lazy"på samtliga bilder som standard — inklusive den bild som avgör LCP. Kontrollera alltid att above-the-fold-bilder 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.