Core Web Vitals Guide: Optimer Din Website 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å websites. Lanceret i maj 2020 og rullet ud som officiel ranking-faktor i juni 2021, er Core Web Vitals blevet en afgørende del af moderne SEO.

De tre core metrics måler forskellige aspekter af brugeroplevelsen:

• • Largest Contentful Paint (LCP): Måler load-hastighed – hvor hurtigt hovedindholdet vises
• • First Input Delay (FID) / Interaction to Next Paint (INP): Måler interaktivitet – hvor responsive din side er
• • Cumulative Layout Shift (CLS): Måler visuel stabilitet – hvor meget indhold "hopper" under load

Hvorfor er Core Web Vitals vigtige?

1. SEO og Rankings:

Core Web Vitals er en direkte ranking-faktor i Googles algoritme. Websites med gode CWV-scores får en boost, især på mobil. Google prioriterer "page experience" højt, og CWV er kernen i denne vurdering.

2. Brugeroplevelse:

Langsomme websites frustrerer brugere. Undersøgelser viser:

• • 53% af mobile brugere forlader en side hvis den tager over 3 sekunder at loade
• • 1 sekunds forsinkelse kan reducere konverteringer med 7%
• • 79% af brugere der oplever dårlig performance kommer ikke tilbage

3. Konverteringer og omsætning:

Bedre Core Web Vitals = flere konverteringer:

• • Walmart: 1% forbedring i load-tid = 2% stigning i konverteringer
• • Amazon: 100ms forsinkelse = 1% tab i salg
• • Pinterest: 40% reduktion i load-tid = 15% stigning i sign-ups

Largest Contentful Paint (LCP)

Hvad er LCP?

LCP måler hvor lang tid det tager før det største synlige element i viewport er fully rendered. Dette kunne være:

• • Et hero-image
• • En stor tekstblok
• • En video thumbnail
• • Et stort SVG eller canvas element

LCP Thresholds:

Sådan forbedrer du LCP:

1. 1. Optimer billeder
   • Brug WebP eller AVIF format
   • Implementér responsive images (srcset)
   • Lazy load images under the fold
   • Preload kritiske hero-images: <link rel="preload" as="image" href="hero.jpg">
2. 2. Reducer server response tid (TTFB)
   • Brug CDN (Cloudflare, Fastly)
   • Implementér server-side caching
   • Optimér database queries
   • Overvej edge computing
3. 3. Eliminér render-blocking resources
   • Inline kritisk CSS
   • Defer non-critical JavaScript
   • Brug async/defer attributter
   • Minimér CSS og JavaScript
4. 4. Brug browser caching
   • Sæt lange cache-headers (1 år for statiske assets)
   • Implementér service workers
   • Brug HTTP/2 eller HTTP/3

First Input Delay (FID) og Interaction to Next Paint (INP)

Fra FID til INP:

Google erstattede FID med INP i marts 2024 fordi INP giver et mere komplet billede af interaktivitet. FID målte kun den første interaktion, mens INP måler alle interaktioner på en side.

INP Thresholds:

Sådan forbedrer du INP:

1. 1. Reducer JavaScript execution time
   • Code split din JavaScript
   • Brug dynamic imports
   • Lazy load non-critical scripts
   • Optimér event handlers
2. 2. Minimér main thread work
   • Flyt tungt arbejde til web workers
   • Break up long tasks (yield to browser)
   • Debounce input handlers
   • Brug requestIdleCallback
3. 3. Optimér third-party scripts
   • Audit og fjern unødvendige scripts
   • Lazy load third-party content
   • Self-host kritiske scripts
   • Brug facade patterns (f.eks. YouTube lite)

Cumulative Layout Shift (CLS)

Hvad er CLS?

CLS måler hvor meget indhold "hopper" rundt mens siden loader. Hvis du nogensinde har klikket på en knap, hvorefter siden pludselig flytter indhold og du klikker på noget andet – det er dårlig CLS.

CLS Thresholds:

Sådan forbedrer du CLS:

1. 1. Reserver plads til billeder og embeds
   • Altid inkludér width og height attributter på images
   • Brug aspect-ratio CSS property
   • Reserve plads til iframe/video embeds
2. 2. Undgå at indsætte content above-the-fold
   • Dynamisk content (ads, banners) skal have reserved space
   • Brug min-height på containers
   • Load content below the fold
3. 3. Brug web fonts korrekt
   • Preload fonts: <link rel="preload" as="font">
   • Brug font-display: optional eller swap
   • System fonts som fallback
4. 4. Animations skal bruge transform
   • Brug transform i stedet for top/left
   • Brug opacity i stedet for visibility
   • GPU-accelererede properties

Hvordan måler du Core Web Vitals?

Værktøjer til måling:

• 1. Google PageSpeed Insights
  Gratis tool der viser både lab og field data. Indeholder konkrete forbedringsforslag.
• 2. Google Search Console
  Viser Core Web Vitals data fra rigtige brugere (field data). Opdateres dagligt.
• 3. Chrome DevTools (Lighthouse)
  Built-in i Chrome. Kør audits direkte i browseren.
• 4. Web Vitals Extension
  Chrome extension der viser real-time CWV mens du browser.
• 5. WebPageTest
  Avanceret testing fra forskellige locations og devices.

CMS-specifik optimering

WordPress:

• • Brug caching plugins (WP Rocket, W3 Total Cache)
• • Optimér images med Smush eller ShortPixel
• • Minimér plugins (hver plugin = mere JavaScript)
• • Brug et performant theme (GeneratePress, Astra)

Shopify:

• • Brug Shopify 2.0 themes (bedre performance)
• • Lazy load product images
• • Minimér apps (check app impact i Shopify admin)
• • Brug native lazy loading

Custom løsninger:

• • Static Site Generators (Next.js, Nuxt, Gatsby)
• • Edge rendering (Vercel, Netlify Edge)
• • Image optimization services (Cloudinary, Imgix)

Konklusion

Core Web Vitals er ikke bare en ranking-faktor – det er fundamentet for en god brugeroplevelse. Websites der scorer godt på LCP, INP og CLS har:

• • Bedre SEO rankings
• • Højere konverteringsrater
• • Lavere bounce rates
• • Mere tilfredse brugere

Start med at måle dine nuværende scores i Google Search Console. Prioritér de største problemer først, og husk: performance-optimering er en løbende proces, ikke et one-time projekt.