Frontend Academy · leksjon

Core Web Vitals: LCP, FID og CLS

Forstå hva Largest Contentful Paint, First Input Delay og Cumulative Layout Shift måler, og hvorfor Google bruker dem som rangeringssignaler.

Leksjon 1 av 413 trinn

Core Web Vitals: LCP, FID og CLS er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor ytelse er viktig

Trege sider mister brukere. Google gjorde ytelse til et rangeringssignal: nettsteder med dårlige Core Web Vitals-resultater rangeres lavere i søkeresultatene. Utover SEO reduserer hver forsinkelse på 100 ms konvertering og engasjement på en målbar måte.

De tre viktigste Core Web Vitals

Google måler tre brukeropplevelsesmålinger: LCP (innlastingshastighet), FID (interaktivitet) og CLS (visuell stabilitet). Hver av dem har tersklene «God», «Trenger forbedring» og «Dårlig».

Largest Contentful Paint (LCP)

LCP måler når det største synlige innholdselementet (bilde, videoplakate eller tekstblokk) er ferdig gjengitt. Godt: under 2,5 sekunder. Dårlig: over 4 sekunder. Optimaliser ved å forhåndslaste hero-bilder, redusere ressurser som blokkerer gjengivelsen og bruke et raskt CDN.

First Input Delay (FID) og INP

FID måler forsinkelsen mellom brukerens første interaksjon (klikk, trykk) og nettleserens respons. Godt: under 100 ms. I 2024 ble FID erstattet av Interaction to Next Paint (INP), som måler alle interaksjoner, ikke bare den første.

Cumulative Layout Shift (CLS)

CLS måler uventede layoutforskyvninger mens siden lastes inn. Godt: under 0,1. Dårlig: over 0,25. Skyldes bilder uten dimensjoner, skrifter som lastes inn sent, og annonser som settes inn etter første visning.

Måling av CWV i nettleseren

Bruk npm-pakken web-vitals til å hente inn målinger fra ekte brukere og sende dem til analyseendepunktet.

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
  });
}

Slik løser du LCP: Forhåndslast hero-bildet

Be nettleseren laste ned hero-bildet tidlig, før resten av HTML-koden analyseres.

<!-- 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">

Slik løser du CLS: Reserver plass

Angi alltid width og height for bilder og innebygde elementer, slik at nettleseren reserverer plass før ressursen lastes inn. Bruk CSS-egenskapen aspect-ratio for responsive beholdere.

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

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

Slik løser du INP: Del opp lange oppgaver

Lange JavaScript-oppgaver blokkerer hovedtråden og forsinker svar på klikk. Del opp arbeidet i mindre deler med scheduler.yield() eller setTimeout, slik at nettleseren kan tegne siden og reagere på inndata.

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 kontrollert miljø. Feltdata (CrUX, RUM) samles inn fra ekte brukere på ekte enheter. Feltdata er fasiten for SEO-rangering.

Ytelsesbudsjetter

Angi tydelige grenser, for eksempel LCP under 2 s og JavaScript-pakken under 200 kB. Håndhev dem i CI med Lighthouse CI eller @bundle-analyzer, slik at bygg som gir dårligere ytelse, feiler.

Rask kontroll

Hvilken Core Web Vital måler uventede visuelle hopp mens siden lastes inn?

Besvar den i den interaktive leksjonen

Oppsummering: Core Web Vitals

LCP: innlastingshastigheten til det største elementet, med mål under 2,5 s. INP (tidligere FID): responsivitet, med mål under 200 ms. CLS: visuell stabilitet, med mål under 0,1. Mål i produksjon med web-vitals-pakken, og bruk Lighthouse i CI. Det er feltdata, ikke labdata, som påvirker SEO.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Core Web Vitals: LCP, FID og CLS» gratis?

Ja – hele teksten i «Core Web Vitals: LCP, FID og CLS» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Core Web Vitals: LCP, FID og CLS»?

Forstå hva Largest Contentful Paint, First Input Delay og Cumulative Layout Shift måler, og hvorfor Google bruker dem som rangeringssignaler. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Core Web Vitals: LCP, FID og CLS»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Core Web Vitals: LCP, FID og CLS
Lighthouse-auditeringer og poengberegning
Bildeoptimalisering: lazy loading og WebP-formater
Code splitting og lazy routes

← Tilbake til Frontend Academy