Next.js 16 Performance: Sub-1s-LCP in der Praxis
Core Web Vitals sind SEO-Rankingfaktor. Wir zeigen, wie wir mit Next.js 16, Server Components und smartem Caching LCP < 1s und CLS < 0.05 erreichen.
$ lighthouse --run --target=productionGoogle rankt Websites mit guten Core Web Vitals höher. Konkret: LCP < 2.5s, CLS < 0.1, INP < 200ms. Wir Zielen auf LCP < 1s — das ist möglich, erfordert aber Disziplin. Hier ist unser Setup.
##1. Server Components by default
Next.js 16 macht Server Components zum Default. Das heißt: HTML wird serverseitig gerendert, JavaScript wird nur geladen, wenn es wirklich interaktiv ist. Eine Marketing-Seite sollte 90 % Server Component, 10 % Client Component sein.
// Schlecht: alles client-seitig
"use client"
export default function Hero() { return <HeavyComponent /> }
// Gut: server-side, interaktive Teile isoliert
import { HeroInteractive } from "./hero-interactive"
export default function Hero() {
return (
<section>
<h1>Server-rendered, 0 JS</h1>
<HeroInteractive /> // nur hier Client JS
</section>
)
}##2. Bild-Optimierung
Bilder sind der häufigste LCP-Killer. Drei Regeln: (1) next/image mit automatischem WebP/AVIF, (2) priority für das Hero-Bild, (3) width/height angeben um CLS zu vermeiden.
import Image from "next/image"
<Image
src="/hero.jpg"
alt="DFM Solutions Team"
width={1920}
height={1080}
priority // preload für LCP
sizes="100vw"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..." // LQIP
/>##3. Font-Loading
Fonts blockieren Render. Lösung: next/font mit display:swap und preload. Subsets auf latin beschränken. Self-hosted (keine Google Fonts — DSGVO!).
next/font/font/google lädt Fonts zur Build-Zeit und self-hosted sie. Keine Verbindung zu Google. Aber: immer prüfen, falls die Konfiguration geändert wurde.
##4. Caching-Strategie
Statische Seiten (SSG) sind am schnellsten. Dynamische Inhalte: ISR (Incremental Static Regeneration) mit revalidate. Datenbank-Queries: React cache() für Request-Deduplikation.
// Page: SSG mit ISR
export const revalidate = 3600 // 1h
// Datenbank: Request-Deduplikation
import { cache } from "react"
export const getProjects = cache(async () => {
return db.project.findMany()
})##5. JavaScript minimieren
Jedes KB JavaScript kostet LCP. Regeln: (1) keine schweren Dependencies, (2) dynamic import für Below-the-fold, (3) shadcn/ui statt vollen UI-Libs, (4) nur Lucide-Icons, die auch genutzt werden.
// Below-the-fold: lazy load
const HeavyChart = dynamic(() => import("./chart"), {
loading: () => <Skeleton />,
ssr: false // nur client
})##6. Edge-Deployment
Für globale Zielgruppen: Edge-Functions statt Server. LCP sinkt um 200–400ms durch niedrigeren TTFB. In Deutschland weniger relevant (single region), aber erwähnenswert.
##Messung
Lighthouse lokal reicht nicht — das ist Lab-Daten. RUM (Real User Monitoring) mit dem web-vitals-Package zeigt, was echte Nutzer erleben.
// app/layout.tsx
import { Analytics } from "@vercel/analytics/next"
// oder self-hosted:
function WebVitals() {
useEffect(() => {
const vitals = [onCLS, onLCP, onINP, onFCP, onTTFB]
vitals.forEach(f => f(metric => {
navigator.sendBeacon("/api/vitals", JSON.stringify(metric))
}))
}, [])
return null
}Mit diesem Setup erreichen wir für die DFM-Website: LCP 0.9s, CLS 0.02, INP 80ms, Lighthouse 98. Auf einem Hetzner CX21, nicht auf Vercel Edge.
##Fazit
Sub-1s-LCP ist kein Zauber — es ist Disziplin. Server Components, Bild-Optimierung, Font-Loading, Caching, JavaScript-Diät. Wenn diese 5 stimmen, sind 90 % der Arbeit getan.
Wir bauen das für Sie
Vom Artikel zur Implementierung — sprechen Sie mit uns.