Core Web Vitals: Sådan påvirker hastighed din Google-ranking

Hastighed er ikke bare en nice-to-have for din hjemmeside – det er en direkte rankingfaktor i Google. Siden Google introducerede Core Web Vitals som officiel rankingfaktor, har sidens performance fået en endnu mere central rolle i teknisk SEO. Alligevel er det et område, som alt for mange virksomheder overser.

I denne guide gennemgår vi, hvad Core Web Vitals er, hvorfor de påvirker din Google-ranking, og ikke mindst hvordan du konkret måler og optimerer dem. Uanset om du er marketingansvarlig, virksomhedsejer eller udvikler, får du her den viden, du behøver for at forbedre din hjemmesides performance.

Hvad er Core Web Vitals?

Core Web Vitals er et sæt af tre specifikke metrics, som Google bruger til at måle brugeroplevelsen på din hjemmeside. De fokuserer på tre fundamentale aspekter af brugeroplevelsen: indlæsningshastighed, interaktivitet og visuel stabilitet.

LCP – Largest Contentful Paint

LCP måler, hvor lang tid det tager for det største synlige indholdselement (typisk et hero-billede, en overskrift eller en stor tekstblok) at blive fuldt renderet i brugerens viewport.

Hvad Google forventer:

• Godt: Højst 2,5 sekunder
• Behøver forbedring: Mellem 2,5 og 4 sekunder
• Dårligt: Over 4 sekunder

LCP er ofte det mest synlige og letforståelige mål for, om en side "føles hurtig". Når en bruger lander på din side, er det LCP-elementet, der giver dem det første indtryk af, at siden er indlæst og klar til brug.

INP – Interaction to Next Paint

INP (som erstattede First Input Delay i marts 2024) måler, hvor responsiv din side er, når brugeren interagerer med den. Den registrerer forsinkelsen fra en bruger klikker, trykker eller taster, til browseren reagerer visuelt.

Hvad Google forventer:

• Godt: Højst 200 millisekunder
• Behøver forbedring: Mellem 200 og 500 millisekunder
• Dårligt: Over 500 millisekunder

INP er særligt vigtig for interaktive sider som webshops, bookingplatforme og dynamiske webapplikationer. Hvis en bruger klikker på "Læg i kurv" og intet sker i flere sekunder, forlader de sandsynligvis din side.

CLS – Cumulative Layout Shift

CLS måler uventede layoutskift gennem besøget, ikke kun under den første indlæsning. Du kender sikkert problemet: Du er ved at klikke på et link, og pludselig flytter indholdet sig, fordi et billede eller en annonce indlæses. Det er en elendig brugeroplevelse, og det er præcis det, CLS fanger.

Hvad Google forventer:

• Godt: Højst 0,1
• Behøver forbedring: Mellem 0,1 og 0,25
• Dårligt: Over 0,25

CLS er en dimensionsløs score (ikke sekunder), der beregnes ud fra, hvor meget indhold flytter sig, og hvor stor en del af skærmen der påvirkes.

Hvorfor Core Web Vitals påvirker din ranking

Google har været usædvanligt tydelig om, at Core Web Vitals er en officiel rankingfaktor. Men hvordan påvirker de i praksis dine placeringer?

Page Experience som rankingsignal

Google bruger Core Web Vitals i sine rankingsystemer, men beskriver ikke ét samlet Page Experience-signal. Mobilvisning, sikkerhed og fravær af påtrængende elementer er også vigtige for brugeroplevelsen uden dermed alle at være selvstændige rankingsignaler. Se Googles afgrænsning.

God performance er ikke en garanti

En hurtig side skal stadig besvare søgningen og indeholde relevant information. Brug målingerne til at finde konkrete problemer for besøgende. Et grønt resultat er ikke en garanti for at overhale en bestemt konkurrent.

Den indirekte effekt

Udover den direkte rankingeffekt har Core Web Vitals en stor indirekte effekt:

• Lavere afvisningsprocent – hurtige sider holder brugerne længere
• Højere konverteringsrate – undersøgelser viser en direkte sammenhæng mellem hastighed og konvertering
• Flere sidevisninger per session – brugere navigerer mere på hurtige sider
• Bedre crawl-effektivitet – Google kan crawle flere sider, når de indlæses hurtigt

Undersøg disse virkninger i virksomhedens egne data. Ændret afvisningsprocent eller konverteringsrate dokumenterer ikke i sig selv en rankingeffekt.

Sådan måler du Core Web Vitals

Før du kan optimere, skal du måle. Der findes en række værktøjer til at analysere dine Core Web Vitals.

Google PageSpeed Insights

PageSpeed Insights er det mest tilgængelige værktøj. Indtast din URL for at se en laboratorietest. Feltdata fra Chrome User Experience Report vises, når der er tilstrækkelige data; de kan gælde den konkrete URL eller hele domænet. Manglende feltdata er ikke det samme som dårlig performance.

Fordele:

• Gratis og let at bruge
• Kombinerer lab- og feltdata
• Giver specifikke anbefalinger til forbedring
• Tester både mobil og desktop

Google Search Console

Search Console har en dedikeret Core Web Vitals-rapport, der viser:

• Hvilke sider der har god, behøver forbedring eller dårlig performance
• Specifikke problemer grupperet efter type
• Udvikling over tid
• Validering efter du har lavet forbedringer

Lighthouse

Lighthouse er et open source-værktøj, der kan køres direkte i Chrome DevTools (F12, fanen "Lighthouse"). Det giver en detaljeret performance-audit med:

• Score for performance, tilgængelighed, best practices og SEO
• Detaljerede timing-data for indlæsning og blokering. En almindelig Lighthouse-indlæsningstest måler ikke felt-INP; TBT kan bruges til at finde problemer med blokering.
• Specifikke forbedringsforslag med estimeret besparelse
• Screenshots af indlæsningsforløbet

Chrome User Experience Report (CrUX)

CrUX er Googles database med virkelige brugerdata fra Chrome-brugere. Det er den mest pålidelige kilde til Core Web Vitals-data, da den afspejler rigtige brugeres oplevelse på din side. Du kan tilgå CrUX via PageSpeed Insights, Search Console eller BigQuery.

Test et konkret besøg i Chrome

Brug Performance-panelet i Chrome DevTools til at undersøge indlæsning og interaktioner. En lokal test er god til fejlsøgning, men repræsenterer kun den testede enhed, forbindelse og brugerrejse. Sammenhold den med feltdata, hvor de findes.

Almindelige problemer og løsninger

Lad os gennemgå de mest almindelige årsager til dårlige Core Web Vitals og konkrete løsninger.

LCP-problemer og løsninger

Problem: Store, uoptimerede billeder

Billeder er den hyppigste årsag til dårlig LCP. Et hero-billede på 3 MB tager lang tid at indlæse, især på mobile forbindelser.

Løsning:

• Komprimer billeder med værktøjer som Squoosh eller ShortPixel
• Brug moderne formater som WebP eller AVIF
• Implementer responsive billeder med srcset-attributten
• Angiv bredde og højde på alle billeder
• Brug preload for det primære LCP-billede

Problem: Langsom serverresponstid (TTFB)

Hvis serveren er langsom om at svare, kan ingen mængde frontend-optimering kompensere for det.

Løsning:

• Opgrader til en bedre hostingløsning
• Implementer server-side caching
• Brug et CDN til at serve indhold fra servere tæt på brugeren
• Optimer databaseforespørgsler
• Overvej en statisk site-generator eller caching-plugin

Problem: Render-blokerende ressourcer

CSS og JavaScript i head-sektionen kan blokere renderingen af dit LCP-element.

Løsning:

• Inline kritisk CSS direkte i HTML
• Defer eller async-load ikke-kritisk JavaScript
• Fjern ubrugt CSS og JavaScript
• Minificer alle CSS- og JS-filer

INP-problemer og løsninger

Problem: Tung JavaScript-eksekvering

Store JavaScript-bundles og tung tredjepartskode er den hyppigste årsag til dårlig INP.

Løsning:

• Code-split din JavaScript, så kun nødvendig kode indlæses
• Brug web workers til tunge beregninger
• Optimer event handlers
• Debounce hyppigt udløste events
• Reducer tredjepartskode (analyse, chat-widgets, annonce-scripts)

Problem: Langvarig main thread-blokering

Når browserens main thread er optaget af JavaScript-eksekvering, kan den ikke reagere på brugerinteraktioner.

Løsning:

• Bryd lange opgaver op i mindre chunks med requestIdleCallback eller scheduler API
• Brug requestAnimationFrame for visuelle opdateringer
• Prioriter brugervendte interaktioner over baggrundsopgaver

CLS-problemer og løsninger

Problem: Billeder uden dimensioner

Billeder og videoer uden definerede dimensioner forårsager layout shifts, når de indlæses.

Løsning:

• Angiv altid width og height-attributter på billeder og videoer
• Brug CSS aspect-ratio for responsive elementer
• Reserver plads til billeder med CSS containment

Problem: Dynamisk indlæst indhold

Annoncer, embeds og dynamisk indlæst indhold, der skubber eksisterende indhold ned.

Løsning:

• Reserver fast plads til annoncer og embeds
• Undgå at indsætte indhold over eksisterende synligt indhold
• Brug CSS contain-intrinsic-size for lazy-loadede elementer

Problem: Web fonts der forårsager layout shifts

Når en webfont indlæses og erstatter en fallback-font, kan det ændre tekstens dimensioner og forårsage CLS.

Løsning:

• Brug font-display: swap eller font-display: optional
• Preload vigtige webfonts
• Match fallback-fontens dimensioner med den primære font
• Overvej system fonts for bedre performance

Billedoptimering i dybden

Billeder er typisk den største synder, når det gælder performance. Her er en grundig gennemgang.

Vælg det rigtige format

• WebP – bedste balance mellem kvalitet og filstørrelse for de fleste billeder
• AVIF – et moderne format, som kan give små filer; sammenlign kvalitet og størrelse på dine egne billeder
• SVG – perfekt til ikoner, logoer og illustrationer
• JPEG – stadig relevant som fallback for ældre browsere
• PNG – relevant ved behov for tabsfri gengivelse; vælg format efter motiv og anvendelse

Implementer lazy loading

Billeder under folden (under det synlige område) bør lazy-loades, så de først hentes, når brugeren scroller ned til dem. Det reducerer den initielle sideindlæsningstid dramatisk.

Men: Lazy-load aldrig dit LCP-billede! Det vigtigste billede over folden skal indlæses med det samme.

Responsive billeder

Brug srcset og sizes attributterne til at levere det rigtige billedformat til den rigtige enhed. En mobilbruger skal ikke downloade et 2000px bredt billede, der alligevel vises i 400px bredde.

Server-side forbedringer

Frontend-optimering kan kun gøre så meget. Server-side forbedringer har ofte den største effekt.

Vælg den rigtige hosting

Din hostingløsning er fundamentet for din performance. Overvej:

• Managed WordPress hosting for WordPress-sider (Kinsta, WP Engine, Cloudways)
• VPS eller dediceret server for sites med høj trafik
• Serverless hosting for moderne webapplikationer
• Undgå billig delt hosting, der deler ressourcer med hundredvis af andre sider

Implementer caching

En effektiv caching-strategi kan reducere serverbelastningen og indlæsningstiden dramatisk:

• Browser caching – sæt korrekte Cache-Control headers for statiske ressourcer
• Server-side caching – cache genererede HTML-sider
• Object caching – cache databaseforespørgsler (Redis, Memcached)
• CDN caching – distribuer cachelagret indhold globalt

Brug et CDN

Et Content Delivery Network placerer kopier af dine filer på servere rundt om i verden. Når en bruger besøger din side, serveres indholdet fra den nærmeste server, hvilket reducerer latenstiden markant.

For danske virksomheder med primært dansk trafik er et CDN med gode europæiske edge-servere tilstrækkeligt. Populære valgmuligheder inkluderer Cloudflare, Fastly og AWS CloudFront.

Vurdér effekten med et målegrundlag

Gem målinger før og efter ændringer på de samme sidetyper og under sammenlignelige betingelser. Notér enhed, netværk, cache og testtidspunkt. Det hjælper med at skelne en reel forbedring fra variation mellem testkørsler.

Følg derefter de relevante brugeropgaver: Kan menuen åbnes uden ventetid? Flytter formularen sig, mens den udfyldes? Kommer produktbilledet frem, når kunden har brug for det? En hurtigere oplevelse er værdifuld, også når en særskilt effekt på søgeplaceringer ikke kan dokumenteres.

Måling af henvendelser eller køb kræver en korrekt opsætning og et passende sammenligningsgrundlag. Tilskriv ikke hele udviklingen i omsætning til én hastighedsrettelse.

Trin-for-trin optimeringsguide

Her er en praktisk køreplan for at forbedre dine Core Web Vitals:

Trin 1: Mål din baseline

Brug Google Search Console og PageSpeed Insights til at kortlægge dine nuværende CWV-scores. Identificér de sider, der har de største problemer.

Trin 2: Prioritér ud fra effekt

Fokuser først på de sider, der:

• Har størst trafik og forretningsmæssig værdi
• Har de dårligste CWV-scores
• Repræsenterer de vigtigste sideskabeloner (fordi forbedringer i en skabelon påvirker alle sider med den skabelon)

Trin 3: Optimer billeder

Start med billedoptimering, da det typisk giver den største forbedring med mindst indsats:

• Konverter til WebP
• Komprimer alle billeder
• Implementer lazy loading
• Angiv dimensioner på alle billeder

Trin 4: Reducer JavaScript

Gennemgå og optimer din JavaScript:

• Fjern ubrugte scripts og plugins
• Defer ikke-kritisk JavaScript
• Code-split store bundles
• Evaluer tredjepartsscripts kritisk

Trin 5: Forbedre serverrespons

Optimer server-side performance:

• Implementer eller forbedre caching
• Opsæt et CDN
• Overvej et hosting-skifte, hvis nødvendigt

Trin 6: Monitorér og iterer

CWV-optimering er ikke en engangsopgave. Monitorér dine scores løbende, og reager hurtigt på nye problemer. Nye plugins, designændringer eller tredjepartsscripts kan nemt forværre din performance igen.

Kreer og hastighedsoptimering

Hos Kreer er hastighedsoptimering en kernedel af vores tekniske SEO ydelse. Vi undersøger både årsager og praktiske rettelser og aftaler, hvem der udfører ændringerne i dit konkrete system.

Vores tilgang inkluderer:

• Grundig CWV-analyse med både lab- og feltdata
• Prioriteret handlingsplan baseret på effekt og indsats
• Teknisk implementering af alle anbefalede forbedringer
• Løbende monitorering for at sikre vedvarende god performance

Uanset om du har en eksisterende hjemmeside eller webshop, kan vi hjælpe med at prioritere målbare forbedringer og kontrollere resultatet efter implementering.

Har du brug for hjælp til at forbedre din hjemmesides hastighed? Start med en SEO-analyse for at identificere de største muligheder, eller kontakt os direkte for en uforpligtende snak om dine muligheder.

Kilde til målepunkter

Se Web.dev om Core Web Vitals for definitioner og anbefalede grænser. Feltdata vurderes ved 75-percentilen og opdeles blandt andet på mobil og computer.