Miten läpäistä Core Web Vitals Next.js:llä (2026)

Alle puolet mobiiliverkosta läpäisee Googlen suorituskykyvaatimukset. Vuonna 2025 vain 48 % mobiilisivustoista täytti kaikki kolme Core Web Vitals -vaatimusta, mikä on nousua kahden vuoden takaisesta 36 %:sta (HTTP Archive Web Almanac, 2025). Tämä ero on mahdollisuus. Jos kilpailijasi ovat hitaita, nopea Next.js-sivusto voittaa sekä sijoituksissa että konversioissa. Viitekehys antaa sinulle suurimman osan työkaluista, mutta oletusrakennelma epäonnistuu silti monissa auditoinneissa. Tämä opas näyttää tarkalleen, miten me kuromme tämän kuilun umpeen.

Keskeiset huomiot

• Sivu läpäisee testin, kun LCP on 2,5 s tai vähemmän, INP on 200 ms tai vähemmän ja CLS on 0,1 tai vähemmän, mitattuna todellisten käyttäjien 75. persentiilillä (web.dev, 2025).
• Vain 48 % mobiilisivustoista läpäisi kaikki kolme elintärkeää mittaria vuonna 2025, ja LCP on heikoin lenkki 62 %:lla (Web Almanac, 2025).
• Nopeus on rahaa: verkkokauppasivusto, joka latautuu 1 sekunnissa, konvertoi noin 2,5 kertaa paremmin kuin 4 sekunnissa latautuva (Portent, 2022).
• Next.js voittaa tärkeimmissä korjauksissa: Image- ja Font-komponentit, Server Components ja dynamic()-viivästetty lataus.

Mitä ovat Core Web Vitals -mittarit vuonna 2026?

Core Web Vitals ovat kolme mittaria, joita Google käyttää arvioimaan todellista sivukokemusta: lataus, interaktiivisuus ja visuaalinen vakaus. URL-osoite läpäisee testin vain, kun kaikki kolme ovat "hyvä"-luokassa sivun katselukertojen 75. persentiilillä (web.dev, 2025). Yksi hidas mittari kaataa koko sivun, joten et voi vaihtaa hyvää ulkoasupistettä hitaaseen lataukseen.

Suurin muutos on interaktiivisuus. Interaction to Next Paint (INP) korvasi First Input Delayn 12. maaliskuuta 2024 (web.dev, 2024). FID mittasi vain viivettä ennen ensimmäisen napautuksen rekisteröitymistä. INP mittaa jokaisen vuorovaikutuksen täyden viiveen koko vierailun ajan ja raportoi sitten huonoimman. Se on paljon vaikeampi testi, ja raskas asiakaspuolen JavaScript yleensä rikkoo sen.

Tässä ovat tavoitteet, joihin pyrit. Kaikki keskimmäisessä luokassa on varoitus, ja huono luokka on epäonnistuminen.

Vuoden 2026 kynnysarvot

• LCP (lataus): hyvä on 2,5 s tai vähemmän, vaatii työtä on 2,5–4,0 s, huono on yli 4,0 s.
• INP (interaktiivisuus): hyvä on 200 ms tai vähemmän, vaatii työtä on 200–500 ms, huono on yli 500 ms.
• CLS (visuaalinen vakaus): hyvä on 0,1 tai vähemmän, vaatii työtä on 0,1–0,25, huono on yli 0,25.

Miksi Core Web Vitals -mittarit ovat tärkeitä hakukoneoptimoinnin ja tulojen kannalta?

Ne ovat tärkeitä, koska hitaat sivut menettävät rahaa ja sijoituksia samanaikaisesti. Portent mittasi 5,6 miljoonaa istuntoa ja havaitsi B2C-konversion laskevan 3,05 %:sta 1 sekunnin latausajalla 0,67 %:iin 4 sekunnin latausajalla, mikä on noin 0,3 pisteen lasku jokaista lisäsekuntia kohden (Portent, 2022). Hakukoneoptimoinnin osalta Google vahvistaa, että hyvät Core Web Vitals -mittarit "ovat linjassa sen kanssa, mitä ydinrankkausjärjestelmämme pyrkivät palkitsemaan" (Google Search Central, 2025).

Tulovaikutus kumuloituu. Googlen ja Deloitten tutkimuksessa, joka käsitti 37 brändiä ja 30 miljoonaa istuntoa, yhden 0,1 sekunnin mobiilin nopeusparannus nosti vähittäiskaupan konversioita 8,4 % ja keskimääräistä tilausarvoa 9,2 % (web.dev, 2020). Kymmenesosa sekunnista kuulostaa merkityksettömältä, kunnes kerrot sen neljäsosalla liikenteestä.

Syvemmän katsauksen siihen, miten tämä liittyy hakuun, tarjoaa oppaamme teknisestä hakukoneoptimoinnista kehittäjille, joka käsittelee indeksointi- ja renderöintipuolta. Nopeus on yksi suuremman järjestelmän pilareista.

Kuinka moni sivusto todella läpäisee Core Web Vitals -mittarit?

Useimmat eivät, ja mobiili on se, missä ne kamppailevat. Vuoden 2025 Web Almanacin mukaan kokonaisläpäisyaste oli 48 % mobiilissa ja 56 % työpöydällä, LCP:n ollessa vaikein mittari 62 %:lla hyvällä tuloksella mobiilissa verrattuna 77 %:iin INP:ssä ja 81 %:iin CLS:ssä (Web Almanac, 2025). Työpöydän INP on lähes ratkaistu 97 %:lla, mutta puhelimet, joissa on hitaat suorittimet ja epävakaat verkot, kertovat toisenlaisen tarinan.

Olennaista on strateginen näkökulma. Jos LCP epäonnistuu useimmin, ensimmäinen optimointituntisi tulisi käyttää sankarikuvien ja fonttien parantamiseen, ei painikkeen käsittelijän hienosäätöön. Korjaa ensin ilmeisin ongelma.

Miten korjaamme LCP:n Next.js:ssä?

LCP epäonnistuu, kun suurin elementti, yleensä sankari-kuva tai otsikko, kestää liian kauan renderöityä. Koska vain 62 % mobiilisivustoista läpäisee sen, tässä ovat suurimmat voitot (Web Almanac, 2025). Next.js:n Image-komponentti on yksittäinen tärkein korjaus: se tarjoaa moderneja formaatteja, luo responsiivisia kokoja ja antaa sinun merkitä sankarin niin, että se latautuu ensin.

Aseta priority yhdelle kuvalle, joka on näkyvissä ilman vieritystä. Se kertoo Next.js:lle, että se esilataa kuvan viivästetyn latauksen sijaan, mikä sankarikuvassa on ero läpäisyn ja epäonnistumisen välillä.

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

Fontit ovat toinen LCP-ansa. Myöhään latautuva verkkofontti estää tekstin renderöinnin ja voi siirtää otsikkoa. next/font isännöi tiedoston itse rakennusvaiheessa, poistaa verkkopyynnön Googlelle ja soveltaa font-display: swap -ominaisuutta puolestasi.

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

Lopuksi, renderöi näkyvissä oleva sisältö palvelimella. Palvelinkomponentit toimittavat HTML:n, jonka selain voi renderöidä välittömästi, ilman hydrausviivettä. Pidä sankari, otsikko ja pääteksti palvelinrenderöitynä tulosteena ja siirrä interaktiivisuus reunoille. Rakennelmissamme sankarin siirtäminen pois asiakaskomponentista ja priority-ominaisuuden lisääminen laskee mobiilin LCP:n rutiininomaisesti alle 2,5 sekunnin itsestään.

Miten korjaamme INP:n Next.js:ssä?

INP epäonnistuu, kun JavaScript estää pääsäikeen käyttäjän yrittäessä olla vuorovaikutuksessa. Korjaus on helppo sanoa ja vaikeampi toteuttaa: toimita vähemmän JavaScriptiä. Jokainen komponentti, jonka pidät palvelimella, on koodia, jota selaimen ei tarvitse koskaan jäsentää, ja se parantaa suoraan vuorovaikutuksen viivettä (web.dev, 2024).

Lataa viivästetysti kaikki raskas, mitä ei tarvita ensimmäiseen renderöintiin. Chat-widget, karuselli, kartta tai rikas editori tulisi ladata tarvittaessa dynamic()-toiminnolla, ei alkuperäisessä paketissa.

import dynamic from 'next/dynamic';

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

Kalliiden tilapäivitysten osalta kerro Reactille, että ne eivät ole kiireellisiä. Suodattimen tai haun päivityksen kääriminen useTransition-funktioon pitää syötteen responsiivisena samalla kun lista renderöityy uudelleen taustalla, mikä on juuri sitä, mitä INP palkitsee.

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

Tarvitseeko jokaisen interaktiivisen ominaisuuden olla paketissa latauksen yhteydessä? Melkein koskaan. Tarkista asiakaskomponenttisi, ja löydät yleensä kolmanneksen niistä siirrettävän palvelimelle. Täydelliseen arkkitehtuurin tarkistukseen Next.js-kehityspalvelumme on olemassa juuri tällaisia uudelleenjärjestelyjä varten.

Miten korjaamme CLS:n Next.js:ssä?

CLS epäonnistuu, kun elementit liikkuvat renderöinnin jälkeen, ja tavallisia syyllisiä ovat kuvat ilman mittoja, myöhään latautuvat fontit ja injektoidut bannerit. Sääntö on varata tilaa kaikelle ennen sen saapumista. Kun välität width- ja height-arvot Next.js:n Image-komponentille, se luo CSS-kuvasuhderuudun, joka pitää asettelun vakaana ennen tiedoston latautumista.

Sama logiikka pätee upotuksiin ja mainoksiin. Kääri kaikki kolmannen osapuolen iframe-elementit säilöön, jossa on kiinteä min-height, jotta alla oleva sisältö ei hyppää, kun upotus hydratoituu.

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

Fontit aiheuttavat hienovaraisia siirtymiä. next/font vähentää tätä sovittamalla varamittarin verkkofonttiisi, joten vaihto järjestelmätekstistä ladattuun fonttiin tuskin liikuttaa mitään. Yhdessä mitoitettujen kuvien kanssa tämä pitää CLS:n mukavasti alle 0,1 tavoitteen. CLS on helpoin elintärkeä mittari läpäistä, kun teet "tilan varaamisesta" tavan.

Miten mittaamme ja seuraamme tuloksia?

Laboratoriotyökalut valehtelevat hieman, joten mittaa todellisia käyttäjiä. Lighthouse ja PageSpeed Insights antavat nopean lukeman kontrolloidussa ympäristössä, mutta Google rankkaa kenttätietojen perusteella Chrome User Experience Reportista, joka on kerätty todellisilta Chrome-käyttäjiltä 28 päivän aikana. Mobiilin läpäisyaste on noussut joka vuosi, 36 %:sta vuonna 2023 48 %:iin vuonna 2025, ja rima nousee jatkuvasti (Web Almanac, 2025).

Kerätäksesi omia kenttätietojasi, useReportWebVitals-hookki striimaa jokaisen mittarin todellisista istunnoista analytiikkapisteeseesi. Vercel Speed Insights käärii tämän puolestasi, mutta raaka hookki toimii missä tahansa.

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

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

Havaintomme: laboratorio- ja kenttäpisteet eroavat eniten INP:ssä, koska Lighthouse toimii nopealla koneella ilman todellisia napautuksia. Luota CrUX-lukuun INP:n osalta ja käsittele Lighthouse-pistettä vain savutestinä.

Oletko valmis läpäisemään auditoinnin?

Core Web Vitals palkitsee sivustoja, jotka kunnioittavat käyttäjän aikaa, ja Next.js on rakennettu sitä varten. Jos nykyinen teknologiapinosi vastustaa sinua, tai haluat rakennelman, joka toimitetaan nopeasti oletuksena, me suunnittelemme, rakennamme ja viritämme Next.js-sivustoja päästä päähän. Katso hinnoittelumme tai ota yhteyttä keskustellaksesi luvuistasi.

Usein kysytyt kysymykset

Mitkä ovat Core Web Vitals -kynnysarvot vuonna 2026?

Sivu läpäisee testin, kun LCP on 2,5 sekuntia tai vähemmän, INP on 200 millisekuntia tai vähemmän ja CLS on 0,1 tai vähemmän. Google mittaa jokaisen mittarin todellisten käyttäjien sivun katselukertojen 75. persentiilillä (web.dev, 2025), joten muutama nopea lataus ei pelasta hidasta häntää.

Läpäiseekö Next.js Core Web Vitals -mittarit automaattisesti?

Ei. Next.js tarjoaa Image- ja Font-komponentit, Server Components -komponentit ja striimauksen, mutta oletusrakennelma voi silti epäonnistua. Sinun on asetettava kuvan priority, varattava asettelutilaa ja karsittava asiakaspuolen JavaScriptiä. Viitekehys poistaa vaikeat osat, mutta se ei poista työtä.

Mikä korvasi First Input Delayn?

Interaction to Next Paint korvasi First Input Delayn 12. maaliskuuta 2024 (web.dev, 2024). INP mittaa jokaisen vuorovaikutuksen viiveen vierailun aikana, ei vain ensimmäisen, mikä tekee raskaasta JavaScriptistä paljon näkyvämmän pisteissä.

Vaikuttavatko Core Web Vitals -mittarit Googlen sijoituksiin?

Kyllä, osana sivukokemuksen signaaleja. Google toteaa, että hyvät mittarit ovat linjassa sen kanssa, mitä sen ydinrankkausjärjestelmät palkitsevat (Google Search Central, 2025). Vaikutus on vahvin kilpailullisissa mobiilihauissa, joissa monet tulokset ovat muuten samankaltaisia.

Mikä Core Web Vital -mittari on vaikein läpäistä mobiilissa?

Largest Contentful Paint. Vain 62 % mobiilisivustoista saavutti hyvän LCP:n vuonna 2025, verrattuna 77 %:iin INP:ssä ja 81 %:iin CLS:ssä (Web Almanac, 2025). Hitaat sankarikuvat ja renderöinnin estävät fontit ovat tavallisia syitä, minkä vuoksi Image-komponentti on ensimmäinen korjaus.

Yhteenveto

Core Web Vitals -mittareiden läpäiseminen ei ole onnea, se on tarkistuslista. Korjaa LCP Image-komponentilla, priority-ominaisuudella ja next/font-kirjastolla. Korjaa INP toimittamalla vähemmän JavaScriptiä Server Components -komponenttien ja dynamic()-funktion avulla. Korjaa CLS varaamalla tilaa jokaiselle kuvalle ja upotukselle. Mittaa sitten todellisia käyttäjiä CrUX:n ja useReportWebVitals-hookin avulla, koska kenttätiedot ovat se, mitä Google todella pisteyttää. Puolet mobiiliverkosta epäonnistuu edelleen tässä vaatimuksessa. Siisti Next.js-rakennelma on tapa päästä nopeampaan puoliskoon. Kun olet valmis julkaisemaan, uusimmat oppaamme ja tiimimme ovat täällä auttamassa.