LCP: få sidans viktigaste innehåll att visas snabbare
LCP, Largest Contentful Paint, mäter när det största innehållselementet i den synliga delen av sidan visas. Det är ofta en stor bild eller ett textblock. Om det tar lång tid behöver du se vilket element som mäts och var i laddningen väntan uppstår.
En bra LCP är högst 2,5 sekunder vid den 75:e percentilen, räknat separat för mobil och dator. Måttet ingår i Core Web Vitals och beskriver när den största bilden eller texten blir synlig, inte när allt på sidan har laddats.
Ta reda på vilket element som mäts
Se först vilket element som mäts på den sida och skärmstorlek du testar. På dator kan det vara en stor toppbild och på mobil en rubrik eller en annan bild. Då vet du vilken del av laddningen du ska undersöka.
Testa flera sidor av samma typ. Om bara några produkter är långsamma jämför du deras bilder och innehåll. Om alla har samma problem granskar du den gemensamma mallen och dess komponenter.
| Del av förloppet | Fråga att undersöka |
|---|---|
| Väntan på HTML | Varför börjar servern svara sent? |
| Start av resursens hämtning | Upptäcks bilden direkt eller först efter annan kod? |
| Överföring | Är filen onödigt stor för visningsstorleken? |
| Visning | Vad hindrar innehållet från att ritas ut när det väl finns? |
Spåra en långsam toppbild i Chrome
Spela in laddningen i Chromes Performance-panel och se vilket element som markeras för LCP. Använd samma fönsterstorlek och nätverksinställningar när du jämför tester. Är elementet en bild letar du sedan upp bildens anrop i Network.
Se när HTML-dokumentet börjar komma, när bilden börjar hämtas och när överföringen är klar. Börjar bilden hämtas sent granskar du bland annat JavaScript, CSS-bakgrunder och laddningsprioritet. Börjar den direkt men tar lång tid att överföra kontrollerar du filstorlek och vilken bildversion som skickas.
Är bilden hämtad men fortfarande osynlig undersöker du vad som hindrar webbläsaren från att visa den. En animation eller dold komponent kan fördröja visningen. Kontrollera även mobilversionen efter en rättning: den kan mäta ett annat element än datorversionen.
Exempel: en liten bild som ändå visas sent
En kategori kan ha en liten toppbild som ändå visas sent. Om bilden sätts in först när ett JavaScript-paket har hämtats och körts hjälper mer komprimering bara lite. Bilden behöver kunna upptäckas tidigare.
Lazy loading kan också försena toppbilden. Det passar ofta för bilder längre ned, men bör normalt undvikas på den viktigaste synliga bilden. Kontrollera även att ett bildspel visar sin första bild utan att vänta in alla de andra.
Rätta det som orsakar väntan
- Undersök serverarbete, cache och onödiga omdirigeringar om HTML kommer sent.
- Gör viktiga bilder upptäckbara tidigt i sidans struktur.
- Använd rätt dimensioner och anpassade bildversioner för olika skärmar.
- Undvik att dölja huvudinnehållet bakom en animation eller laddningsskärm.
- Granska blockerande stilmallar och tung kod när resursen finns men inte visas.
Använd preload och fetchpriority där de hjälper rätt fil att laddas tidigare. Ger du många filer högsta prioritet blir det svårare för webbläsaren att prioritera. Mät skillnaden före och efter varje ändring.
Kontrollera att förbättringen håller
Behåll samma skärmstorlek, nätverksinställningar och cacheläge när du jämför tester. En bild som redan ligger i cache laddas under andra förhållanden än vid första besöket. Testa också att lösningen fungerar när produkt- och kampanjbilder byts ut.
Följ sedan LCP från verkliga besök. Kontrollera samtidigt att bilderna fortfarande är skarpa och att layouten är stabil. Guiden till bildoptimering beskriver hur du kan minska filstorleken utan att förlora viktiga detaljer.
”*” anger obligatoriska fält
