Largest Contentful Paint
Interaction to Next Paint
Cumulative Layout Shift
Google Mobile & Desktop
Maksimal SERP-fordelHvorfor Core Web Vitals er en direkte rangerings- og konverteringsfaktor
Google integrerte Core Web Vitals som en offisiell rangeringsfaktor gjennom Page Experience-systemet. Når en bruker klikker på et søkeresultat og opplever at siden henger, hakker eller flytter på seg, oppstår fenomenet "pogo-sticking" – brukeren trykker umiddelbart tilbake til Google for å velge et annet resultat. Googles NavBoost-algoritme registrerer disse negative brukersignalene, noe som gradvis svekker sidens organiske autoritet.
Utover søkerangering viser analyser fra Google at en forbedring av LCP med 0,1 sekund gir opptil 8 % høyere konverteringsrate i nettbutikker og B2B-tjenester. Teknisk ytelse er dermed ikke bare en SEO-hygienefaktor, men en direkte driver for selskapets bunnlinje.
De 3 offisielle Core Web Vitals-metrikkene i 2026
Google måler tre distinkte faser av sideinnlastingen. Hver metrikk har strenge grenseverdier for hva som klassifiseres som "God", "Trenger forbedring" eller "Dårlig":
| Metrikk | Måleparameter | Grønn terskel (God) | Typisk feilkilde | Teknisk løsning |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Tid til største synlige innhold er ferdig tegnet | < 2,5 sek (< 1,2s optimalt) | Tunge heltebilder, trege webfonter, render-blocking CSS | WebP/AVIF, preload hero-bilde, inline kritisk CSS |
| INP (Interaction to Next Paint) | Responsivitet ved klikk og tappehandlinger | < 200 millisekunder | Tunge JavaScript-tråder som blokkerer hovedtråden | Eliminering av klient-JS, oppdeling av lange oppgaver |
| CLS (Cumulative Layout Shift) | Uventede layout-hopp under sidelasting | < 0,1 score (optimalt 0,00) | Bilder eller bannere uten faste width/height-attributter | Eksplisitte dimensjoner og aspect-ratio i CSS |
LCP-optimalisering: Preloading av hero-ressurser og serverrespons
I over 70 % av tilfellene er LCP-elementet et heltebilde, en videoposter eller en stor overskriftsblokk med tilpasset webfont. For å få LCP under 1,2 sekunder må nettleseren oppdage og prioritere ressursen umiddelbart, uten å vente på at hele CSS- eller JavaScript-treet parses.
Implementer <link rel="preload"> med fetchpriority="high" i dokumentets <head> for det primære heltebildet. Unngå samtidig loading="lazy" på elementer som vises over bretten (above the fold) – latsabb-lasting på heltebilder er en av de vanligste årsakene til rød LCP-score.
<!-- 1. Preload det kritiske LCP-bildet i HTML-hodet -->
<link rel="preload" fetchpriority="high" as="image" href="/images/hero-banner.webp" type="image/webp" />
<!-- 2. Markup i body: unngå lazy loading over bretten, sett eksplisitt bredde/høyde -->
<picture>
<source srcset="/images/hero-banner.avif" type="image/avif" />
<source srcset="/images/hero-banner.webp" type="image/webp" />
<img
src="/images/hero-banner.jpg"
alt="Teknisk SEO analyse for bedrifter"
width="1280"
height="720"
loading="eager"
decoding="async"
style="aspect-ratio: 16 / 9; width: 100%; height: auto;"
/>
</picture>INP-optimalisering: Hvordan eliminere JavaScript-forsinkelser
Interaction to Next Paint (INP) måler den tregeste interaksjonen brukeren opplever gjennom hele sidebesøket – enten det er et klikk på en hamburgermeny, utfylling av et skjema eller trykk på en trekkspillfane (FAQ-accordion). Hvis hovedtråden er opptatt med å kjøre tunge JavaScript-oppgaver (Tasks over 50ms), vil brukerens klikk fryse i påvente av CPU-ressurser.
For å bestå INP må du bryte opp monolittiske JavaScript-tråder. Ved å bruke scheduler.yield() eller requestAnimationFrame gir du nettleseren mulighet til å male brukerens visuelle respons (f.eks. en trykket knappetilstand) umiddelbart før videre kalkulasjoner fortsetter i bakgrunnen.
// Funksjon som utfører en tung beregning uten å blokkere UI-tråden
async function handleUserInteraction(event) {
// 1. Gi umiddelbar visuell tilbakemelding til brukeren
event.target.classList.add('is-loading');
// 2. Yield til nettleserens hovedtråd slik at neste bilde (frame) kan males
if ('scheduler' in window && 'yield' in window.scheduler) {
await window.scheduler.yield();
} else {
await new Promise(resolve => setTimeout(resolve, 0));
}
// 3. Utfør tyngre prosessering etter at UI-et har oppdatert seg
processHeavyData();
}CLS-optimalisering: Reserver plass for dynamisk innhold og fonter
Cumulative Layout Shift (CLS) oppstår når elementer flytter posisjon mens siden tegnes opp. Typiske syndere er annonsebannere, cookie-bannere, dynamiske varsler eller webfonter som bytter plass (Flash of Unstyled Text / FOUT).
Løsningen er å reservere eksakt plass i CSS før ressursen er lastet. For webfonter bør du benytte font-display: optional eller font-display: swap med presis size-adjust i @font-face for å matche fallback-fontens metrikker.
- Sett alltid eksplisitte width og height-attributter på alle
<img>,<video>og<iframe>. - Bruk CSS
aspect-ratiopå responsive container-elementer for å reservere vertikal plass. - Unngå å sette inn innhold dynamisk over eksisterende innhold etter brukerinteraksjon med mindre det skjer som direkte respons på et klikk.
- Preload nøkkelfonter med
<link rel="preload" as="font" type="font/woff2" crossorigin>for å unngå font-reflow.