LCP mäter tiden tills huvudinnehållet har laddats. Huvudinnehållet är det största textblocket eller den största bilden på sidan. På de flesta sidor är LCP det viktigaste måttet, eftersom det avgör när sidan blir användbar för besökaren.
Användaren landar på sidan. Sidan börjar laddas. Webbläsaren laddar ner HTML. Webbläsaren laddar ner CSS. Webbläsaren laddar ner JavaScript. HTML renderas. CSS lägger på stilar. JavaScript körs. Huvudinnehållet visas. Det är LCP.
En LCP på en sekund är utmärkt. Användaren ser innehållet snabbt. En LCP på tre sekunder är långsam. Användaren väntar. En LCP på fem sekunder är mycket långsam. Användaren lämnar sidan.
Vad som räknas som Largest Contentful Paint
Det största elementet på sidan ovanför vikningen. Oftast en bild eller en rubrik. Exempel: en startsida med hjältebild. Hjältebilden är det största elementet. Tiden tills hjältebilden syns är LCP.
Exempel: en bloggartikel med rubrik. Rubriken är det största elementet. Tiden tills rubriken syns är LCP.
Exempel: en produktsida med produktbild. Produktbilden är det största elementet. Tiden tills produktbilden syns är LCP.
LCP mäts från att användaren klickar på länken (starten på sidladdningen) tills det största elementet syns. Det omfattar tiden för att ladda ner HTML, CSS och JavaScript, ladda ner bilden och rendera sidan.
Så optimerar du LCP
Mål för optimeringen: LCP under två komma fem sekunder.
Strategi ett: optimera serverns svarstid (TTFB). En snabbare server gör att HTML kommer fram snabbare. HTML måste vara framme innan sidan kan renderas. Minska TTFB genom att förbättra servern, använda CDN och minska antalet databasfrågor.
Strategi två: minska storleken på CSS-filen. Mindre CSS laddas ner snabbare. CSS måste laddas ner innan sidan renderas. Minska CSS genom att ta bort oanvända stilar, minifiera och skjuta upp CSS som inte är kritisk.
Strategi tre: minska storleken på JavaScript-filen. Stor JavaScript fördröjer körning och rendering. Minska JavaScript genom att ta bort oanvänd kod, dela upp stora filer och skjuta upp JavaScript som inte är kritisk.
Strategi fyra: optimera bilder. Bilder är ofta de största elementen (LCP). Minska bildernas filstorlek genom att komprimera, använda moderna format (WebP) och minska bildmåtten.
Strategi fem: förladda kritiska resurser. Be webbläsaren ladda ner den kritiska bilden eller typsnittet tidigt. Bilden laddas ner parallellt med HTML och CSS. Det minskar LCP.
Verkligt exempel: LCP-optimering av en bloggartikel
Utgångsvärde för LCP: två komma åtta sekunder.
Analys: artikelns hjältebild är det största elementet. Bilden är två megabyte. Den tar en komma två sekunder att ladda ner. Nedladdningen av bilden är flaskhalsen.
Optimering
Komprimera bilden: minska från två megabyte till noll komma fem megabyte. Nedladdningstiden är nu noll komma tre sekunder.
Konvertera till WebP: minska ytterligare till noll komma tre megabyte. Nedladdningstiden är nu noll komma en sekund.
Förladda bilden: be webbläsaren ladda ner bilden tidigt. Bilden laddas ner parallellt med HTML. Sparar noll komma två sekunder.
Flytta kritisk CSS ovanför vikningen: korta tiden tills sidan kan renderas. Sparar noll komma tre sekunder.
Ny LCP: en komma sju sekunder.
Två komma åtta minus en komma två (nedladdning av bilden) plus noll komma ett (nedladdning av den komprimerade bilden) blir en komma sju sekunder. Under målet på två komma fem.
LCP och olika sidtyper
Startsida
Hjältebilden är oftast LCP. Optimera genom att komprimera bilden, använda CDN och förladda.
Bloggartikel
Rubriken eller den första bilden är LCP. Optimera genom att minska fördröjningen från CSS och JavaScript och förladda typsnitt.
Produktsida
Produktbilden är LCP. Optimera genom att komprimera bilden och använda responsiva bilder för olika enheter.
Kassasida
Formuläret eller knappen är LCP. Optimera genom att minska CSS och JavaScript och förladda kritiska resurser.
Olika sidtyper kräver olika optimeringar. Ta reda på vilket element som är din LCP. Optimera just det elementet.
LCP på mobil och dator
LCP är oftast långsammare på mobil än på dator. Mobilnätet är långsammare. Mobila enheter har mindre processorkraft.
Utgångsvärde för LCP på dator: en komma fem sekunder. Utgångsvärde för LCP på mobil: tre sekunder.
Mobilen är dubbelt så långsam. Mobilanvändare märker långsamheten tydligare.
Optimera mobilen först. Fokusera på att minska bildstorleken (bandbredden på mobil är begränsad). Minska JavaScript (mobila enheter tolkar långsammare). Använd mobilvänliga format.
Så mäter du förbättrad LCP
LCP före
Mät före optimeringen.
Genomför optimeringen
LCP efter
Mät efter optimeringen.
Förbättring
LCP före minus LCP efter.
Exempel
Före: två komma åtta sekunder. Efter optimeringen: en komma sju sekunder. Förbättringen är en komma en sekund.
Räkna ut effekten
En förbättring på en komma en sekund kan öka konverteringsgraden med en procent (beroende på utgångsläge och bransch). Med femtiotusen besökare i månaden är det femhundra extra konverteringar med ett ordervärde på hundra dollar. Femtiotusen dollar i månaden. Sexhundratusen dollar per år.
Jämför med kostnaden för optimeringen. Om kostnaden är femtiotusen dollar är återbetalningstiden en månad. Utmärkt avkastning.
Vanliga frågor
Hur vet vi vilket element som är vår LCP?
Använd Google Chrome DevTools. Högerklicka på sidan. Välj Inspektera. Gå till fliken Performance. Spela in sidladdningen. DevTools visar LCP-elementet. Du kan också använda PageSpeed Insights. Lighthouse pekar ut LCP-element. Kontrollera även rapporten Core Web Vitals i Search Console. Den visar LCP-element på sidorna. Med WEMASY webbplatsbyggare kan du ställa in det direkt på din webbplats.
Ska vi optimera LCP för alla sidor eller bara startsidan?
Optimera alla sidor. Men prioritera efter trafik. Startsidan är viktig, men det är produktsidorna också (för webbutiker) eller artikelsidorna (för publicering). Mät LCP på alla viktiga sidor. Prioritera optimeringen efter trafikvolym.
Hjälper förladdning alltid för LCP?
Inte alltid. Förladdning använder bandbredd. Förladdar du en oviktig resurs använder du bandbredd som kunde ha laddat ner en viktig resurs. Förladda bara kritiska resurser (hjältebild, kritiskt typsnitt). Förladda inte resurser som inte är kritiska.
Hur optimerar vi LCP när huvudinnehållet är dynamiskt (hämtas från ett API)?
Fördröjningen från API-anropet läggs på LCP. Minska API:ets svarstid genom att optimera databasen, cacha svar och använda CDN. Visa också en skelettskärm eller platshållare medan API:et laddar. Platshållaren syns direkt. Användaren upplever sidan som laddad. Det riktiga innehållet fylls på efteråt. Upplevd LCP blir snabbare än verklig LCP.
Ska vi använda lazy loading för LCP-elementet?
Nej. Lazy loading skjuter upp bilden tills den nästan är på väg in i bild. Om bilden ligger ovanför vikningen (LCP-elementet) fördröjer lazy loading bilden i onödan. Använd lazy loading bara för bilder under vikningen. Ladda LCP-elementet direkt.
Hur skiljer sig LCP från FCP (First Contentful Paint)?
FCP är när något innehåll syns (det kan vara en liten text). LCP är när huvudinnehållet syns (oftast en större bild eller rubrik). FCP kommer före LCP. LCP är viktigare för användarupplevelsen. Förbättra LCP först.