Interaction to Next Paint (INP)

Was ist Interaction to Next Paint (INP)?

Definition und Bedeutung

INP misst die Zeit zwischen einer Benutzerinteraktion (Klick, Tippen, Tastatureingabe) und dem nächsten Frame, der vom Browser gerendert wird. Diese Metrik erfasst alle Interaktionen während des gesamten Seitenbesuchs, nicht nur die erste, und bietet damit ein realistischeres Bild der tatsächlichen Benutzererfahrung.

Warum ist INP wichtig?

• Ranking-Faktor: Seit März 2024 offizieller Google-Ranking-Faktor
• User Experience: Direkter Einfluss auf die wahrgenommene Reaktionsfähigkeit
• Conversion-Rate: Langsame Interaktionen führen zu höheren Absprungraten
• Mobile Performance: Besonders kritisch für mobile Geräte mit begrenzten Ressourcen

INP-Messung und Schwellenwerte

Messung von INP

INP wird in Millisekunden (ms) gemessen und erfasst:

1. Alle Interaktionen: Klicks, Tippen, Tastatureingaben
2. Gesamte Sitzung: Von Seitenaufruf bis Verlassen
3. 95. Perzentil: Der schlechteste Wert von 95% der Interaktionen

Schwellenwerte

Hauptursachen für schlechte INP-Werte

1. Lange JavaScript-Ausführungszeiten

Problem: Blocking JavaScript verhindert schnelle Reaktionen

Lösung:

• Code-Splitting implementieren
• Lazy Loading für nicht-kritische Skripte
• Web Workers für schwere Berechnungen

2. Hauptthread-Blockierung

Problem: CPU-intensive Tasks blockieren den Hauptthread

Lösung:

• Asynchrone Verarbeitung
• RequestIdleCallback nutzen
• Chunking von großen Datenmengen

3. Unoptimierte Event Handler

Problem: Schwere Event-Handler verzögern Reaktionen

Lösung:

• Debouncing und Throttling
• Event Delegation
• Passive Event Listeners

4. Render-Blocking Resources

Problem: CSS und JavaScript verzögern das Rendering

Lösung:

• Critical CSS inline einbinden
• JavaScript asynchron laden
• Resource Hints nutzen

INP-Optimierung: Best Practices

JavaScript-Optimierung

1. Code-Splitting

• Nur notwendigen Code initial laden
• Dynamische Imports für Features
• Route-based Code Splitting

2. Web Workers

• Schwere Berechnungen auslagern
• Image Processing in Workers
• Datenverarbeitung parallelisieren

3. Event Handler Optimierung

// Debouncing für Suchfunktionen
const debouncedSearch = debounce(handleSearch, 300);

// Passive Event Listeners
element.addEventListener('scroll', handleScroll, { passive: true });

CSS-Optimierung

1. Critical CSS

• Above-the-fold CSS inline
• Non-critical CSS asynchron laden
• CSS-Minification

2. CSS-Animationen

• transform und opacity nutzen
• will-change Property verwenden
• Hardware-Beschleunigung aktivieren

Resource Loading

1. Preloading

<link rel="preload" href="critical.js" as="script">
<link rel="preload" href="hero-image.jpg" as="image">

2. Lazy Loading

• Bilder und Videos verzögert laden
• Intersection Observer API
• Progressive Enhancement

Tools zur INP-Messung

Google Tools

1. PageSpeed Insights

• Lab-Daten für INP
• Spezifische Optimierungsvorschläge
• Mobile und Desktop-Analyse

2. Chrome DevTools

• Performance Tab
• INP-Metriken in der Timeline
• Bottleneck-Identifikation

3. Google Search Console

• Field Data für INP
• Core Web Vitals Report
• Historische Trends

Dritte Tools

1. WebPageTest

• Detaillierte Performance-Analyse
• Custom Test-Konfigurationen
• Video-Aufzeichnung von Interaktionen

2. GTmetrix

• INP-Messung in Echtzeit
• Vergleich mit Konkurrenz
• Optimierungsempfehlungen

Monitoring und Tracking

Kontinuierliches Monitoring

1. Real User Monitoring (RUM)

• Echte Benutzerdaten sammeln
• Field Data vs. Lab Data
• Geräte- und Browser-spezifische Analyse

2. Core Web Vitals Dashboard

• Automatische Alerts bei Verschlechterungen
• Trend-Analyse über Zeit
• Segmentierung nach Seiten und Geräten

Performance Budgets

1. INP-Budgets definieren

• Maximaler INP-Wert pro Seite
• Warnungen bei Überschreitung
• Integration in CI/CD-Pipeline

2. Regelmäßige Audits

• Wöchentliche Performance-Reviews
• A/B-Tests für Optimierungen
• Dokumentation von Verbesserungen

Häufige INP-Probleme und Lösungen

Problem: Langsame Suchfunktion

Symptom: Hohe INP-Werte bei Suchinteraktionen

Lösung:

• Debouncing implementieren (300ms)
• Server-side Suche für große Datensätze
• Caching von Suchergebnissen

Problem: Schwere Formulare

Symptom: Verzögerungen bei Formular-Interaktionen

Lösung:

• Progressive Enhancement
• Client-side Validierung optimieren
• Asynchrone Formular-Übermittlung

Problem: Bildergalerien

Symptom: Hohe INP bei Bildwechseln

Lösung:

• Lazy Loading für Bilder
• Preloading der nächsten Bilder
• Optimierte Bildformate (WebP, AVIF)

Zukunft der INP-Metriken

Entwicklungen 2025

1. Erweiterte Metriken

• Interaction to First Paint (IFP)
• Interaction to Last Paint (ILP)
• Interaction Response Time (IRT)

2. KI-basierte Optimierung

• Automatische Code-Optimierung
• Predictive Performance
• Intelligente Resource Loading

3. Mobile-First INP

• Geräte-spezifische Schwellenwerte
• 5G-Optimierungen
• Progressive Web App Metriken

Verwandte Themen

• Core Web Vitals Übersicht
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Page Speed & Performance
• JavaScript SEO