Hur man klarar Core Web Vitals med Next.js (2026)

Mindre än hälften av den mobila webben klarar Googles prestandakrav. År 2025 uppfyllde endast 48 % av mobila ursprung alla tre Core Web Vitals, upp från 36 % två år tidigare (HTTP Archive Web Almanac, 2025). Denna lucka är en möjlighet. Om dina konkurrenter är långsamma vinner en snabb Next.js-sajt både rankingen och konverteringen. Ramverket ger dig de flesta verktygen, men en standardbyggnation misslyckas fortfarande med många granskningar. Denna guide visar exakt hur vi täpper till den luckan.

Viktiga slutsatser

• En sida godkänns när LCP är 2,5s eller mindre, INP är 200ms eller mindre, och CLS är 0,1 eller mindre, mätt vid den 75:e percentilen av verkliga användare (web.dev, 2025).
• Endast 48 % av mobila ursprung klarade alla tre vitala mått 2025, och LCP är den svagaste länken med 62 % (Web Almanac, 2025).
• Hastighet är pengar: en e-handelssajt som laddar på 1 sekund konverterar cirka 2,5 gånger bättre än en på 4 sekunder (Portent, 2022).
• Next.js vinner på de fixar som betyder mest: Image- och Font-komponenterna, Server Components och dynamic() lazy loading.

Vad är Core Web Vitals 2026?

Core Web Vitals är tre mätvärden som Google använder för att bedöma verklig sidupplevelse: laddning, interaktivitet och visuell stabilitet. En URL godkänns endast när alla tre ligger i det "bra" intervallet vid den 75:e percentilen av sidvisningar (web.dev, 2025). Ett långsamt mätvärde gör att hela sidan misslyckas, så du kan inte byta en bra layoutpoäng mot en trög laddning.

Den största förändringen är interaktivitet. Interaction to Next Paint (INP) ersatte First Input Delay den 12 mars 2024 (web.dev, 2024). FID mätte endast fördröjningen innan ditt första tryck registrerades. INP mäter hela latensen för varje interaktion under besöket och rapporterar sedan den sämsta. Det är ett mycket svårare test, och tung klient-sidig JavaScript är det som oftast bryter det.

Här är målen du siktar på. Allt i det mellersta bandet är en varning, och det dåliga bandet är ett misslyckande.

Tröskelvärdena för 2026

• LCP (laddning): bra är 2,5s eller mindre, behöver arbete är 2,5 till 4,0s, dåligt är över 4,0s.
• INP (interaktivitet): bra är 200ms eller mindre, behöver arbete är 200 till 500ms, dåligt är över 500ms.
• CLS (visuell stabilitet): bra är 0,1 eller mindre, behöver arbete är 0,1 till 0,25, dåligt är över 0,25.

Varför är Core Web Vitals viktiga för SEO och intäkter?

De är viktiga eftersom långsamma sidor förlorar pengar och ranking samtidigt. Portent mätte 5,6 miljoner sessioner och fann att B2C-konverteringen sjönk från 3,05 % vid en laddning på 1 sekund till 0,67 % vid 4 sekunder, en minskning med ungefär 0,3 poäng per extra sekund (Portent, 2022). På SEO-sidan bekräftar Google att bra Core Web Vitals "överensstämmer med vad våra kärnrankningssystem strävar efter att belöna" (Google Search Central, 2025).

Intäktseffekten förstärks. I Googles och Deloittes studie av 37 varumärken och 30 miljoner sessioner, lyfte en enda 0,1-sekunders förbättring av mobilhastigheten detaljhandelskonverteringar med 8,4 % och genomsnittligt ordervärde med 9,2 % (web.dev, 2020). En tiondels sekund låter trivialt tills du multiplicerar det över en fjärdedel av trafiken.

För en djupare titt på hur detta kopplar till sökning, täcker vår guide till teknisk SEO för utvecklare indexerings- och renderingssidan. Hastighet är en pelare i ett större system.

Hur många sajter klarar egentligen Core Web Vitals?

De flesta gör det inte, och mobilen är där de kämpar. 2025 års Web Almanac angav den totala godkännandegraden till 48 % på mobila enheter och 56 % på stationära, med LCP som det svåraste mätvärdet med 62 % bra på mobila enheter mot 77 % för INP och 81 % för CLS (Web Almanac, 2025). Desktop INP är nästan löst med 97 %, men telefoner med långsamma processorer och ojämna nätverk berättar en annan historia.

Slutsatsen är strategisk. Om LCP misslyckas oftast, bör din första timme av optimering gå till hjältebilden och typsnitten, inte till mikrojustering av en knapphanterare. Åtgärda det mest uppenbara problemet först.

Hur åtgärdar vi LCP i Next.js?

LCP misslyckas när det största elementet, vanligtvis en hjältebild eller rubrik, tar för lång tid att rendera. Eftersom endast 62 % av mobila sajter klarar det, är det här de största vinsterna finns (Web Almanac, 2025). Next.js Image-komponenten är den enskilt viktigaste fixen: den serverar moderna format, genererar responsiva storlekar och låter dig flagga hjältebilden så att den laddas först.

Ställ in priority på den enda bilden ovanför vecket. Det säger till Next.js att förladda den istället för att lazy-ladda, vilket för en hjältebild är skillnaden mellan att klara och misslyckas.

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

Typsnitt är den andra LCP-fällan. Ett sent laddande webbtypsnitt blockerar textrendering och kan flytta rubriken. next/font självhostar filen vid byggtid, tar bort nätverksförfrågan till Google och tillämpar font-display: swap åt dig.

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

Slutligen, rendera innehåll ovanför vecket på servern. Server Components skickar HTML som webbläsaren kan rendera omedelbart, utan väntan på hydrering. Behåll hjältebilden, rubriken och den primära texten som serverrenderad utdata, och flytta interaktivitet till kanterna. I våra byggen drar flytt av en hjältebild från en klientkomponent och tillägg av priority rutinmässigt ner mobil LCP under 2,5s på egen hand.

Hur åtgärdar vi INP i Next.js?

INP misslyckas när JavaScript blockerar huvudtråden medan en användare försöker interagera. Lösningen är enkel att formulera men svårare att genomföra: skicka mindre JavaScript. Varje komponent du behåller på servern är kod som webbläsaren aldrig behöver tolka, och det förbättrar direkt interaktionslatensen (web.dev, 2024).

Ladda latensbelastade element som inte behövs för den första renderingen. En chattwidget, en karusell, en karta eller en rik redigerare bör laddas vid behov med dynamic(), inte i den initiala paketeringen.

import dynamic from 'next/dynamic';

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

För kostsamma tillståndsuppdateringar, berätta för React att de inte är brådskande. Att omsluta en filter- eller sökninguppdatering i useTransition håller inmatningen responsiv medan listan renderas om i bakgrunden, vilket är exakt vad INP belönar.

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

Behöver varje interaktiv funktion finnas i paketet vid laddning? Nästan aldrig. Granska dina klientkomponenter, och du kommer vanligtvis att upptäcka att en tredjedel av dem kan flyttas till servern. För en fullständig arkitekturgenomgång finns vår Next.js utvecklingstjänst för just denna typ av refaktorering.

Hur åtgärdar vi CLS i Next.js?

CLS misslyckas när element flyttas efter att de har renderats, och de vanliga orsakerna är bilder utan dimensioner, sena typsnitt och injicerade banners. Regeln är att reservera utrymme för allt innan det anländer. När du skickar width och height till Next.js Image-komponenten, genererar den en CSS-aspektförhållanderuta som håller layouten stabil innan filen laddas.

Samma logik gäller för inbäddningar och annonser. Slå in alla tredjeparts-iframes i en behållare med en fast min-height så att innehållet nedanför inte hoppar när inbäddningen hydreras.

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

Typsnitt orsakar de subtila förskjutningarna. next/font minskar detta genom att matcha ett reservmått till ditt webbtypsnitt, så att bytet från systemtext till det laddade typsnittet knappt rör sig. Kombinerat med storleksanpassade bilder är det detta som håller CLS bekvämt under 0,1-målet. CLS är det enklaste vitala måttet att klara när du väl gör "reservera utrymmet" till en vana.

Hur mäter och övervakar vi resultaten?

Labverktyg ljuger lite, så mät verkliga användare. Lighthouse och PageSpeed Insights ger dig en snabb avläsning i en kontrollerad miljö, men Google rankar baserat på fältdata från Chrome User Experience Report, insamlad från faktiska Chrome-besökare under 28 dagar. Den mobila godkännandegraden har klättrat varje år, från 36 % 2023 till 48 % 2025, och ribban fortsätter att höjas (Web Almanac, 2025).

För att samla in dina egna fältdata, strömmar useReportWebVitals-hooken varje mätvärde från verkliga sessioner till din analysslutpunkt. Vercel Speed Insights omsluter detta åt dig, men den råa hooken fungerar överallt.

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

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

Vårt fynd: labb- och fältresultat skiljer sig mest åt för INP, eftersom Lighthouse körs på en snabb maskin utan verkliga tryck. Lita på CrUX-värdet för INP, och behandla Lighthouse-resultatet som endast ett snabbtest.

Redo att klara din granskning?

Core Web Vitals belönar sajter som respekterar användarens tid, och Next.js är byggt för det. Om din nuvarande stack motarbetar dig, eller om du vill ha en byggnation som levererar snabbt som standard, planerar, bygger och finjusterar vi Next.js-sajter från början till slut. Se våra priser eller kontakta oss för att diskutera dina siffror.

Vanliga frågor

Vilka är Core Web Vitals-tröskelvärdena 2026?

En sida godkänns när LCP är 2,5 sekunder eller mindre, INP är 200 millisekunder eller mindre, och CLS är 0,1 eller mindre. Google mäter varje mätvärde vid den 75:e percentilen av verkliga användares sidvisningar (web.dev, 2025), så ett fåtal snabba laddningar kommer inte att rädda en långsam svans.

Klarar Next.js automatiskt Core Web Vitals?

Nej. Next.js ger dig Image- och Font-komponenterna, Server Components och streaming, men en standardbyggnation kan fortfarande misslyckas. Du måste ställa in bild priority, reservera layoututrymme och trimma klient-JavaScript. Ramverket tar bort de svåra delarna, det tar inte bort arbetet.

Vad ersatte First Input Delay?

Interaction to Next Paint ersatte First Input Delay den 12 mars 2024 (web.dev, 2024). INP mäter latensen för varje interaktion under ett besök, inte bara den första, vilket gör tung JavaScript mycket mer synlig i poängen.

Påverkar Core Web Vitals Googles ranking?

Ja, som en del av sidupplevelsesignalerna. Google anger att goda vitala mått överensstämmer med vad dess kärnrankningssystem belönar (Google Search Central, 2025). Effekten är starkast på konkurrenskraftiga mobila sökfrågor där många resultat annars är likartade.

Vilket Core Web Vital är svårast att klara på mobilen?

Largest Contentful Paint. Endast 62 % av mobila ursprung uppnådde en bra LCP 2025, jämfört med 77 % för INP och 81 % för CLS (Web Almanac, 2025). Långsamma hjältebilder och render-blockerande typsnitt är den vanliga orsaken, vilket är anledningen till att Image-komponenten är den första åtgärden.

Slutsats

Att klara Core Web Vitals är inte tur, det är en checklista. Åtgärda LCP med Image-komponenten, priority och next/font. Åtgärda INP genom att skicka mindre JavaScript via Server Components och dynamic(). Åtgärda CLS genom att reservera utrymme för varje bild och inbäddning. Mät sedan verkliga användare med CrUX och useReportWebVitals-hooken, eftersom fältdata är vad Google faktiskt bedömer. Hälften av den mobila webben misslyckas fortfarande med detta krav. En ren Next.js-byggnation är hur du hamnar i den snabbare hälften. När du är redo att lansera, finns våra senaste guider och vårt team här för att hjälpa till.