Frontend Academy · Lektion

Core Web Vitals: LCP FID CLS

Forstå, hvad Largest Contentful Paint, First Input Delay og Cumulative Layout Shift måler, og hvorfor Google bruger dem som ranking-signaler.

Lektion 1 af 413 trin

Core Web Vitals: LCP FID CLS er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor ydeevne er vigtig

Langsomme sider mister brugere. Google har gjort ydeevne til et rangeringssignal: websteder med dårlige resultater for Core Web Vitals rangerer lavere i søgeresultater. Ud over SEO reducerer hver forsinkelse på 100 ms målbar konvertering og brugerengagement.

De tre vigtigste Core Web Vitals

Google måler tre målepunkter for brugeroplevelsen: LCP (indlæsningshastighed), FID (interaktivitet) og CLS (visuel stabilitet). Hver måling har grænserne »God«, »Kræver forbedring« og »Dårlig«.

Largest Contentful Paint (LCP)

LCP måler, hvornår det største synlige indholdselement (billede, videoplakat eller tekstblok) er færdiggengivet. God: under 2,5 s. Dårlig: over 4 s. Forbedr resultatet ved at forudindlæse hovedbilleder, reducere ressourcer, der blokerer gengivelsen, og bruge et hurtigt CDN.

Forsinkelse ved første input (FID) og INP

FID måler forsinkelsen mellem brugerens første interaktion (klik eller tryk) og browserens svar. God: under 100 ms. I 2024 blev FID erstattet af Interaction to Next Paint (INP), som måler alle interaktioner, ikke kun den første.

Cumulative Layout Shift (CLS)

CLS måler uventede layoutskift under indlæsning af siden. Godt: under 0,1. Dårligt: over 0,25. Det skyldes billeder uden dimensioner, skrifttyper der indlæses sent, og annoncer der indsættes efter første rendering.

Måling af CWV i browseren

Brug npm-pakken web-vitals til at indsamle målinger fra rigtige brugere og sende dem til dit analyse-endpoint.

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));

function sendToAnalytics({ name, value, id }) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ name, value, id }),
    keepalive: true
  });
}

Sådan løser du LCP: Forudindlæs hero-billedet

Bed browseren om at downloade hero-billedet tidligt, før resten af HTML'en parses.

<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

Sådan løser du CLS: Reserver plads

Sæt altid width og height på billeder og indlejrede elementer, så browseren reserverer plads, før ressourcen ankommer. Brug CSS-egenskaben aspect-ratio til responsive containere.

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">

Sådan løser du INP: Opdel lange opgaver

Lange JavaScript-opgaver blokerer hovedtråden og forsinker reaktionen på klik. Opdel arbejdet i mindre dele med scheduler.yield() eller setTimeout, så browseren kan rendere og reagere på input.

async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
  }
}

Labdata kontra feltdata

Labdata (Lighthouse) er en syntetisk test i et kontrolleret miljø. Feltdata (CrUX, RUM) indsamles fra rigtige brugere på rigtige enheder. Feltdata er den sande kilde til SEO-placeringer.

Ydelsesbudgetter

Angiv eksplicitte grænser: f.eks. LCP under 2 sekunder og JavaScript-bundlet under 200 KB. Håndhæv dem i CI med Lighthouse CI eller @bundle-analyzer, så builds, der forringer ydeevnen, fejler.

Hurtigt tjek

Hvilken Core Web Vital måler uventede visuelle spring under indlæsning af siden?

Besvar den i den interaktive lektion

Opsummering: Core Web Vitals

LCP: indlæsningshastigheden for det største element, mål under 2,5 sekunder. INP (tidligere FID): reaktionsevne, mål under 200 ms. CLS: visuel stabilitet, mål under 0,1. Mål i produktion med pakken web-vitals, og brug Lighthouse i CI. SEO drives af feltdata, ikke labdata.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Core Web Vitals: LCP FID CLS” gratis?

Ja — hele teksten til “Core Web Vitals: LCP FID CLS” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Core Web Vitals: LCP FID CLS”?

Forstå, hvad Largest Contentful Paint, First Input Delay og Cumulative Layout Shift måler, og hvorfor Google bruger dem som ranking-signaler. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Core Web Vitals: LCP FID CLS”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Core Web Vitals: LCP FID CLS
Lighthouse-audits og scoring
Billedoptimering: lazy loading og formater som WebP
Code splitting og lazy routes

← Tilbage til Frontend Academy