Core Web Vitals: 12 trin til 90+ Lighthouse-score

Hastighed er hverken et "nice to have" eller et "performance-team-problem". Det er SEO. Det er konvertering. Det er bundlinje. Her er præcis hvad vi gør for at få sites fra 30 til 95 på Lighthouse — typisk på en uge.

De målbare grænser i 2026

• LCP (Largest Contentful Paint): < 2,5 sek for "Good"
• INP (Interaction to Next Paint): < 200 ms for "Good"
• CLS (Cumulative Layout Shift): < 0,1 for "Good"

Bemærk: INP erstattede FID i 2024. Hvis nogen taler om FID, er de bagefter.

De 12 trin — i prioriteret rækkefølge

1. Komprimer hero-billedet

50%+ af "langsomme" sites har et 5+ MB hero-billede. Komprimer til WebP / AVIF, max 300 KB. Brug <Image> fra Next.js eller <picture> med srcset.

2. Server hero som "above-the-fold" priority

Tilføj fetchpriority="high" til hero-billedet og preload-tag i head. Det fortæller browseren "load mig først".

3. Eliminér render-blocking scripts

3rd-party scripts (Google Analytics, Cookiebot, chat-widgets) blokerer ofte rendering. Brug async eller defer. For Next.js: brug next/script med strategy="afterInteractive".

4. Bundle-size reduktion

Hver KB JavaScript = 3-5 ms parse-tid på low-end mobile. Tjek bundle med @next/bundle-analyzer. Top synder: imports af hele biblioteker (fx moment.js, lodash) når I kun bruger én funktion.

5. Lazy-loading af alt under folden

Billeder, embeds, videoer der ikke vises initialt skal lazy-loade. loading="lazy" på img-tags. Component-niveau lazy-load i React via dynamic().

6. Font-optimering

Google Fonts via next/font eller selv-hostede. Brug font-display: swap. Begræns antal vægtninger (typisk 400 + 700 er nok).

7. CSS-bloat fjernes

Bootstrap eller Tailwind med ubrugte klasser kan let være 500 KB+. Tree-shake. Brug Tailwind med JIT-mode. Sørg for "purge" / "content" config er korrekt.

8. CDN for static assets

Hvis I er på Vercel/Netlify/Cloudflare Pages er det automatisk. Hvis I selv-hoster, sæt en CDN (Cloudflare, Bunny) foran. Faktor 5-10× hurtigere globalt.

9. Eliminér layout shifts

Alle billeder skal have width/height attributter. Alle ads/embeds skal have reserveret plads. Fonts skal have fallback-stack der matcher i bredde.

10. Reducer Time to First Byte (TTFB)

Skifter I fra et langsomt hosted CMS (WordPress, Shopify Liquid) til SSG/ISR (Next.js) kan TTFB gå fra 800 ms til 80 ms. Det er den enkelt-største enkeltinvestering i hastighed.

11. Optimer database queries

Server-rendered sider venter ofte på lange DB-queries. N+1 queries er den hyppigste synder. Brug query batching / dataloaders. Cache aggressivt.

12. Reduce JavaScript execution

INP måler hvor hurtigt siden reagerer på input. Tunge JavaScript-operationer på main thread blokerer det. Flyt arbejde til Web Workers, brug requestIdleCallback, debounce inputs.

Diagnostic flow

1. Kør Lighthouse i Chrome DevTools (eller vores Speed Test)
2. Fokuser på "Opportunities" — sorteret efter estimeret tidsbesparelse
3. Tackle top 3 først — de giver typisk 80% af forbedringen
4. Retest, gentag

Eksempel: kunde fra 31 til 96

Shopify-baseret e-com med 28.000 produkter:

• Før: Performance 31, LCP 6,4s, INP 380ms, CLS 0,28
• Ændringer: Hero-billede 4,2MB → 280KB. Fjernet 4 ubrugte 3rd-party tags. Lazy-load alle product-card billeder. Reserveret plads for sticky CTA (fjernede CLS).
• Efter (5 dage senere): Performance 96, LCP 1,8s, INP 90ms, CLS 0,02
• Effekt: +18% organic trafik over 8 uger. +12% konvertering på mobile.

Typiske fælder

• Optimering for desktop ignorerer mobil — Google ranker på mobil-performance
• Lab-tests vs field-tests — Lighthouse er lab, Search Console viser real-user data. Optimér efter field
• Tracking-tags der bremser hele setup\'et — server-side tagging kan hjælpe
• "Vi venter til vi laver redesign" — du taber rankings hver dag