Wie man Core Web Vitals mit Next.js besteht (2026)

Weniger als die Hälfte des mobilen Webs erfüllt Googles Leistungsanforderungen. Im Jahr 2025 erfüllten nur 48 % der mobilen Ursprünge alle drei Core Web Vitals, gegenüber 36 % zwei Jahre zuvor (HTTP Archive Web Almanac, 2025). Diese Lücke ist eine Chance. Wenn Ihre Konkurrenten langsam sind, gewinnt eine schnelle Next.js-Website sowohl beim Ranking als auch bei der Konversion. Das Framework stellt Ihnen die meisten Tools zur Verfügung, aber ein Standard-Build besteht immer noch viele Audits nicht. Dieser Leitfaden zeigt genau, wie wir diese Lücke schließen.

Wichtige Erkenntnisse

• Eine Seite besteht, wenn LCP 2,5s oder weniger, INP 200ms oder weniger und CLS 0,1 oder weniger beträgt, gemessen am 75. Perzentil realer Nutzer (web.dev, 2025).
• Nur 48 % der mobilen Ursprünge bestanden 2025 alle drei Vitals, und LCP ist mit 62 % das schwächste Glied (Web Almanac, 2025).
• Geschwindigkeit ist Geld: Eine E-Commerce-Website, die in 1 Sekunde lädt, konvertiert etwa 2,5-mal besser als eine, die 4 Sekunden benötigt (Portent, 2022).
• Next.js punktet bei den wichtigsten Korrekturen: den Image- und Font-Komponenten, Server Components und dem dynamic() Lazy Loading.

Was sind Core Web Vitals im Jahr 2026?

Core Web Vitals sind drei Metriken, die Google verwendet, um die reale Seitenerfahrung zu bewerten: Laden, Interaktivität und visuelle Stabilität. Eine URL besteht nur, wenn alle drei im "guten" Bereich des 75. Perzentils der Seitenaufrufe liegen (web.dev, 2025). Eine langsame Metrik lässt die gesamte Seite fehlschlagen, sodass Sie eine großartige Layout-Bewertung nicht gegen eine träge Ladezeit eintauschen können.

Die größte Änderung betrifft die Interaktivität. Interaction to Next Paint (INP) ersetzte First Input Delay am 12. März 2024 (web.dev, 2024). FID maß nur die Verzögerung, bevor Ihr erster Tap registriert wurde. INP misst die volle Latenz jeder Interaktion während des Besuchs und meldet dann die schlechteste. Es ist ein viel schwierigerer Test, und schweres clientseitiges JavaScript ist das, was ihn normalerweise zum Scheitern bringt.

Hier sind die Ziele, die Sie anstreben sollten. Alles im mittleren Bereich ist eine Warnung, und der schlechte Bereich ist ein Fehlschlag.

Die Schwellenwerte für 2026

• LCP (Laden): gut ist 2,5s oder weniger, verbesserungswürdig ist 2,5 bis 4,0s, schlecht ist über 4,0s.
• INP (Interaktivität): gut ist 200ms oder weniger, verbesserungswürdig ist 200 bis 500ms, schlecht ist über 500ms.
• CLS (visuelle Stabilität): gut ist 0,1 oder weniger, verbesserungswürdig ist 0,1 bis 0,25, schlecht ist über 0,25.

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

Sie sind wichtig, weil langsame Seiten gleichzeitig Geld und Rankings verlieren. Portent maß 5,6 Millionen Sitzungen und stellte fest, dass die B2C-Konversion von 3,05 % bei einer Ladezeit von 1 Sekunde auf 0,67 % bei 4 Sekunden sank, ein Rückgang von etwa 0,3 Punkten pro zusätzlicher Sekunde (Portent, 2022). Auf der SEO-Seite bestätigt Google, dass gute Core Web Vitals "mit dem übereinstimmen, was unsere Kern-Ranking-Systeme belohnen wollen" (Google Search Central, 2025).

Der Umsatz-Effekt verstärkt sich. In der Studie von Google und Deloitte mit 37 Marken und 30 Millionen Sitzungen führte eine einzige Verbesserung der mobilen Geschwindigkeit um 0,1 Sekunden zu einer Steigerung der Einzelhandelskonversionen um 8,4 % und des durchschnittlichen Bestellwerts um 9,2 % (web.dev, 2020). Ein Zehntel einer Sekunde klingt trivial, bis man es auf ein Viertel des Traffics hochrechnet.

Für einen tieferen Einblick, wie dies mit der Suche zusammenhängt, behandelt unser Leitfaden zu technischem SEO für Entwickler die Indexierungs- und Rendering-Seite. Geschwindigkeit ist eine Säule eines größeren Systems.

Wie viele Websites bestehen tatsächlich die Core Web Vitals?

Die meisten nicht, und mobil ist der Bereich, in dem sie Schwierigkeiten haben. Der Web Almanac 2025 bezifferte die Gesamtbestehensrate auf 48 % auf Mobilgeräten und 56 % auf Desktops, wobei LCP mit 62 % gut auf Mobilgeräten gegenüber 77 % für INP und 81 % für CLS die schwierigste Metrik ist (Web Almanac, 2025). Desktop-INP ist mit 97 % nahezu gelöst, aber Telefone mit langsamen CPUs und lückenhaften Netzwerken erzählen eine andere Geschichte.

Die Schlussfolgerung ist strategisch. Wenn LCP am häufigsten fehlschlägt, sollte Ihre erste Stunde der Optimierung dem Hero-Bild und den Schriftarten gewidmet sein, nicht der Feinabstimmung eines Button-Handlers. Beheben Sie zuerst das offensichtliche Problem.

Wie beheben wir LCP in Next.js?

LCP schlägt fehl, wenn das größte Element, normalerweise ein Hero-Bild oder eine Überschrift, zu lange zum Rendern benötigt. Da nur 62 % der mobilen Websites es bestehen, liegen hier die größten Gewinne (Web Almanac, 2025). Die Next.js Image-Komponente ist die wichtigste Einzelkorrektur: Sie liefert moderne Formate, generiert responsive Größen und ermöglicht es Ihnen, das Hero-Bild zu kennzeichnen, damit es zuerst geladen wird.

Setzen Sie priority für das eine Bild oberhalb des Falzes. Das weist Next.js an, es vorzuladen statt lazy-loading zu verwenden, was bei einem Hero-Bild den Unterschied zwischen Bestehen und Fehlschlagen ausmacht.

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

Schriftarten sind die zweite LCP-Falle. Eine spät ladende Web-Schriftart blockiert das Rendern von Text und kann die Überschrift verschieben. next/font hostet die Datei zur Build-Zeit selbst, entfernt die Netzwerkanfrage an Google und wendet font-display: swap für Sie an.

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

Rendern Sie schließlich Inhalte oberhalb des Falzes auf dem Server. Server Components liefern HTML, das der Browser sofort rendern kann, ohne auf Hydration warten zu müssen. Behalten Sie das Hero-Bild, die Überschrift und den Haupttext als serverseitig gerenderte Ausgabe bei und verschieben Sie die Interaktivität an die Ränder. In unseren Builds senkt das Verschieben eines Hero-Bildes aus einer Client-Komponente und das Hinzufügen von priority die mobile LCP routinemäßig unter 2,5s.

Wie beheben wir INP in Next.js?

INP schlägt fehl, wenn JavaScript den Hauptthread blockiert, während ein Benutzer versucht zu interagieren. Die Lösung ist einfach zu formulieren und schwieriger umzusetzen: Weniger JavaScript ausliefern. Jede Komponente, die Sie auf dem Server belassen, ist Code, den der Browser niemals parsen muss, und das verbessert direkt die Interaktionslatenz (web.dev, 2024).

Laden Sie alles Schwere, das für den ersten Paint nicht benötigt wird, lazy. Ein Chat-Widget, ein Karussell, eine Karte oder ein Rich Editor sollten bei Bedarf mit dynamic() geladen werden, nicht im initialen Bundle.

import dynamic from 'next/dynamic';

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

Bei aufwendigen Zustandsaktualisierungen teilen Sie React mit, dass sie nicht dringend sind. Das Umschließen einer Filter- oder Suchaktualisierung in useTransition hält die Eingabe reaktionsschnell, während die Liste im Hintergrund neu gerendert wird, was genau das ist, 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));
      }}
    />
  );
}

Muss jede interaktive Funktion beim Laden im Bundle enthalten sein? Fast nie. Überprüfen Sie Ihre Client-Komponenten, und Sie werden normalerweise feststellen, dass ein Drittel davon auf den Server verschoben werden kann. Für eine vollständige Architekturprüfung existiert unser Next.js Entwicklungsdienst genau für diese Art von Refactoring.

Wie beheben wir CLS in Next.js?

CLS schlägt fehl, wenn sich Elemente nach dem Rendern bewegen, und die üblichen Übeltäter sind Bilder ohne Dimensionen, späte Schriftarten und eingefügte Banner. Die Regel ist, Platz für alles zu reservieren, bevor es ankommt. Wenn Sie width und height an die Next.js Image-Komponente übergeben, generiert diese eine CSS-Seitenverhältnis-Box, die das Layout stabil hält, bevor die Datei geladen wird.

Die gleiche Logik gilt für Embeds und Anzeigen. Umschließen Sie jedes Drittanbieter-Iframe in einem Container mit einer festen min-height, damit der darunterliegende Inhalt nicht springt, wenn der Embed hydriert wird.

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

Schriftarten verursachen die subtilen Verschiebungen. next/font reduziert dies, indem es eine Fallback-Metrik an Ihre Web-Schriftart anpasst, sodass der Wechsel von Systemtext zum geladenen Font kaum eine Bewegung verursacht. In Kombination mit dimensionierten Bildern hält dies CLS bequem unter dem Zielwert von 0,1. CLS ist die am einfachsten zu bestehende Vital-Metrik, sobald Sie sich angewöhnt haben, "Platz zu reservieren".

Wie messen und überwachen wir die Ergebnisse?

Labortools lügen ein wenig, messen Sie also echte Benutzer. Lighthouse und PageSpeed Insights geben Ihnen eine schnelle Lesung in einer kontrollierten Umgebung, aber Google rankt auf Felddaten aus dem Chrome User Experience Report, die von tatsächlichen Chrome-Besuchern über 28 Tage gesammelt wurden. Die mobile Bestehensrate ist jedes Jahr gestiegen, von 36 % im Jahr 2023 auf 48 % im Jahr 2025, und die Messlatte steigt weiter (Web Almanac, 2025).

Um Ihre eigenen Felddaten zu sammeln, streamt der useReportWebVitals Hook jede Metrik aus realen Sitzungen an Ihren Analyse-Endpunkt. Vercel Speed Insights umschließt dies für Sie, aber der rohe 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;
}

Unser Ergebnis: Labor- und Feldbewertungen weichen bei INP am stärksten voneinander ab, da Lighthouse auf einer schnellen Maschine ohne echte Taps läuft. Vertrauen Sie der CrUX-Zahl für INP und behandeln Sie die Lighthouse-Bewertung nur als Rauchtest.

Bereit für Ihr Audit?

Core Web Vitals belohnen Websites, die die Zeit des Benutzers respektieren, und Next.js ist dafür gebaut. Wenn Ihr aktueller Stack Sie herausfordert oder Sie einen Build wünschen, der standardmäßig schnell ausgeliefert wird, planen, bauen und optimieren wir Next.js-Websites von Anfang bis Ende. Sehen Sie sich unsere Preise an oder kontaktieren Sie uns, um Ihre Zahlen zu besprechen.

Häufig gestellte Fragen

Was sind die Core Web Vitals Schwellenwerte im Jahr 2026?

Eine Seite besteht, wenn LCP 2,5 Sekunden oder weniger, INP 200 Millisekunden oder weniger und CLS 0,1 oder weniger beträgt. Google misst jede Metrik am 75. Perzentil der Seitenaufrufe realer Nutzer (web.dev, 2025), sodass eine Handvoll schneller Ladevorgänge einen langsamen Rest nicht retten wird.

Besteht Next.js automatisch die Core Web Vitals?

Nein. Next.js bietet Ihnen die Image- und Font-Komponenten, Server Components und Streaming, aber ein Standard-Build kann immer noch fehlschlagen. Sie müssen die Bild-priority festlegen, Layout-Platz reservieren und Client-JavaScript reduzieren. Das Framework entfernt die schwierigen Teile, aber nicht die Arbeit.

Was hat First Input Delay ersetzt?

Interaction to Next Paint ersetzte First Input Delay am 12. März 2024 (web.dev, 2024). INP misst die Latenz jeder Interaktion während eines Besuchs, nicht nur der ersten, was schweres JavaScript im Score viel sichtbarer macht.

Beeinflussen Core Web Vitals das Google-Ranking?

Ja, als Teil der Seitenerfahrungssignale. Google gibt an, dass gute Vitals mit dem übereinstimmen, was seine Kern-Ranking-Systeme belohnen (Google Search Central, 2025). Der Effekt ist am stärksten bei wettbewerbsintensiven mobilen Suchanfragen, bei denen viele Ergebnisse ansonsten ähnlich sind.

Welches Core Web Vital ist auf Mobilgeräten am schwierigsten zu bestehen?

Largest Contentful Paint. Nur 62 % der mobilen Ursprünge erreichten 2025 einen guten LCP-Wert, gegenüber 77 % für INP und 81 % für CLS (Web Almanac, 2025). Langsame Hero-Bilder und renderblockierende Schriftarten sind die übliche Ursache, weshalb die Image-Komponente die erste Lösung ist.

Fazit

Das Bestehen der Core Web Vitals ist kein Glück, sondern eine Checkliste. Beheben Sie LCP mit der Image-Komponente, priority und next/font. Beheben Sie INP, indem Sie weniger JavaScript über Server Components und dynamic() ausliefern. Beheben Sie CLS, indem Sie Platz für jedes Bild und jeden Embed reservieren. Messen Sie dann echte Benutzer mit CrUX und dem useReportWebVitals Hook, denn Felddaten sind das, was Google tatsächlich bewertet. Die Hälfte des mobilen Webs scheitert immer noch an dieser Hürde. Ein sauberer Next.js-Build ist der Weg, wie Sie in der schnelleren Hälfte landen. Wenn Sie bereit sind, zu veröffentlichen, stehen Ihnen unsere neuesten Anleitungen und unser Team zur Verfügung.