Performance & SEO 5. Mai 2026 10 min Lesezeit

Web Performance mit Claude Code: Core Web Vitals optimieren 2026

Core Web Vitals sind Google-Rankingfaktor und Nutzererlebnis in einem — LCP, CLS und INP direkt messbar und optimierbar. Claude Code analysiert Performance-Probleme, erklärt Ursachen und generiert konkrete Fixes für schnellere Websites.

Core Web Vitals: LCP, CLS, INP

LCP

Largest Contentful Paint
Gut: <2,5s

CLS

Cumulative Layout Shift
Gut: <0,1

INP

Interaction to Next Paint
Gut: <200ms

LCPLargest Contentful Paint optimieren

# Prompt: "Analysiere warum unser LCP bei 4,2s liegt und gib konkrete Fixes"

# Häufigste LCP-Ursachen und Claude Code Fixes:

# 1. Hero Image nicht preloaded:
# VORHER: normales img-Tag — Browser entdeckt es spät
<img src="/hero.jpg" alt="Hero" />

# NACHHER: preload + Next.js Image mit priority
<link rel="preload" as="image" href="/hero.webp" />
<Image src="/hero.jpg" priority fetchPriority="high" />

# 2. Schriften blocken Rendering:
<link rel="preconnect" href="https://fonts.googleapis.com" />
# font-display: swap in CSS — Text sofort sichtbar
@font-face { font-display: swap; }

# 3. Server Response Time (TTFB) zu langsam:
# → ISR / Static Generation statt SSR wo möglich
# → CDN für statische Assets (Vercel Edge, Cloudflare)
# → Database Connection Pooling (PgBouncer, Prisma Accelerate)

# Next.js Image Optimierung (automatisch durch Claude Code):
import Image from 'next/image'
<Image
  src="/hero.jpg"
  width={1200} height={600}
  priority         // LCP-Element
  sizes="(max-width: 768px) 100vw, 1200px"
  placeholder="blur"
/>

Bundle Size: Weniger JavaScript

BundleJavaScript reduzieren

# Prompt: "Analysiere unser Next.js Bundle und finde die größten Einsparpotenziale"

# Bundle Analyzer starten:
npm install @next/bundle-analyzer
# next.config.js:
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: true })

# Typische Findings und Claude Code Fixes:

# 1. Moment.js (330KB!) → date-fns (tree-shakeable)
// VORHER:
import moment from 'moment'           // 330KB!
// NACHHER:
import { format } from 'date-fns'     // nur ~5KB

# 2. Lodash komplett importiert:
import _ from 'lodash'               // 70KB
import debounce from 'lodash/debounce'  // 2KB

# 3. Dynamic Imports für schwere Komponenten:
const RichTextEditor = dynamic(
  () => import('@tiptap/react'),
  { ssr: false, loading: () => <EditorSkeleton /> }
)
# Editor lädt nur wenn Nutzer ihn braucht — nicht im Initial Bundle

Bundle-Prompt: "Zeige mir die größten Dependencies in package.json nach Bundle-Größe. Welche haben leichtere Alternativen? Implementiere die 3 wichtigsten Wechsel." Claude Code kennt Bundle-Größen und leichtere Alternativen.

CLS und INP: Layout Stability und Responsiveness

CLSLayout Shifts eliminieren

# Häufigste CLS-Ursachen:

# 1. Images ohne Dimensionen (SEHR häufig!)
# VORHER — Browser kennt Größe nicht vor dem Laden:
<img src="/product.jpg" />

# NACHHER — aspect-ratio reserviert Platz:
<img src="/product.jpg" width="800" height="600"
     style="aspect-ratio: 4/3; height: auto" />

# 2. Dynamisch eingefügte Banner (Cookie-Consent, Notifications):
# → NIEMALS oben in den Content einfügen
# → Feste Höhe reservieren oder bottom-fixed

# INP optimieren — Interactions schnell machen:
# Lange Tasks aufteilen mit scheduler.yield():
async function handleClick() {
  updateUI()                // Sofort: UI-Update
  await scheduler.yield()  // Browser darf rendern
  await heavyComputation()  // Dann schwere Arbeit
}

# React 19: useTransition für nicht-dringende Updates
const [isPending, startTransition] = useTransition()
startTransition(() => {
  setSearchResults(results)  // Nicht-dringend — unterbrechbar
})

Performance-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges Performance-Modul mit Core Web Vitals, Bundle-Analyse, Image-Optimierung, Caching-Strategien und Lighthouse 100-Score als Ziel.

14 Tage kostenlos testen →