LCP forklart: Slik optimaliserer du for SEO

LCP er en kritisk måling av brukeropplevelsen og en rangeringsfaktor hos Google. Når brukerne kommer til siden din, bryr de seg ikke om hvor lang tid hele sidelastingen tar. De bryr seg om når de kan se hovedinnholdet og begynne å lese eller samhandle. LCP måler nettopp dette øyeblikket: når det største innholdselementet blir synlig. Får du LCP riktig, føles siden rask. Får du den feil, føles siden treg, selv om de andre målingene er i orden.

Å optimalisere LCP krever en tredelt tilnærming: å forbedre svartiden fra serveren (TTFB), fjerne ressurser som blokkerer visningen, og optimalisere bildene. Hver tilnærming tar tak i ulike flaskehalser for LCP. Kombinasjonen gir store forbedringer.

Hva LCP er, og hvordan det måles

Largest Contentful Paint (LCP) er visningstiden for det største synlige innholdselementet på siden din. Dette kan være et stort bilde, en video, en overskrift eller en tekstblokk. LCP måler fra det øyeblikket brukeren går inn på siden din, til elementet blir synlig. Googles dokumentasjon om LCP gir detaljert teknisk informasjon og optimaliseringsstrategier.

LCP er ikke en ja/nei-måling. Det er en kontinuerlig poengsum. Google har fastsatt at LCP under 2,5 sekunder er «god», at LCP mellom 2,5 og 4 sekunder må forbedres, og at LCP over 4 sekunder er dårlig. Brukerne oppfatter sider med LCP under 2 sekunder som svært raske. Sider med LCP på 3-4 sekunder føles merkbart tregere. Sider med LCP over 5 sekunder blir ofte forlatt.

LCP endrer seg under sidelastingen etter hvert som større innholdselementer dukker opp. Hvis et stort bilde lastes ved 3-sekundsmerket, hopper LCP fra 1 sekund til 3 sekunder. Dette er viktig: du kan ikke bare optimalisere tiden til første visning. Du må sørge for at alle store innholdselementer laster raskt.

Forstå Time to First Byte (TTFB)

Time to First Byte (TTFB) er tiden fra navigeringen starter til serveren returnerer den første byten av HTML-dokumentet. TTFB bestemmer gulvet for LCP. Hvis TTFB er 2 sekunder, kan ikke LCP bli bedre enn 2 sekunder, fordi nettleseren ikke har mottatt HTML-en ennå. Å redusere TTFB er en forutsetning for å redusere LCP.

God TTFB er under 600 millisekunder. TTFB mellom 600-1800 ms må forbedres. TTFB over 1800 ms er dårlig. Hvis TTFB er treg, bør du fokusere på serveroptimalisering først. Ingen mengde optimalisering i frontend kan veie opp for en treg server.

Vanlige årsaker til treg TTFB: ineffektiv kode på serversiden, databasespørringer eller overbelastet server. Treg hosting gir også høy TTFB. Delt hosting er ofte ekstremt treg. Oppgrader til VPS eller skyhosting for bedre ytelse. Bruk et CDN for å redusere TTFB ved å levere innhold fra servere nær brukerne.

PageSpeed Insights viser TTFB-en din i seksjonen «Server response time». Hvis TTFB er en flaskehals, blir den fremhevet som prioritet.

Finn det største innholdselementet

LCP avhenger av hva som er det største innholdselementet på siden din. På et blogginnlegg kan det største elementet være et stort hovedbilde. På en produktside kan det være et produktfoto. På et nyhetssted kan det være en artikkeloverskrift. Å finne LCP-elementet er første steg for å optimalisere det.

Bruk Chrome DevTools for å finne LCP-elementet. Åpne DevTools, gå til fanen Performance, start et opptak, og last siden på nytt. I Performance-opptaket ser du etter markøren «Largest Contentful Paint». Hold musepekeren over den for å se hvilket element som utløste LCP. Når du vet hvilket element det er, kan du optimalisere det.

LCP-elementet er ofte et bilde. Bilder er store og lastes etter at HTML-en er tolket. Å optimalisere lastingen av bilder har størst effekt på LCP for de fleste nettsteder. Bilder under den synlige delen av skjermen kan lastes med lat lasting, og det gir raskere LCP for innholdet som er synlig først.

Forhåndslasting av kritiske ressurser

Forhåndslasting forteller nettleseren å begynne å laste ned en ressurs tidlig, før den trengs for visning. Forhåndslast LCP-bildet ditt eller andre kritiske ressurser med ``-tagger i HTML-hodet. Dette forteller nettleseren «start å laste ned denne ressursen med en gang».

Eksempel: `` forteller nettleseren å begynne å laste ned hovedbildet med en gang, uten å vente på at CSS-en tolkes. Dette kan redusere LCP med 100-500 ms, avhengig av størrelsen på ressursen.

Vær forsiktig med forhåndslasting. For mange forhåndslastede ressurser sløser båndbredde. Forhåndslast bare de mest kritiske ressursene (hovedbildet, kritiske skrifttyper, nødvendig CSS). Googles veiledning for optimalisering av Core Web Vitals forklarer beste praksis for forhåndslasting.

Bildeoptimalisering for LCP

Hvis LCP-elementet ditt er et bilde, optimaliser filstørrelsen og lastestrategien. Tre grep:

Komprimer bildet. Bruk verktøy som TinyPNG, ImageOptim eller Squoosh for å komprimere uten å miste kvalitet. JPEG-komprimering kan redusere filstørrelsen 10-40 ganger. Hver 100 KB med bildestørrelse legger til 100-200 ms på LCP på 4G-nettverk. Komprimering gir høy avkastning.

Bruk moderne formater. WebP er 25-35% mindre enn JPEG. AVIF er enda mindre. Bruk HTML-elementet `` for å servere WebP til moderne nettlesere og JPEG til eldre nettlesere, for bakoverkompatibilitet. Valg av format alene kan forbedre LCP med 200-400 ms.

Angi bildedimensjoner. Å oppgi bredde- og høydeattributter forhindrer layoutforskyvning og lar nettleseren reservere plass før bildet lastes. Dette forbedrer ikke LCP direkte, men det forbedrer kumulativ layoutforskyvning (CLS), en annen Core Web Vitals-måling.

CSS og JavaScript som blokkerer visningen

CSS som blokkerer visningen, hindrer nettleseren i å vise siden før CSS-en er lastet ned og tolket. Store CSS-filer forsinker visningen. Minimer CSS som blokkerer visningen ved å legge inn kritisk CSS direkte i HTML-en og utsette resten.

Kritisk CSS er CSS som trengs for innholdet som er synlig først. Legg inn denne CSS-en i `