Core Web Vitals forklaret: LCP, CLS og INP

Forstå Core Web Vitals: LCP måler hastighed, CLS måler stabilitet, INP måler respons. Alle tre har betydning for brugeroplevelsen.

Kladde

Core Web Vitals er tre målinger, som Google bruger til at vurdere sideoplevelsen. LCP måler, hvor hurtigt siden indlæses. CLS måler, hvor stabil siden er visuelt. INP måler, hvor hurtigt siden reagerer.

Hver måling dækker en forskellig side af ydeevnen. Sammen tegner de et billede af brugeroplevelsen.

Largest Contentful Paint (LCP)

LCP måler tiden, til hovedindholdet er indlæst. Hovedindholdet er det største billede eller tekstafsnit på siden. På forsiden er LCP som regel det store billede øverst. På en artikel er LCP overskriften og hovedbilledet.

LCP måles fra det øjeblik, brugeren klikker på et link, til hovedindholdet vises på skærmen. Er LCP ét sekund, ser brugeren hovedindholdet ét sekund efter klikket. Er LCP tre sekunder, venter brugeren i tre sekunder.

Mål: En LCP under 2,5 sekunder er god. En LCP mellem 2,5 og 4 sekunder skal forbedres. En LCP over 4 sekunder er dårlig.

Eksempel: Billedet øverst på forsiden fylder fem megabyte. Det tager tre sekunder at hente. LCP er tre sekunder. Målet er 2,5 sekunder. Ydeevnen skal forbedres.

Cumulative Layout Shift (CLS)

CLS måler visuel stabilitet. Et layoutskift sker, når indhold flytter sig, efter siden er indlæst. Eksempel: Brugeren begynder at læse en artikel. En annonce indlæses. Artiklen rykker nedad. Brugeren mister overblikket. Det er irriterende.

CLS opgør det samlede layoutskift. Hvis indhold flytter sig 200 pixel nedad, stiger CLS. Hvis indhold flytter sig flere gange, lægges skiftene sammen.

Mål: En CLS under 0,1 er god. En CLS mellem 0,1 og 0,25 skal forbedres. En CLS over 0,25 er dårlig.

Eksempel: En annonce indlæses, efter siden er klar. Annoncen fylder 300 pixel i højden. Indholdet under annoncen rykker nedad. CLS er 0,15. Det skal forbedres.

Interaction to Next Paint (INP)

INP måler, hvor hurtigt siden reagerer. Brugeren klikker på en knap. Systemet behandler klikket. Siden opdateres. Ændringen vises på skærmen. INP er tiden fra klik til synlig ændring.

INP er vigtig for sider, man interagerer med (formularer, knapper, menuer). Den er mindre vigtig for statiske sider (artikler, blogs).

Mål: En INP under 200 millisekunder er god. En INP mellem 200 og 500 millisekunder skal forbedres. En INP over 500 millisekunder er dårlig.

Eksempel: Brugeren klikker på knappen Læg i kurv. Systemet behandler forespørgslen. Kurvtælleren opdateres. INP er 300 millisekunder. Det skal forbedres.

Hvorfor tre målinger i stedet for én

Én måling kan ikke fange hele brugeroplevelsen. Indlæsningshastighed har betydning (LCP). Visuel stabilitet har betydning (CLS). Respons har betydning (INP). En side kan indlæses hurtigt, men være ustabil (høj CLS). Eller den kan være hurtig og stabil, men træg at bruge (høj INP). Tre målinger sammen viser kvaliteten af brugeroplevelsen.

Et ægte eksempel: Core Web Vitals i en webshop

Udgangspunkt

Udgangspunktet for en produktside i en webshop:

LCP: 2,8 sekunder (over målet på 2,5). CLS: 0,12 (over målet på 0,1). INP: 220 millisekunder (over målet på 200).

Alle tre målinger skal forbedres.

Optimering

LCP: Optimer billedet øverst og udsæt indlæsningen af indhold længere nede (lazy load). Resultat: 1,8 sekunder.

CLS: Reserver plads til annoncer og udsæt indlæsningen af indhold, der ikke er kritisk. Resultat: 0,05.

INP: Brug mindre JavaScript og optimer hændelseshåndtering. Resultat: 180 millisekunder.

Alle tre målinger lever nu op til Googles krav.

Sådan hænger Core Web Vitals sammen med brugeroplevelsen

God LCP: Brugeren ser indholdet hurtigt. Siden føles hurtig.

Dårlig LCP: Brugeren venter på indholdet. Siden føles langsom.

God CLS: Layoutet er stabilt. Brugeren kan læse, uden at indholdet hopper. Det er behageligt.

Dårlig CLS: Layoutet skifter. Brugeren mister overblikket. Det er irriterende.

God INP: Brugeren klikker på en knap og ser svaret med det samme. Siden føles levende.

Dårlig INP: Brugeren klikker på en knap og venter på svar. Siden føles træg.

Gode Core Web Vitals giver en god brugeroplevelse. Dårlige Core Web Vitals giver en dårlig brugeroplevelse.

Sådan måler du Core Web Vitals

Google måler Core Web Vitals hos rigtige brugere (real user monitoring). Testværktøjer som Lighthouse vurderer Core Web Vitals, men svarer ikke altid til, hvad rigtige brugere oplever (netværksforholdene er forskellige).

Tjek Core Web Vitals i Google Search Console. Google samler data fra rigtige brugere og viser, om hjemmesiden lever op til kravene (god, skal forbedres, dårlig).

Tjek også i PageSpeed Insights. Her får du Lighthouse-score og data fra rigtige brugere fra Googles database.

Ofte stillede spørgsmål

Hvilken Core Web Vital er vigtigst?

Alle tre har betydning. Men LCP og CLS har som regel størst effekt. Hvis siden indlæses hurtigt, men layoutet hele tiden skifter, er oplevelsen dårlig. Hvis siden er stabil, men træg at bruge, er frustrationen mindre akut. LCP og CLS er som regel prioritet ét og to. INP er vigtig for sider med meget interaktion, men mindre kritisk for statisk indhold. Med WEMASY's hjemmesidebygger kan du sætte det op direkte på din hjemmeside.

Hvordan adskiller Core Web Vitals sig fra andre målinger af ydeevne?

Core Web Vitals handler om brugeroplevelsen. De måler det, brugerne mærker. Andre målinger (TTFB, FCP) er tekniske og er en forudsætning for gode Core Web Vitals, men de måler ikke selve brugeroplevelsen. Forbedr de andre målinger som fundament, men Core Web Vitals viser, om fundamentet giver en god oplevelse.

Kan vi have gode målinger af ydeevne, men dårlige Core Web Vitals?

Ja. En side kan have hurtig TTFB, men dårlig LCP. En side kan have hurtig FCP, men dårlig CLS. De tekniske målinger er nødvendige, men ikke nok til gode Core Web Vitals.

Skal vi optimere alle tre Core Web Vitals lige meget?

Nej. Prioriter efter effekt. Mål, hvor du står nu. Hvis LCP er fire sekunder, men CLS er 0,1, så start med at forbedre LCP. De største huller har størst effekt på brugerne.

Er Core Web Vitals de eneste målinger, Google går op i?

Nej. Google måler også mobilvenlighed, HTTPS, sikker browsing og pop-ups, der dækker siden. Core Web Vitals er de mest synlige og lettest at ændre. Men hele sideoplevelsen omfatter også andre faktorer. Optimer Core Web Vitals, men glem ikke de andre rangeringsfaktorer.

Hvor ofte opdateres Core Web Vitals fra rigtige brugere i Google Search Console?

Hver dag. Google samler data fra rigtige brugere løbende. Core Web Vitals i Search Console opdateres dagligt. Testværktøjer viser en måling på ét tidspunkt. Hold øje med data fra rigtige brugere i Search Console for at følge ydeevnen over tid.

Brug det med det samme
på din egen hjemmeside.

Start gratis med WEMASY, og byg din side på få minutter.