Hva er Core Web Vitals? LCP, INP og CLS

01Hva er Core Web Vitals?

At en side er «rask» kan ikke beskrives med ett enkelt tall. For brukeren er det tre ting som teller: hvor fort innholdet dukker opp, hvor raskt siden reagerer når man trykker på en knapp, og om innholdet flytter seg mens man leser. Core Web Vitals består av målinger som vurderer disse tre opplevelsene hver for seg.

Google bruker disse målingene som en del av signalene for sideopplevelse. De avgjør ikke rangeringen alene, men kan bidra til at den av to sider med sterkt innhold som har best opplevelse, kommer høyere opp. Den virkelige effekten ligger i brukeratferden: på raske og stabile sider blir besøkende lenger og konverterer oftere.

Målingene kan endre seg over tid. FID, som tidligere ble brukt til å måle interaksjon, er for eksempel erstattet av INP, som gjenspeiler alle interaksjonene bedre. Derfor er det lurt å følge de gjeldende definisjonene i den offisielle dokumentasjonen på web.dev.

02Tabell over terskelverdier

For hver måling definerer Google tre intervaller: god, trenger forbedring og dårlig. For at en side skal regnes som «god», må verdien ligge i det gode intervallet for minst 75 prosent av besøkene. Mobil og desktop vurderes hver for seg.

03Hva er LCP?

LCP (Largest Contentful Paint) er tiden det tar fra siden begynner å åpnes til det største innholdselementet på skjermen (vanligvis hovedbildet, et videoomslag eller en stor overskriftsblokk) er lastet og tegnet. Det er målingen som ligger nærmest brukerens følelse av at «siden er åpnet».

Hva som gjør LCP dårligere

• Tregt serversvar (lang TTFB)
• Et stort, ukomprimert hovedbilde eller et bilde i et utdatert format
• Hovedbildet er satt til å lastes sent (lazy)
• CSS- og JavaScript-filer som blokkerer visningen av siden
• Hovedinnholdet bygges opp senere med JavaScript

Slik forbedrer du LCP

Server hovedbildet i WebP eller AVIF og i riktig størrelse, fjern forsinket lasting og gi det høy prioritet ved behov. Kort ned serverens responstid med hurtigbuffer og CDN, og utsett skript som ikke er kritiske.

<img src="/img/hero.webp" alt="Hovedbilde" width="1200" height="630" fetchpriority="high">

04Hva er INP?

INP (Interaction to Next Paint) måler hvor lang tid siden bruker på å svare visuelt på klikk, trykk og tastaturinteraksjoner gjennom hele besøket. Det som rapporteres, er en av de tregeste interaksjonene i løpet av besøket. Det er altså ikke ett enkelt raskt klikk, men den samlede kvaliteten på responsen som vurderes.

Hvis ingenting skjer et øyeblikk når du trykker på menyknappen, og menyen så plutselig åpner seg, vises forsinkelsen i INP. Problemet er vanligvis JavaScript-kode som holder nettleserens hovedtråd opptatt for lenge.

Slik forbedrer du INP

• Del opp JavaScript-oppgaver som tar lang tid, i mindre biter.
• Fjern ubrukte og unødvendige skript, og reduser tredjepartskode.
• Utsett tunge oppgaver etter interaksjonen (som å sende analysedata).
• Unngå en svært stor og kompleks sidestruktur (DOM).
• Gi brukeren visuell tilbakemelding med en gang, og gjør det tunge arbeidet etterpå.

05Hva er CLS?

CLS (Cumulative Layout Shift) måler hvor mye sideinnholdet flytter seg uventet. Typiske eksempler på høy CLS er at teksten skyves nedover fordi en annonse øverst laster sent mens du leser, eller at knappen flytter seg akkurat når du skal klikke.

CLS er ikke en tid, men en poengsum uten enhet. Størrelsen på elementet som flytter seg og avstanden det flytter seg, regnes med. Endringer som skyldes brukerens egne handlinger (for eksempel at en trekkspillseksjon åpnes), regnes ikke med i poengsummen.

Slik forbedrer du CLS

• Oppgi bredde og høyde eller sideforhold for alle bilder og videoer.
• Reserver plass på forhånd til annonser, kart og innebygd innhold.
• Ikke legg til bannere eller varsler oppå eksisterende innhold i etterkant.
• Last webfonter med font-display: swap, og hold målene på reservefonten nær originalen.
• Bruk transform i stedet for posisjon i animasjoner.

06Feltdata og labdata

Vurderingen av Core Web Vitals bygger på feltdata som samles inn fra ekte Chrome-brukere. Dataene leveres gjennom Chrome User Experience Report (CrUX) som et gjennomsnitt for de siste 28 dagene. For sider uten nok trafikk er det ikke sikkert at feltdata vises.

Labdata er derimot resultatet av en enkelt test som verktøy som Lighthouse kjører i et kontrollert miljø. De er svært verdifulle for å finne problemer og teste en rettelse med en gang, men de gjenspeiler ikke fullt ut mangfoldet av enheter og tilkoblinger hos ekte brukere. Målinger som bygger på ekte interaksjon, som INP, kan ikke måles direkte i laboratoriet. I stedet brukes Total Blocking Time (TBT) som en omtrentlig indikator.

import { onLCP, onINP, onCLS } from 'web-vitals';

function gonder(metrik) {
  console.log(metrik.name, metrik.value);
  // Her kan du sende verdien til ditt eget analyseverktøy
}

onLCP(gonder);
onINP(gonder);
onCLS(gonder);

07Veikart for forbedring

Når du løser problemer med Core Web Vitals, hindrer en systematisk rekkefølge at arbeidet går til spille, i stedet for tilfeldige endringer.

1. Åpne rapporten for Core Web Vitals i Search Console og finn de problematiske sidegruppene.
2. Test en eksempelside fra hver gruppe i PageSpeed Insights, og noter hvilken måling som er svak.
3. Gjennomfør Lighthouse-anbefalingene, og begynn med den som gir størst gevinst.
4. Publiser endringen og start verifiseringen av rettelsen i Search Console.
5. Vent noen uker slik at feltdataene oppdateres, og sammenlign resultatene.

08Core Web Vitals og SEO-strategi

Core Web Vitals erstatter ikke SEO, men støtter den. Original og pålitelig innhold som dekker søkeintensjonen, er fortsatt det som veier tyngst. Men mellom sider med lik innholdskvalitet kan forskjellen i opplevelse komme tydelig frem, og en god opplevelse øker sjansen for at en besøkende du har fått, ender i en konvertering.

Den mest effektive tilnærmingen er å ta hensyn til ytelse allerede i designfasen. Når lette komponenter, riktig visuelt oppsett og ryddig kode er på plass fra starten, blir det mindre å rette opp senere. Vi bruker denne tilnærmingen i våre prosesser for SEO-vennlig webdesign og mobiltilpasset design. Du finner sjekklisten for designfasen i artikkelen vår om SEO-vennlig webdesign.

Praktiske steg for å gjøre siden raskere finner du i guiden vår om hvordan du øker nettsidens hastighet, og rutinen for jevnlig overvåking forklarer vi i artikkelen om vedlikehold av nettsider. For jevnlig rapportering av målingene sammen med søkeytelsen kan du få hjelp av tjenesten vår SEO og analyse.