Wie mer Core Web Vitals mit Next.js schafft (2026)

Weniger als d'Hälfti vom mobile Web erfüllt d'Leischtigsaaforderige vo Google. Im 2025 händ nume 48% vo de mobile Ursprüng alli drü Core Web Vitals erfüllt, das isch meh als die 36% vo zwei Johr früener (HTTP Archive Web Almanac, 2025). Die Lücke isch e Chance. Wenn dini Konkurränte langsam sind, gwünnt e schnälli Next.js-Site sowohl s'Ranking als au d'Konversion. S'Framework git dir di meischte Tools, aber en Standard-Build verfehlt immer no gnueg Audits. De Guide zeigt dir gnau, wie mir die Lücke schlüssed.

Wichtigi Erkenntniss

• E Siite isch guet, wenn LCP 2.5s oder weniger isch, INP 200ms oder weniger isch und CLS 0.1 oder weniger isch, gmässe am 75. Perzäntil vo echte Nutzers (web.dev, 2025).
• Nume 48% vo de mobile Ursprüng händ alli drü Vitals im 2025 bestande, und LCP isch mit 62% s'schwächschte Glied (Web Almanac, 2025).
• Gschwindigkei isch Gäld: e E-Commerce-Site, wo in 1 Sekunde ladet, konvertiert öppe 2.5x besser als eini mit 4 Sekunde (Portent, 2022).
• Next.js isch bsunders guet bi de wichtigschte Korrekture: de Image- und Font-Komponente, Server Components und em dynamic() Lazy Loading.

Was sind Core Web Vitals im 2026?

Core Web Vitals sind drü Metrike, wo Google bruucht, um d'Siite-Erfahrig in de Realität z'bewärte: Ladeziit, Interaktivität und visuelli Stabilität. E URL isch nume guet, wenn alli drü im "guete" Bereich sind, gmässe am 75. Perzäntil vo de Siiteufruäf (web.dev, 2025). E einzigi langsami Metrik bringt di ganz Siite zum Versage, drum chasch kei super Layout-Score gege e trögi Ladeziit ustusche.

D'grössti Änderig isch d'Interaktivität. Interaction to Next Paint (INP) het de First Input Delay am 12. März 2024 ersetzt (web.dev, 2024). FID het nume d'Verzögerig gmässe, bevor din erschti Tap registriert worde isch. INP misst d'vollständigi Latenz vo jeder Interaktion während em Bsuech und meldet denn di schlimmschti. Es isch en viel härtere Test, und schwärs client-side JavaScript isch meischtens das, wo's kaputt macht.

Do sind d'Ziel, wo du aastrebsch. Alles im mittlere Bereich isch e Warnig, und de schlechti Bereich isch es Versage.

D'Schwelläwärte für 2026

• LCP (Ladeziit): guet isch 2.5s oder weniger, bruucht Arbet isch 2.5 bis 4.0s, schlecht isch über 4.0s.
• INP (Interaktivität): guet isch 200ms oder weniger, bruucht Arbet isch 200 bis 500ms, schlecht isch über 500ms.
• CLS (visuelli Stabilität): guet isch 0.1 oder weniger, bruucht Arbet isch 0.1 bis 0.25, schlecht isch über 0.25.

Warum sind Core Web Vitals wichtig für SEO und Umsatz?

Sie sind wichtig, will langsami Siite gliichziitig Gäld und Rankings verlüüred. Portent het 5.6 Millione Sessions gmässe und het gfunde, dass d'B2C-Konversion vo 3.05% bi ere 1-Sekunde-Ladeziit uf 0.67% bi 4 Sekunde abgfalle isch, en Rückgang vo öppe 0.3 Pünkt pro zuesätzliche Sekunde (Portent, 2022). Uf de SEO-Siite bestätigt Google, dass gueti Core Web Vitals "mit dem übereistimmed, was üseri Haupt-Ranking-Sischtem belohne wend" (Google Search Central, 2025).

De Umsatz-Effekt verstärkt sich. In de Studie vo Google und Deloitte mit 37 Marke und 30 Millione Sessions het e einzigi 0.1-Sekunde-Verbesserig bi de mobile Gschwindigkei d'Detailhandels-Konversione um 8.4% und de durchschnittlichi Bshtellwert um 9.2% gsteigert (web.dev, 2020). E Zähntelsekunde tönt trivial, bis du's uf es Viertel vom Traffic multipliziersch.

Für en tüüfere Blick, wie das mit de Suechi zämehängt, deckt üse Guide zu technischem SEO für Entwickler d'Indexing- und Rendering-Siite ab. Gschwindigkei isch e Stützpfiiler vo eme grössere Sischtem.

Wie viel Siite bestahd d'Core Web Vitals würklich?

Di meischte nöd, und mobil isch, wo sie kämpfed. De Web Almanac 2025 het d'Gsamt-Bestehensrate uf 48% uf mobile und 56% uf Desktop gsetzt, mit LCP als de schwierschte Metrik mit 62% guet uf mobile gege 77% für INP und 81% für CLS (Web Almanac, 2025). Desktop INP isch mit 97% fascht glöst, aber Handys mit langsame CPUs und unregelmässige Netzwärch verzelled e anderi Gschicht.

D'Erkenntnis isch strategisch. Wenn LCP am meischtä versagt, sötti dini erschti Stund Optimierig uf s'Hero-Bild und d'Schriftarte goh, nöd uf s'Mikro-Tuning vo eme Button-Handler. Beheb s'luute Problem zuerst.

Wie behebed mir LCP in Next.js?

LCP versagt, wenn s'grösste Element, meischtens es Hero-Bild oder e Überschrift, z'lang bruucht zum rendere. Will nume 62% vo de mobile Siite das bestahd, sind do di grösste Gwünn z'hole (Web Almanac, 2025). D'Next.js Image Komponente isch di einzig wichtigschti Korrektur: sie lieferet moderni Formate, generiert responsivi Gröössene und erlaubt dir, de Hero z'markiere, damit er zuerst ladet.

Setz priority bim einzige Bild oberhalb vom Fold. Das säit Next.js, dass es das Bild vorlade söll statt lazy-loade, was bi eme Hero-Bild de Underschiid zwüsched Bestah und Versage isch.

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

Schriftarte sind di zweiti LCP-Falle. E spööt ladendi Web-Schriftart blockiert d'Text-Aazeig und cha d'Überschrift verschiebe. next/font hostet d'Datei bim Build-Ziit sälber, entfernt d'Netzwärch-Aafrog an Google und wendet font-display: swap für dich aa.

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

Zuletzt, render de Inhalt oberhalb vom Fold uf em Server. Server Components liefered HTML, wo de Browser sofort aazeige cha, ohni uf Hydration z'warte. Behalt de Hero, d'Überschrift und de Haupttext als server-gerendereti Usgab und verschieb d'Interaktivität an d'Ränder. Bi üsne Builds bringt s'Verschiebe vo eme Hero us ere Client-Komponente und s'Hinzuefüege vo priority d'mobile LCP regelmässig under 2.5s, ganz vo allei.

Wie behebed mir INP in Next.js?

INP versagt, wenn JavaScript de Haupt-Thread blockiert, während en Benutzer versuecht z'interagiere. D'Lösig isch eifach z'säge und schwiriger z'mache: weniger JavaScript usliefere. Jedi Komponente, wo du uf em Server behaltsch, isch Code, wo de Browser nie mues parsiere, und das verbessert d'Interaktions-Latenz direkt (web.dev, 2024).

Lazy-load alles Schwäre, wo nöd für de erschti Paint bruucht wird. Es Chat-Widget, es Karussell, e Charte oder en Rich Editor sötti uf Aafrog mit dynamic() lade, nöd im initiale Bundle.

import dynamic from 'next/dynamic';

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

Bi tüüre State-Updates säg React, dass sie nöd dringend sind. E Filter- oder Suech-Update in useTransition z'packe, haltet d'Ingab reaktiv, während d'Lischt im Hintergrund neu rendert wird, was genau das isch, was INP belohnt.

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

Mues jede interaktivi Feature bim Lade im Bundle sii? Fascht nie. Überprüef dini Client-Komponente, und du wirsch meischtens findä, dass es Drittel devo uf de Server verschobe werde cha. Für en komplette Architektur-Check existiert üse Next.js Entwickligs-Service genau für so e Art vo Refactoring.

Wie behebed mir CLS in Next.js?

CLS versagt, wenn Element sich nach em Paint bewege, und di üebliche Übeltäter sind Bilder ohni Dimensionä, spöti Schriftarte und iigschleusti Banner. D'Regel isch, Platz für alles z'reserviere, bevor es aachunnt. Wenn du width und height an d'Next.js Image Komponente übergisch, generiert sie e CSS Aspect-Ratio-Box, wo s'Layout stabil haltet, bevor d'Datei ladet.

Di gliich Logik gilt für Embeds und Werbig. Pack jede Dritt-Aabieter-Iframe in en Container mit ere fixe min-height, damit de Inhalt drunter nöd springt, wenn de Embed hydriert.

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

Schriftarte verursached di fiine Verschiebigä. next/font reduziert das, indem es e Fallback-Metrik mit dinere Web-Schriftart abgliicht, so dass de Wächsel vom Systemtext zum gladenä Gsicht kaum bewegt wird. Zäme mit grössibestimmte Bilder isch das, was CLS bequem under em 0.1 Ziel haltet. CLS isch de eifachschti Vital z'bestah, sobald du "Platz reserviere" zu ere Gwunneheit machsch.

Wie mässed und überwached mir d'Resultat?

Lab-Tools lüged es bitzli, drum mäss echti Benutzer. Lighthouse und PageSpeed Insights gäbed dir e schnälli Läsig in ere kontrollierte Umgäbig, aber Google rankt uf Feld-Date us em Chrome User Experience Report, gsamlet vo tatsächliche Chrome-Bsuecher über 28 Täg. D'mobile Bestehensrate isch jedes Johr gstiege, vo 36% im 2023 uf 48% im 2025, und d'Messlattä stiegt wiiter (Web Almanac, 2025).

Zum dini eigne Feld-Date z'samle, streamt de useReportWebVitals Hook jede Metrik vo echte Sessions an din Analytics-Endpoint. Vercel Speed Insights ummantlet das für dich, aber de rohi Hook funktioniert überall.

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

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

Üseri Erkenntnis: Lab- und Feld-Scores wiched bi INP am meischtä ab, will Lighthouse uf ere schnälle Maschiine ohni echti Taps lauft. Vertrau de CrUX-Zahl für INP, und behandle de Lighthouse-Score nume als Rauchtest.

Bisch bereit für din Audit?

Core Web Vitals belohned Siite, wo d'Ziit vom Benutzer respektiered, und Next.js isch defür gmacht. Wenn din aktuelli Stack dich bekämpft, oder du en Build wotsch, wo standardmässig schnäll usgfliefert wird, plane, boue und optimiered mir Next.js-Siite vo Aafang bis Ändi. Lueg dir üseri Priise aa oder nimm Kontakt uf, um dini Zahle z'bespräche.

Häufigi Frogä

Was sind d'Core Web Vitals Schwelläwärte im 2026?

E Siite isch guet, wenn LCP 2.5 Sekunde oder weniger isch, INP 200 Millisekunde oder weniger isch und CLS 0.1 oder weniger isch. Google misst jede Metrik am 75. Perzäntil vo de echte Benutzer-Siiteufruäf (web.dev, 2025), drum chönd es paar schnälli Ladeziite kei langsami Schwanzrettig sii.

Bestahd Next.js d'Core Web Vitals automatisch?

Nei. Next.js git dir d'Image- und Font-Komponente, Server Components und Streaming, aber en Standard-Build cha immer no versage. Du muesch d'Bild-priority setze, Layout-Platz reserviere und Client-JavaScript chürze. S'Framework entfernt di schwirige Teil, es entfernt nöd d'Arbet.

Was het de First Input Delay ersetzt?

Interaction to Next Paint het de First Input Delay am 12. März 2024 ersetzt (web.dev, 2024). INP misst d'Latenz vo jeder Interaktion während eme Bsuech, nöd nume de erschti, was schwärs JavaScript im Score viel sichtbarer macht.

Beeiflussed Core Web Vitals d'Google Rankings?

Ja, als Teil vo de Siite-Erfahrigssignal. Google säit, dass gueti Vitals mit dem übereistimmed, was sini Haupt-Ranking-Sischtem belohned (Google Search Central, 2025). De Effekt isch am stärkste bi kompetitive mobile Suechaafroge, wo viel Resultat suscht ähnlich sind.

Welche Core Web Vital isch am schwierschte uf mobile z'bestah?

Largest Contentful Paint. Nume 62% vo de mobile Ursprüng händ im 2025 en guete LCP erreicht, gege 77% für INP und 81% für CLS (Web Almanac, 2025). Langsami Hero-Bilder und Render-blockierendi Schriftarte sind di üeblichi Ursach, drum isch d'Image-Komponente di erschti Korrektur.

Fazit

Core Web Vitals z'bestah isch kei Glück, es isch e Checkliste. Beheb LCP mit de Image-Komponente, priority und next/font. Beheb INP, indem du weniger JavaScript dur Server Components und dynamic() uslieferisch. Beheb CLS, indem du Platz für jedes Bild und jede Embed reserviersch. Mäss denn echti Benutzer mit CrUX und em useReportWebVitals Hook, will Feld-Date das sind, wo Google würklich bewärtet. D'Hälfti vom mobile Web verfehlt immer no die Messlattä. En saubere Next.js Build isch, wie du in de schnällere Hälfti landisch. Wenn du bereit bisch z'veröffentliche, sind üseri neueste Guides und üses Team do, um z'hälfe.