LCP (Largest Contentful Paint)

LCP, Largest Contentful Paint, är en av de tre mätningarna i Googles Core Web Vitals. Den svarar på en enkel fråga: när kan användaren se det viktigaste innehållet på sidan? Webbläsaren håller koll på de element som ritas upp i det synliga området, och LCP är tidpunkten när det största av dem är klart. På en produktsida är det oftast produktbilden. I en artikel är det ofta toppbilden eller rubriken.

Vad är en bra LCP?

Google använder tre gränser. 2,5 sekunder eller mindre är bra. Mellan 2,5 och 4 sekunder behöver förbättras. Över 4 sekunder är dåligt. Bedömningen gäller den 75:e percentilen av riktiga besök, så tre av fyra besök ska ligga under gränsen. Det är viktigt, eftersom ett snabbt test på din egen dator med fiberanslutning inte visar vad en kund i mobilen på ett tåg upplever. Data från riktiga användare hittar du i Google Search Console och i PageSpeed Insights när sidan har tillräckligt med trafik.

Varför är min LCP långsam?

Google delar upp LCP i fyra delar, och det hjälper att veta vilken av dem som tar tid:

• Serverns svarstid: tiden innan den första byten av sidan kommer fram.
• Fördröjning före inläsning: tiden innan webbläsaren upptäcker och börjar hämta LCP-bilden.
• Inläsningstid: hur länge själva bilden eller typsnittet tar att hämta.
• Fördröjning före visning: tiden från att filen är hämtad tills den faktiskt visas.

När du känner till fördelningen vet du var du ska sätta in åtgärderna. Är serverns svarstid hög hjälper bildkomprimering bara lite, och tvärtom. I många webbutiker är den största boven fördröjningen före inläsning. Bilden hittas först när JavaScript har körts, eller så är den satt till lazy loading, så att webbläsaren väntar med den.

Så förbättrar du LCP

Hitta först LCP-elementet. PageSpeed Insights och fliken Performance i Chrome DevTools visar det direkt. Därefter är de mest effektiva åtgärderna de här. Ta bort lazy loading från bilden som ligger överst och ge den fetchpriority="high", så att webbläsaren hämtar den först. Leverera bilden i ett modernt format som WebP eller AVIF och i en storlek som passar skärmen. Se till att bilden finns i HTML-koden från början och inte läggs in av ett skript. Använd ett CDN och cachning så att servern svarar snabbt, även för besökare långt från servern. Och begränsa CSS och typsnitt som blockerar visningen.

LCP hänger tätt ihop med den samlade sidhastigheten, men det är inte samma sak. En sida kan vara tung att läsa in helt och ändå ha en bra LCP, eftersom det viktigaste visas först. Det är just poängen med mätningen: den mäter det användaren upplever och inte den tekniska inläsningen av varenda fil. Behöver du en samlad genomgång av hastighet och indexering kan du se vad vi tittar på under teknisk SEO.