# Core Web Vitals auf einer echten Next.js-Site

> LCP, INP und CLS sind drei Zahlen mit drei verschiedenen Fixes. Die meisten langsamen Sites scheitern an denselben vier Dingen, und keine davon braucht ein Rewrite.

Ein Lighthouse-Score ist ein Symptom, keine Diagnose. Die Fixes unten sind die, die bei echten Kunden-Builds tatsächlich etwas bewegt haben — einschließlich dieser Site, die einen 3D-Raum lädt und trotzdem besteht.

## Das Bild ist meist der Tatort

Das größte Element der Seite ist fast immer ein Hero-Bild, das unkomprimiert, unskaliert und spät ankommt. Ein sauber dimensioniertes AVIF/WebP mit expliziten Maßen behebt den schlimmsten LCP und den schlimmsten CLS in einem Zug — diese eine Änderung schlägt regelmäßig einen Monat Framework-Tuning.

## JavaScript, das du nicht auslieferst, kostet nichts

Route-Level-Code-Splitting ist in Next.js gratis und wird trotzdem regelmäßig von einem einzigen Import einer schweren Komponente am Seitenanfang zunichtegemacht. Der Raum auf dieser Site lädt seinen Renderer genau deshalb lazy: HTML, Text und Links sind interaktiv, bevor die erste Textur ankommt.

## Fonts sind eine Layout-Steuer

Ein Webfont ohne Display-Strategie ist ein garantierter Layout-Shift. Preloade die eine Schnittstärke, die die Überschrift rendert, swappe den Rest und setze Metrik-Overrides, damit der Fallback dieselbe Box einnimmt.

## Was bleibt

- Zuerst das Hero-Bild fixen — es ist LCP und CLS zugleich.
- Code an der Route-Grenze splitten; die Imports darüber auditieren.
- Eine Schnittstärke preloaden und den Fallback metrisch angleichen.
- Auf einem Mittelklasse-Phone mit 4G messen, nicht auf dem MacBook mit WLAN.

## Schlagwörter

Next.js, Web Vitals, Performance, Images

## Das bauen wir auch

https://dfieldsolutions.com/de/leistungen/web-performance

## Mehr aus dem Lab

- https://dfieldsolutions.com/de/labor/ai-search-visibility-checklist.md — Die AI-Search-Visibility-Checkliste, die wir auf dieser Site fahren
- https://dfieldsolutions.com/de/labor/eaa-accessibility-deadline.md — Die EU-Barrierefreiheitsfrist ist vorbei — was noch gilt
- https://dfieldsolutions.com/de/labor/structured-data-aeo.md — Strukturierte Daten, die eine Answer-Engine nutzen kann
- https://dfieldsolutions.com/de/labor/local-seo-playbook.md — Die Local-SEO-Checkliste, die wir selbst abarbeiten

---

Source: https://dfieldsolutions.com/de/labor/web-vitals-playbook
DField Solutions — Dunakeszi, Hungary — dezso@dfieldsolutions.com
Booking: see https://dfieldsolutions.com/en/contact