Hvordan bestå Core Web Vitals med Next.js (2026)

Mindre enn halvparten av den mobile nettet passerer Googles ytelsesbarriere. I 2025 oppfylte bare 48 % av mobile opprinnelser alle tre Core Web Vitals, opp fra 36 % to år tidligere (HTTP Archive Web Almanac, 2025). Dette gapet er en mulighet. Hvis konkurrentene dine er trege, vinner et raskt Next.js-nettsted både rangeringen og konverteringen. Rammeverket gir deg de fleste verktøyene, men et standardoppsett feiler fortsatt mange revisjoner. Denne guiden viser nøyaktig hvordan vi lukker dette gapet.

Viktige punkter

• En side passerer når LCP er 2,5s eller mindre, INP er 200ms eller mindre, og CLS er 0,1 eller mindre, målt ved 75. persentil av virkelige brukere (web.dev, 2025).
• Bare 48 % av mobile opprinnelser besto alle tre vitalene i 2025, og LCP er det svakeste leddet med 62 % (Web Almanac, 2025).
• Hastighet er penger: et e-handelsnettsted som lastes på 1 sekund konverterer omtrent 2,5 ganger bedre enn et som lastes på 4 sekunder (Portent, 2022).
• Next.js vinner på de viktigste løsningene: Image- og Font-komponentene, Server Components, og dynamic() lazy loading.

Hva er Core Web Vitals i 2026?

Core Web Vitals er tre målinger Google bruker for å vurdere den virkelige brukeropplevelsen på sider: lasting, interaktivitet og visuell stabilitet. En URL passerer bare når alle tre ligger i "god" båndet ved 75. persentil av sidevisninger (web.dev, 2025). Én treg måling fører til at hele siden feiler, så du kan ikke bytte en flott layoutscore mot en treg lasting.

Den største endringen er interaktivitet. Interaction to Next Paint (INP) erstattet First Input Delay den 12. mars 2024 (web.dev, 2024). FID målte bare forsinkelsen før ditt første trykk ble registrert. INP måler den fulle latensen for hver interaksjon under besøket, og rapporterer deretter den verste. Det er en mye vanskeligere test, og tung klient-side JavaScript er det som vanligvis ødelegger den.

Her er målene du sikter mot. Alt i midtbåndet er en advarsel, og det dårlige båndet er en feil.

2026-terskelverdiene

• LCP (lasting): god er 2,5s eller mindre, trenger arbeid er 2,5 til 4,0s, dårlig er over 4,0s.
• INP (interaktivitet): god er 200ms eller mindre, trenger arbeid er 200 til 500ms, dårlig er over 500ms.
• CLS (visuell stabilitet): god er 0,1 eller mindre, trenger arbeid er 0,1 til 0,25, dårlig er over 0,25.

Hvorfor er Core Web Vitals viktig for SEO og inntekter?

De er viktige fordi trege sider taper penger og rangeringer samtidig. Portent målte 5,6 millioner sesjoner og fant at B2C-konverteringen falt fra 3,05 % ved 1 sekunds lasting til 0,67 % ved 4 sekunder, en nedgang på omtrent 0,3 poeng per ekstra sekund (Portent, 2022). På SEO-siden bekrefter Google at gode Core Web Vitals "stemmer overens med det våre kjerne-rangeringssystemer søker å belønne" (Google Search Central, 2025).

Inntekts-effekten forsterkes. I Googles og Deloittes studie av 37 merker og 30 millioner sesjoner, løftet en enkelt 0,1-sekunds forbedring i mobilhastighet detaljhandelskonverteringer med 8,4 % og gjennomsnittlig ordreresultat med 9,2 % (web.dev, 2020). Et tiendedels sekund høres trivielt ut helt til du multipliserer det over en fjerdedel av trafikken.

For en dypere titt på hvordan dette henger sammen med søk, dekker vår guide til teknisk SEO for utviklere indekserings- og gjengivelsessiden. Hastighet er en søyle i et større system.

Hvor mange nettsteder passerer faktisk Core Web Vitals?

De fleste gjør det ikke, og mobil er der de sliter. 2025 Web Almanac satte den totale bestått-raten til 48 % på mobil og 56 % på desktop, med LCP som den vanskeligste metrikken med 62 % god på mobil mot 77 % for INP og 81 % for CLS (Web Almanac, 2025). Desktop INP er nesten løst med 97 %, men telefoner med trege CPU-er og ustabile nettverk forteller en annen historie.

Læringspunktet er strategisk. Hvis LCP feiler oftest, bør din første time med optimalisering gå til heltebildet og skriftene, ikke til mikrojustering av en knapphåndterer. Fiks det åpenbare problemet først.

Hvordan fikser vi LCP i Next.js?

LCP feiler når det største elementet, vanligvis et heltebilde eller en overskrift, tar for lang tid å gjengi. Siden bare 62 % av mobile nettsteder passerer den, er det her de største gevinstene ligger (Web Almanac, 2025). Next.js Image-komponenten er den viktigste løsningen: den serverer moderne formater, genererer responsive størrelser, og lar deg flagge helten slik at den lastes først.

Sett priority på det ene bildet over bretten. Det forteller Next.js å forhåndslaste det i stedet for å lazy-loade, noe som på et heltebilde er forskjellen mellom å bestå og å feile.

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Product dashboard"
      width={1200}
      height={630}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

Skrifter er den andre LCP-fellen. En sentlastende webfont blokkerer tekstgjengivelse og kan flytte overskriften. next/font selv-hoster filen ved byggetid, fjerner nettverksforespørselen til Google, og bruker font-display: swap for deg.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return <html className={inter.className}><body>{children}</body></html>;
}

Til slutt, gjengi innholdet over bretten på serveren. Server Components sender HTML som nettleseren kan gjengi umiddelbart, uten hydreringsventetid. Behold helten, overskriften og hovedteksten som server-gjengitt utdata, og skyv interaktivitet til kantene. I våre bygg trekker det å flytte en helt ut av en klientkomponent og legge til priority rutinemessig mobil LCP under 2,5s på egen hånd.

Hvordan fikser vi INP i Next.js?

INP feiler når JavaScript blokkerer hovedtråden mens en bruker prøver å interagere. Løsningen er enkel å si og vanskeligere å gjøre: send mindre JavaScript. Hver komponent du beholder på serveren er kode nettleseren aldri trenger å parse, og det forbedrer direkte interaksjonslatensen (web.dev, 2024).

Lazy-load alt tungt som ikke trengs for den første gjengivelsen. En chat-widget, en karusell, et kart eller en rik editor bør lastes på forespørsel med dynamic(), ikke i den opprinnelige pakken.

import dynamic from 'next/dynamic';

const CommentEditor = dynamic(() => import('./CommentEditor'), {
  ssr: false,
  loading: () => <div className="editor-skeleton" />,
});

For kostbare tilstandsoppdateringer, fortell React at de ikke er presserende. Å pakke inn en filter- eller søkeoppdatering i useTransition holder inndata responsive mens listen gjengis på nytt i bakgrunnen, noe som er nøyaktig hva INP belønner.

'use client';
import { useState, useTransition } from 'react';

export function Filter({ items }) {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  return (
    <input
      onChange={(e) => {
        const value = e.target.value;
        startTransition(() => setQuery(value));
      }}
    />
  );
}

Må hver interaktive funksjon være i pakken ved lasting? Nesten aldri. Reviser klientkomponentene dine, og du vil vanligvis finne at en tredjedel av dem kan flyttes til serveren. For en full arkitekturvurdering eksisterer vår Next.js utviklingstjeneste for akkurat denne typen refaktorering.

Hvordan fikser vi CLS i Next.js?

CLS feiler når elementer flytter seg etter at de er gjengitt, og de vanlige synderne er bilder uten dimensjoner, sene skrifter og injiserte bannere. Regelen er å reservere plass til alt før det ankommer. Når du sender width og height til Next.js Image-komponenten, genererer den en CSS-aspektforholdsboks som holder layouten stabil før filen lastes.

Samme logikk gjelder for innbygginger og annonser. Pakk inn enhver tredjeparts iframe i en beholder med en fast min-height slik at innholdet under ikke hopper når innbyggingen hydreres.

<div style={{ minHeight: 400, position: 'relative' }}>
  <Image src="/chart.webp" alt="Quarterly results" fill sizes="100vw" />
</div>

Skrifter forårsaker de subtile forskyvningene. next/font reduserer dette ved å matche en fallback-metrikk til webfonten din, slik at byttet fra systemtekst til den lastede skriften knapt flytter seg. Kombinert med dimensjonerte bilder er dette det som holder CLS komfortabelt under 0,1-målet. CLS er den enkleste vitalen å bestå når du gjør "reserver plassen" til en vane.

Hvordan måler og overvåker vi resultatene?

Laboratorieverktøy lyver litt, så mål virkelige brukere. Lighthouse og PageSpeed Insights gir deg en rask avlesning i et kontrollert miljø, men Google rangerer basert på feltdata fra Chrome User Experience Report, samlet fra faktiske Chrome-besøkende over 28 dager. Den mobile bestått-raten har steget hvert år, fra 36 % i 2023 til 48 % i 2025, og standarden fortsetter å stige (Web Almanac, 2025).

For å samle dine egne feltdata, strømmer useReportWebVitals-hooken hver metrikk fra virkelige sesjoner til ditt analyseendepunkt. Vercel Speed Insights pakker dette for deg, men den rå hooken fungerer hvor som helst.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

Vårt funn: lab- og feltresultater avviker mest på INP, fordi Lighthouse kjører på en rask maskin uten virkelige trykk. Stol på CrUX-nummeret for INP, og behandle Lighthouse-resultatet kun som en røyktest.

Klar til å bestå revisjonen din?

Core Web Vitals belønner nettsteder som respekterer brukerens tid, og Next.js er bygget for det. Hvis din nåværende stack motarbeider deg, eller du ønsker et bygg som leveres raskt som standard, planlegger, bygger og finjusterer vi Next.js-nettsteder fra start til slutt. Se våre priser eller ta kontakt for å snakke om tallene dine.

Ofte stilte spørsmål

Hva er Core Web Vitals-terskelverdiene i 2026?

En side passerer når LCP er 2,5 sekunder eller mindre, INP er 200 millisekunder eller mindre, og CLS er 0,1 eller mindre. Google måler hver metrikk ved 75. persentil av virkelige brukeres sidevisninger (web.dev, 2025), så en håndfull raske innlastinger vil ikke redde en treg hale.

Består Next.js automatisk Core Web Vitals?

Nei. Next.js gir deg Image- og Font-komponentene, Server Components og strømming, men et standardbygg kan fortsatt feile. Du må sette bilde priority, reservere layoutplass og trimme klient-JavaScript. Rammeverket fjerner de vanskelige delene, det fjerner ikke arbeidet.

Hva erstattet First Input Delay?

Interaction to Next Paint erstattet First Input Delay den 12. mars 2024 (web.dev, 2024). INP måler latensen for hver interaksjon under et besøk, ikke bare den første, noe som gjør tung JavaScript langt mer synlig i poengsummen.

Påvirker Core Web Vitals Google-rangeringer?

Ja, som en del av sidens opplevelsessignaler. Google uttaler at gode vitaler stemmer overens med det kjerne-rangeringssystemene belønner (Google Search Central, 2025). Effekten er sterkest på konkurransedyktige mobile søk der mange resultater ellers er like.

Hvilken Core Web Vital er vanskeligst å bestå på mobil?

Largest Contentful Paint. Bare 62 % av mobile opprinnelser oppnådde en god LCP i 2025, mot 77 % for INP og 81 % for CLS (Web Almanac, 2025). Trege heltebilder og gjengivelsesblokkerende skrifter er den vanlige årsaken, derfor er Image-komponenten den første løsningen.

Konklusjon

Å bestå Core Web Vitals er ikke flaks, det er en sjekkliste. Fiks LCP med Image-komponenten, priority og next/font. Fiks INP ved å sende mindre JavaScript gjennom Server Components og dynamic(). Fiks CLS ved å reservere plass for hvert bilde og hver innbygging. Mål deretter virkelige brukere med CrUX og useReportWebVitals-hooken, fordi feltdata er det Google faktisk scorer. Halvparten av den mobile nettet feiler fortsatt denne barrieren. Et rent Next.js-bygg er hvordan du havner i den raskere halvdelen. Når du er klar til å lansere, er våre nyeste guider og vårt team her for å hjelpe.