Performance·Claude Code
PerformanceClaude Code

Interaction to Next Paint (INP) verbessern — Claude Code

INP misst Reaktion auf Klicks/Taps. Schweres JS bei Interaktion killt es. 2024 als Core Web Vital FID ersetzt.

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 Interaction to Next Paint

1. Break up long JavaScript tasks into smaller chunks.
2. Defer non-critical JavaScript with async/defer.
3. Reduce main-thread blocking from third-party scripts.

Warum das wichtig ist

INP ersetzte FID im März 2024 als Core Web Vital. Misst echte Interaktions-Reaktion — Button klicken, wie lang bis zum nächsten Paint?

Schlechtes INP heisst meist schwere Event-Handler oder Main-Thread-Blocking. User spüren den Jank auch ohne Metrik zu kennen.

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_outlineTeure Berechnungen synchron in Click-Handlern.
  • error_outlineGrosse React-Re-Renders bei jedem Input-Change (kein Debounce).
  • error_outline3rd-Party-Scripts synchron laden — blockt Main-Thread.
  • error_outlineKein Yielden an den Browser zwischen langen Tasks.

Wie du prüfst ob der Fix geklappt hat

  • check_circlePageSpeed Insights → INP < 200ms.
  • check_circleDevTools Performance → INP in Lighthouse- und Performance-Tab.
  • check_circleReal-User-Monitoring (Vercel Analytics, SpeedCurve) bestätigt Felddaten.

Häufige Fragen

INP vs FID?expand_more
FID mass nur ersten Input. INP misst schlechteste Interaktion der Session — viel umfassender und realistischer.
Wie splitte ich lange Tasks?expand_more
`scheduler.yield()` (Chrome) oder `setTimeout(fn, 0)` zwischen Chunks um Browser zu lassen zu paint und Events handeln.

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

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

Prompt um Googles Core-Web-Vitals-Schwellen zu treffen: LCP < 2.5s, CLS < 0.1, INP < 200ms. Funktioniert in jedem AI-Stack.

Mehr im Glossar erfahrenarrow_forward