Performance·Claude Code
PerformanceClaude Code

Core Web Vitals fixen (LCP, CLS, INP) — Claude Code

Core Web Vitals sind ein Ranking-Signal. Schlechte Werte deckeln das Ranking auch bei gutem Content und Links. Korrelieren direkt mit Bounce-Rate und Conversion.

rocket_launch

In Claude Code fixen

Anthropics offizieller Terminal-Coding-Agent

Claude Code kann zuerst den ganzen Codebase greppen, die Änderung planen, dann jede betroffene Datei editieren. Prompt unten in deinen Claude Code-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.

Anderes Tool? Wähle deinen Stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

Der Prompt für Claude Code

Diesen Text exakt so in deinen Claude Code-Chat kopieren und einfügen.

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

Improve Core Web Vitals

1. Lazy-load offscreen images with loading="lazy" and add explicit width/height to avoid layout shift.
2. Move large third-party scripts to async/defer or load them only after user interaction.
3. Inline critical CSS and preload the LCP image with <link rel="preload" as="image">.

Warum das wichtig ist

Google führte Core Web Vitals 2021 als Ranking-Faktor ein und ersetzte FID 2024 durch INP. Seiten die die Schwellen verfehlen werden in Mobile-Ergebnissen abgestuft — nicht dramatisch, aber messbar, und die Abstufung summiert sich mit anderen Schwächen.

Jenseits von SEO korrelieren die drei Vitals stark mit Conversion-Rate. LCP über 4s verdoppelt die Bounce-Rate auf Mobile ungefähr. CLS über 0.25 lässt User falsche Elemente beim Laden klicken. INP über 500ms fühlt sich kaputt an.

AI-gebaute Apps shippen oft mit unoptimierten Hero-Bildern, 3 MB ungenutztem JavaScript und ohne width/height auf Bildern/iframes. Alle drei torpedieren Vitals. Glücklicherweise sind alle drei Fixes geradlinig.

So nutzt du diesen Prompt in Claude Code

  1. 1. Dein Claude Code-Projekt öffnen.
  2. 2. Prompt oben mit Copy-Button kopieren.
  3. 3. In Claude Code-Chat einfügen und senden.
  4. 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
  5. 5. Fix mit der Checkliste unten verifizieren.

Typische Fehler vermeiden

  • error_outlineHero-Bild als 3 MB JPEG ohne `<link rel="preload">` ausliefern.
  • error_outlineLazy-Loading auf dem LCP-Bild nutzen — wird langsamer, nicht schneller.
  • error_outlinewidth und height auf Bildern vergessen, Seite springt beim Laden (CLS).
  • error_outlineAnalytics- und Chat-Widgets synchron vor interaktivem Content laden.
  • error_outlineTeure Berechnungen beim Page-Load in useEffect ohne Splitting ausführen.

Wie du prüfst ob der Fix geklappt hat

  • check_circlehttps://pagespeed.web.dev/ auf deiner Seite ausführen — Core-Web-Vitals-Bewertung muss grün sein.
  • check_circleChrome DevTools → Lighthouse → Performance — Ziele: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms.
  • check_circleIn Google Search Console → Core-Web-Vitals-Bericht — keine "Schlechten URLs" mehr.
  • check_circleAuf echtem Mobilgerät (nicht emuliert) mit 4G-Throttle testen.

Häufige Fragen

Wie stark hebt bestandene CWV das Ranking?expand_more
Einzeln moderat — wenige Positionen. Aber Teil des Gesamt-Page-Experience-Signals, und durchfallen während Konkurrenten bestehen wird zur echten Mobile-Ranking-Decke.
Messen CWV Lab- oder Feld-Daten?expand_more
Felddaten von echten Chrome-Nutzern (CrUX) sind was Google rankt. Lighthouse-Lab-Scores sind richtungsweisend, aber nicht autoritativ.
Welches Vital ist am schwersten zu bestehen?expand_more
LCP auf bild-lastigen Hero-Sektionen, weil ein 2-MB-Bild in 2.5s auf 4G zu rendern aggressive Optimierung braucht.

Alle 34 Prompts passend zu deiner Claude Code-Site?

Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.

Site scannen

Ähnliche Claude Code-Prompts

Performance

Largest Contentful Paint (LCP) verbessern — Claude Code

Prompt um LCP unter 2.5s zu kriegen — Hero-Bild preloaden, Render-Blocking reduzieren, CDN nutzen.

Performance

Cumulative Layout Shift (CLS) fixen — Claude Code

Prompt um CLS zu eliminieren — width/height auf Bilder, Platz für Ads reservieren, late-loading Fonts vermeiden.

Performance

Interaction to Next Paint (INP) verbessern — Claude Code

Prompt um INP unter 200ms zu kriegen — lange Tasks splitten, schweres JS lazy-loaden, Handler debouncen.

Bilder

Bilder zu WebP oder AVIF konvertieren — Claude Code

Prompt um JPEG/PNG zu WebP oder AVIF zu konvertieren — 30-50% kleiner bei gleicher Qualität. Hilft LCP und CLS.

Mehr im Glossar erfahrenarrow_forward