Core Web Vitals

– Hvad er det og hvordan forbedrer du dem?

Hastighed og brugeroplevelse er ikke længere bare “nice-to-have” elementer på en hjemmeside. Siden 2021 har Google officielt brugt Core Web Vitals som en direkte rankingfaktor i deres søgealgoritme. Men hvad er Core Web Vitals egentlig, hvorfor har de så stor betydning for din forretning, din SEO, og hvordan forbedrer du dem i praksis?

I denne dybdegående guide gennemgår vi de tre vigtigste hastigheds- og stabilitetsmetrikker, som Google måler din hjemmeside på. Du får konkrete, tekniske løsninger til, hvordan du bringer dine scores fra rød til grøn, så du kan sikre dig bedre placeringer på Google og en markant højere konverteringsrate.

Hvad er Core Web Vitals?

Core Web Vitals er et sæt af tre specifikke metrikker, som Google har udvalgt til at måle den reelle brugeroplevelse (UX) på en hjemmeside. I modsætning til syntetiske hastighedstests måler Google Core Web Vitals baseret på reelle brugerdata (Field Data) indsamlet anonymt via Chrome-browseren fra rigtige besøgende på din side (det såkaldte CrUX-datasæt).

Google evaluerer din hjemmeside ud fra den 75. percentil af dine besøgende. Det betyder, at hvis 75 % af dine besøgende oplever en hurtig og stabil side, godkender Google din side.

De tre metrikker fokuserer på tre centrale aspekter af brugeroplevelsen:

• Indlæsning (Loading): Hvor hurtigt bliver det primære indhold synligt?
• Interaktivitet (Interactivity): Hvor hurtigt reagerer siden, når en bruger klikker eller taster?
• Visuel stabilitet (Visual Stability): Undgår siden irriterende layout-skift under indlæsning?

De tre Core Web Vitals metrikker i 2026

Lad os dykke ned i de tre metrikker, deres grænseværdier, og hvad der præcist måles.

1. Largest Contentful Paint (LCP) – Indlæsning

LCP måler, hvor lang tid det tager fra en bruger klikker på din side, til det største synlige element på skærmen (over folden) er færdigindlæst. Dette element er typisk et stort hero-billede, en video-poster eller en stor overskrift (H1).

Ifølge den seneste Web Almanac-rapport er LCP den metrik, som flest hjemmesider dumper på – kun 62 % af alle mobil-sider opnår en godkendt LCP-score.

2. Interaction to Next Paint (INP) – Interaktivitet

INP er den nyeste Core Web Vital-metrik. Den erstattede officielt den gamle First Input Delay (FID) i marts 2024. Hvor FID kun målte den allerførste interaktion, måler INP samtlige interaktioner (klik, tryk på skærmen, tastetryk) under hele brugerens besøg på siden.

INP registrerer den langsomste reaktionstid på siden. Hvis en bruger klikker på en menu, og der går 600 millisekunder, før browseren rent faktisk tegner menuen på skærmen, vil din INP-score være dårlig. Helge 43 % af alle hjemmesider dumper i dag på INP, hvilket gør det til den største tekniske udfordring for moderne webudviklere.

3. Cumulative Layout Shift (CLS) – Visuel Stabilitet

Har du nogensinde prøvet at sidde på en mobiltelefon og skulle klikke på et link, hvorefter siden pludselig rykker sig, så du klikker på en reklame i stedet? Det skyldes dårlig CLS.

CLS måler summen af alle uventede layout-skift på siden, mens den indlæses. Det sker typisk, når billeder eller annoncer indlæses uden foruddefinerede dimensioner, hvilket tvinger browseren til at skubbe det eksisterende indhold nedad.

Sådan forbedrer du dine Core Web Vitals (Konkrete løsninger)

For at få grønne tal i Google Search Console skal du optimere dit websteds kode og infrastruktur. Her er de mest effektive strategier til hver metrik.

Sådan optimerer du LCP (Largest Contentful Paint)

Da det største element på skærmen næsten altid er et billede (hero-billede), handler LCP-optimering i høj grad om billedhåndtering:

• Preload dit LCP-billede: Fortæl browseren, at den skal downloade dit hero-billede med det samme, før den overhovedet begynder at læse dit CSS. Det gøres med et preload-tag i HTML-head:

<link rel=”preload” as=”image” href=”/images/hero.webp” fetchpriority=”high” />

• Brug moderne billedformater: Konverter alle billeder til WebP eller AVIF, som fylder 30-50 % mindre end traditionelle JPEG- og PNG-filer uden tab af kvalitet.
• Implementer Server-Side Caching: Sørg for, at din server leverer HTML-koden lynhurtigt (lav TTFB – Time to First Byte) ved at bruge caching-plugins eller et Content Delivery Network (CDN) som Cloudflare.

Sådan optimerer du INP (Interaction to Next Paint)

INP-problemer skyldes næsten altid, at tunge JavaScript-filer blokerer browserens “main thread” (hovedtråd), så den ikke kan reagere på brugerens klik.

• Minimer og udskyd tredjeparts-scripts: Chat-widgets, analytics, Facebook-pixels og varmekort (Hotjar) er de største syndere. Udskyd dem (defer/async), så de først indlæses, efter siden er helt færdig.
• Opdel lange JavaScript-opgaver: Hvis du har tunge scripts, der tager over 50 ms at køre, skal du opdele dem i mindre bidder (yield to main thread) ved hjælp af yield() eller requestAnimationFrame, så browseren kan nå at tegne brugerens klik ind imellem.
• Undgå unødvendig re-rendering: Hvis du bruger frameworks som React eller Next.js, skal du optimere din state-management, så et klik på en knap ikke tvinger hele siden til at genindlæse i baggrunden.

Sådan optimerer du CLS (Cumulative Layout Shift)

CLS er ofte den nemmeste metrik at fikse, da det handler om ren struktur i din HTML og CSS.

• Sæt altid højde og bredde på billeder: Angiv altid width og height direkte i dine <img> tags, eller reserver pladsen via CSS aspect-ratio. Det fortæller browseren præcis, hvor meget plads den skal reservere til billedet, før det er downloadet.
• Reserver plads til dynamisk indhold: Hvis du indlæser reklamer, cookie-bannere eller nyhedsbrevs-popups dynamisk, skal du sørge for, at der er en pre-defineret container (f.eks. en div med en fast minimumshøjde), så indholdet ikke “popper” frem og skubber siden ned.
• Optimer font-indlæsning: Når du bruger Google Fonts, kan der opstå et skift, når systemets standardfont udskiftes med din custom font. Brug font-display: swap; i dit CSS for at minimere dette, og sørg for at preloade dine vigtigste font-filer.