Vad LCP mäter
Det största elementet i den synliga delen av sidan är ofta en hero-bild, stor rubrikbild eller ett större textblock.
Mätningen visar när detta element blir synligt.
Vanliga orsaker till långsam LCP
Stora bilder, långsam server, blockerande CSS och JavaScript samt felaktig lazy loading på hero-bilden kan försena resultatet.
Så förbättras LCP
Komprimera bilden, välj rätt dimension, använd WebP eller AVIF, förladda viktiga resurser och se till att servern svarar snabbt.
Testa rätt sida
LCP kan skilja sig mellan startsida, tjänstesidor och artiklar. Testa därför de viktigaste sidtyperna och inte bara startsidan.
Ett typiskt LCP-fall på en företagsstartsida
Heron visar ett stort fotografi med text ovanpå.
Bilden är 2,8 MB, lazy-loadas och upptäcks först efter att ett JavaScript har byggt komponenten. Tre olika problem pekar alltså mot samma LCP-element. Börja med att rendera bilden direkt i HTML, ta bort lazy loading för just den och exportera en rätt dimensionerad fil. Om LCP fortfarande är högt tittar du på serverns svar och render-blockerande CSS. Genom att följa samma element genom hela laddningskedjan blir optimeringen mycket mer konkret än att bara försöka höja en generell Lighthouse-poäng. Prioritera sådant som påverkar första skärmen och interaktionen.
LCP-elementet är ofta en bild eller stor textyta
Largest Contentful Paint mäter när det största relevanta innehållselementet i viewporten har renderats. På många företagshemsidor är det hero-bilden, men det kan också vara en stor rubrik eller textblock.
I DevTools och PageSpeed Insights går det att se vilket element som räknas som LCP. Det är viktigt eftersom optimeringen bör riktas mot just den resursen. Att komprimera bilder längre ned på sidan hjälper inte mycket om LCP i själva verket väntar på ett webbtypsnitt eller långsam HTML.
Fördröj inte resursen som användaren väntar på
Lazy loading är bra för bilder utanför första skärmen, men huvudbilden bör normalt inte skjutas upp om den är LCP-element. Webbläsaren behöver upptäcka resursen tidigt för att kunna hämta den parallellt med andra viktiga filer.
Kontrollera därför om bilden ligger direkt i HTML eller injiceras sent via JavaScript, och om `loading="lazy"` används fel. En mindre fil hjälper, men upptäcktsordningen kan vara minst lika viktig för när bilden faktiskt syns.
Serverrespons och CSS kan försena LCP även med en liten bild
LCP-tiden börjar långt innan själva bilden målas upp. Om servern är långsam tar det tid innan webbläsaren ens får HTML-koden som pekar på resursen.
Därefter kan render-blockerande CSS eller typsnitt försena visningen. Felsök därför LCP som en tidslinje: serverns TTFB, resursens upptäckt, nedladdning och renderingsfördröjning. Då blir det tydligt om lösningen är bättre webbhotell, cache, bildoptimering eller förändringar i sidans CSS och HTML.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.