INP vs. FID: Die Core Web Vitals-Änderung, die niemand kommen sah

Im März 2024 änderte Google eine Core Web Vital. Die meisten Websites haben sich noch nicht angepasst.

First Input Delay (FID) war seit 2020 die Interaktivitäts-Metrik der Core Web Vitals. Sie war relativ einfach zu bestehen – 97 % der Websites erfüllten den Schwellenwert von 100 ms. Deshalb hat Google sie entfernt und durch Interaction to Next Paint (INP) ersetzt.

INP ist ein völlig anderes Kaliber. Viele Websites mit perfekten CWV sind jetzt rot markiert. Diese Änderung, obwohl im Voraus angekündigt, traf viele Unternehmen unvorbereitet, insbesondere solche mit komplexen Web-Infrastrukturen oder Abhängigkeiten von Drittanbietern.

Aus unserer Erfahrung mit Kunden im Jahr 2024 ist der Prozentsatz der Websites mit einem „guten“ INP drastisch gesunken. Früher bestanden fast 100 % der Websites FID, jetzt erreichen nur noch 30–40 % ohne Eingriffe ein optimales INP. Dies unterstreicht die Wichtigkeit, diese Metrik ernst zu nehmen, da sie sich direkt auf die User Experience und somit auf das SEO-Ranking auswirkt.

Was INP misst vs. was FID gemessen hat

FID maß nur eines: die Zeit zwischen dem ersten Klick/Tipp des Benutzers und dem Zeitpunkt, an dem der Browser begann, dieses Ereignis zu verarbeiten. Nur die erste Eingabe. Nur die anfängliche Verzögerung. Es war eine Metrik, die eine sehr begrenzte Sicht auf die Interaktivität bot, ähnlich wie ein Buch nach seinem ersten Satz zu beurteilen.

INP misst:

• Alle Interaktionen während der gesamten Sitzung (nicht nur die erste), einschließlich Klicks, Taps und Tastatureingaben.
• Die Gesamtzeit: Eingabeverzögerung + Verarbeitungszeit (wie lange der Browser braucht, um Event-Handler auszuführen) + Präsentationsverzögerung (wie lange der Browser braucht, um visuelle Änderungen auf dem Bildschirm darzustellen).
• Wählt die langsamste Interaktion aus (oder das 75. Perzentil, wenn viele Interaktionen vorliegen, für Websites mit viel Traffic). Das bedeutet, dass ein einziger Reibungspunkt die Gesamtpunktzahl nach unten ziehen kann.

FID war eine Zwischenprüfung der ersten Unterrichtsminute. INP ist die Abschlussprüfung des gesamten Semesters. Diese Änderung spiegelt Googles Fokus auf die reale User Experience wider, bei der sich die Interaktivität nicht auf den ersten Kontakt beschränkt, sondern die gesamte Reise des Besuchers auf der Website umfasst.

2023 wies Google bereits auf die Notwendigkeit robusterer Metriken hin. Die Einführung von INP im Jahr 2024 steht im Einklang mit der Entwicklung der Webstandards und den Erwartungen der Nutzer, die zunehmend reaktionsschnelle und flüssige Websites fordern. Eine Google-Studie aus dem Jahr 2022 zeigte bereits, dass eine Verzögerung von nur 100 ms bei der Interaktivität die Conversions um 7 % reduzieren kann. Mit INP könnte dieser Einfluss noch größer sein, wenn wichtige Interaktionen langsam sind.

Warum INP schwieriger zu bestehen ist

Der Hauptthread ist überlastet

Drittanbieter-JavaScript (Analytics, Tag Manager, Chat-Widgets, A/B-Testing) konkurriert um CPU-Zeit. Wenn der Benutzer klickt, kann der Browser nicht reagieren, bis die aktuelle JavaScript-Aufgabe abgeschlossen ist. Tools wie Google Tag Manager können, wenn sie nicht optimiert sind, Skripte injizieren, die den Hauptthread blockieren. Im Jahr 2024, mit der zunehmenden Akzeptanz von GA4 und der Notwendigkeit eines granulareren Trackings, hat sich dieses Problem verschärft. Es ist entscheidend, Drittanbieter-Skripte regelmäßig zu überprüfen.

Ein häufiger Fehler ist das synchrone Laden mehrerer Drittanbieter-Skripte zu Beginn der Seite. Dies beeinflusst nicht nur INP, sondern auch andere Metriken wie Largest Contentful Paint (LCP). Die Priorisierung und das intelligente Aufschieben dieser Skripte sind entscheidend.

React/Vue/Next haben kostspielige Re-Renders

In SPA-Anwendungen (Single Page Applications), die mit Frameworks wie React, Vue oder Next.js erstellt wurden, kann jede Interaktion einen vollständigen oder teilweisen Re-Render der Komponente auslösen. Wenn die Komponente komplex ist, steigt die Verarbeitungszeit sprunghaft an. Dies gilt insbesondere für Komponenten mit großen Datenlisten, interaktiven Grafiken oder Formularen mit viel Logik.

Unsere Erfahrung zeigt, dass viele Entwickler sich auf die anfängliche Ladegeschwindigkeit konzentrieren und die Optimierung der Re-Renders vernachlässigen. Eine Komponente, die unnötig aktualisiert wird oder komplexe Werte bei jedem Render neu berechnet, kann ein erheblicher Engpass für INP sein. Die Behebung dieser Probleme erfordert ein tiefes Verständnis des Lebenszyklus des Frameworks und spezifischer Optimierungstechniken.

Event-Handler mit schwerer Logik

Ein Klick, der eine Validierung, eine API-Anfrage und eine DOM-Aktualisierung auslöst – alles synchron – kann 300 ms+ dauern. Wenn diese Ereignissequenz im Hauptthread ohne Unterbrechungen auftritt, blockiert der Browser und kann nicht auf andere Benutzerinteraktionen reagieren. Dies ist besonders problematisch bei komplexen Formularen oder hochinteraktiven Benutzeroberflächen.

Ein praktisches Beispiel, das wir gesehen haben, ist ein „In den Warenkorb legen“-Button, der beim Anklicken mehrere clientseitige Validierungen durchführt, eine AJAX-Anfrage an den Server sendet, auf die Antwort wartet und dann mehrere DOM-Elemente aktualisiert. Wenn eine dieser Operationen langsam oder blockierend ist, ist das INP dieser Interaktion schlecht.

Wie Sie INP optimieren

Die Optimierung von INP erfordert einen ganzheitlichen Ansatz, der Verbesserungen im Code, der Architektur und der Ressourcenverwaltung kombiniert.

• Identifizieren Sie langsame Interaktionen: Verwenden Sie die Performance API des Browsers (performance.measure()) oder die web-vitals-Bibliothek mit Attributierung, um genau herauszufinden, welche Interaktion das Problem verursacht. Die Chrome DevTools, insbesondere der Tab „Performance“, sind ein unschätzbares Werkzeug, um den Hauptthread zu visualisieren und lange Aufgaben zu erkennen. Im Jahr 2024 bieten Tools wie Lighthouse und PageSpeed Insights bereits spezifische INP-Diagnosen an, die problematische Interaktionen aufzeigen.
• Teilen Sie lange Aufgaben auf: Verwenden Sie scheduler.yield() (eine experimentelle, aber vielversprechende API) oder setTimeout(0), um lange JavaScript-Aufgaben in kleinere Teile aufzuteilen. Dies ermöglicht es dem Browser, auf andere Interaktionen zu reagieren, während der Code verarbeitet wird. Eine weitere Technik ist die Verwendung von Web Workern, um rechenintensive Aufgaben an einen separaten Thread zu delegieren und den Hauptthread zu entlasten.
• Drittanbieter-Skripte aufschieben: Laden Sie Analytics, Chat und andere Skripte nach dem ersten Paint oder verwenden Sie Attribute wie defer oder async. Blockieren Sie den Hauptthread während der Interaktion nicht. Priorisieren Sie, was der Benutzer zuerst sehen und womit er zuerst interagieren muss. Für kritische Skripte sollten Sie die Verwendung von <link rel="preload"> in Betracht ziehen.
• Optimieren Sie Re-Renders: Verwenden Sie in React useMemo, useCallback und Virtualisierung für lange Listen, um unnötige Renders zu vermeiden. Verwenden Sie in Vue v-once und Computed Properties. Zu verstehen, wann und warum eine Komponente gerendert wird, ist entscheidend. Tools wie React DevTools oder Vue Devtools können Ihnen helfen, Komponenten zu identifizieren, die zu häufig gerendert werden.
• CSS containment: Verwenden Sie contain: layout style paint, um den Bereich zu begrenzen, den der Browser neu rendern muss. Dies reduziert den Rendering-Aufwand des Browsers, insbesondere bei dynamischen Komponenten. Es ist auch hilfreich, CSS zu optimieren, indem ungenutzte Stile entfernt (PurgeCSS) und die Komplexität der Selektoren minimiert werden.
• Minimieren Sie die Arbeit des Hauptthreads: Reduzieren Sie die Menge des ausgeführten JavaScripts. Brauchen Sie diese Bibliothek wirklich? Kann es effizienter gemacht werden? „Tree Shaking“ und „Code Splitting“ sind wesentliche Techniken, um die Größe des JavaScript-Bundles zu reduzieren.
• Optimieren Sie Netzwerkanfragen: Wenn eine Interaktion von einer API-Anfrage abhängt, stellen Sie sicher, dass diese so schnell wie möglich ist. Verwenden Sie Caches, HTTP/2 oder HTTP/3 und erwägen Sie das Pre-Fetching von Daten.
• Verwendung von Server-Side Rendering (SSR) oder Static Site Generation (SSG): Für Websites mit vielen statischen Inhalten oder die eine sehr schnelle erste Ladung benötigen, können SSR oder SSG die Menge an benötigtem JavaScript auf dem Client reduzieren und die anfängliche Interaktivität verbessern.

Der INP-Schwellenwert

• Gut: weniger als 200 ms
• Verbesserungsbedürftig: 200–500 ms
• Schlecht: mehr als 500 ms

Im Vergleich zu FID (Schwellenwert: 100 ms) erscheint INP großzügiger. Aber da es die volle Zeit der schlechtesten Interaktion misst, ist es viel schwieriger zu erreichen. Ein einziger langsamer Peak kann Ihre Punktzahl ruinieren, selbst wenn der Rest der Website schnell ist.

Diese Schwellenwerte sind dynamisch und werden von Google regelmäßig angepasst. Das Ziel ist, unter 200 ms zu bleiben, um eine flüssige User Experience und eine gute SEO Performance zu gewährleisten. Im Jahr 2024 ist ein gutes INP, mit der wachsenden Bedeutung der User Experience in Googles Algorithmen (insbesondere nach dem Helpful Content Update), wichtiger denn je.

INP und seine Auswirkungen auf SEO in 2024–2026

Die Einführung von INP als Core Web Vital bekräftigt Googles Engagement für die User Experience als Ranking-Faktor. Ein schlechtes INP kann zu höheren Absprungraten, kürzerer Verweildauer auf der Seite und einem schlechteren Ranking in den Suchergebnissen führen.

E-E-A-T und die User Experience

Obwohl INP nicht direkt mit E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) zusammenhängt, trägt eine gute User Experience, die durch ein optimales INP ermöglicht wird, indirekt zur „Experience“ (Erfahrung) des Benutzers auf der Website bei. Eine langsame und wenig interaktive Website erzeugt Frustration und reduziert das Vertrauen, was die allgemeine Markenwahrnehmung beeinträchtigen kann.

Auswirkungen auf die Konversationssuche (AI Search)

Mit dem Aufkommen von generativer KI in der Suche (ChatGPT, Perplexity AI, Google SGE) werden die Geschwindigkeit und Interaktivität einer Website noch kritischer. Wenn ein Benutzer über eine KI-Antwort auf Ihre Website gelangt, erwartet er eine flüssige Erfahrung. Ein schlechtes INP könnte dazu führen, dass der Benutzer schnell zur KI-Oberfläche zurückkehrt, um eine schnellere und effizientere Quelle zu finden, was qualifizierten Traffic und Conversions reduziert.

GA4 und die Überwachung von INP

Mit der vollständigen Umstellung auf Google Analytics 4 (GA4) ist die Konfiguration der Überwachung von Performance-Metriken, einschließlich INP, unerlässlich. Obwohl GA4 keinen nativen Core Web Vitals-Bericht wie Universal Analytics hat, können benutzerdefinierte Ereignisse konfiguriert werden, um die INP-Performance und andere Interaktionsmetriken zu verfolgen. Dies ermöglicht Marketing- und Entwicklungsteams einen umfassenderen Einblick in die Auswirkungen der Performance auf das Benutzerverhalten.

Bei ZDS implementieren wir für unsere Kunden personalisierte Dashboards in GA4 und Looker Studio (jetzt Google Looker Studio, ehemals Data Studio), die INP-Daten mit Geschäftsmetriken wie Conversion Rate und Verweildauer auf der Seite kombinieren. Dies ermöglicht es uns, Korrelationen zu identifizieren und Optimierungen mit dem größten Einfluss zu priorisieren.

Häufige Fehler bei der INP-Optimierung

Aus unserer Erfahrung sind dies einige der häufigsten Fehler, die Unternehmen beim Versuch, ihr INP zu verbessern, machen:

• Das Problem ignorieren, bis es zu spät ist: Viele Unternehmen handeln erst, wenn sie einen signifikanten Rückgang ihres Rankings oder Traffics feststellen, anstatt proaktiv zu überwachen.
• Sich nur auf die anfängliche Ladung konzentrieren: Die Optimierung von LCP oder FCP garantiert kein gutes INP. Die Interaktivität ist eine andere Phase des Seitenlebenszyklus.
• Das DOM überlasten: Ein übermäßig komplexes DOM oder eines mit vielen versteckten Elementen kann Aktualisierungen und das Neuzeichnen verlangsamen und das INP beeinträchtigen.
• Nicht auf realen Geräten testen: Tests in einer Entwicklungsumgebung oder mit Hochgeschwindigkeitsverbindungen spiegeln nicht immer die reale User Experience wider. Es ist entscheidend, auf mobilen Geräten der Mittelklasse und mit simulierten 3G/4G-Verbindungen zu testen.
• Übermäßiger Einsatz von CSS/JS-Animationen: Komplexe oder schlecht optimierte Animationen können den Hauptthread blockieren und die Interaktivität beeinträchtigen.
• Mangelnde Kommunikation zwischen Teams: Entwicklungs-, Design- und Marketingteams müssen zusammenarbeiten, um sicherzustellen, dass Performance-Optimierungen von Anfang an Priorität haben.

Empfohlene Tools für die INP-Diagnose und -Optimierung (2026)

Um die INP-Herausforderungen effektiv anzugehen, empfehlen wir die folgenden Tools:

• Google Chrome DevTools: Der Tab „Performance“ ist unerlässlich, um den Hauptthread zu analysieren, lange Aufgaben zu identifizieren und Interaktionsereignisse zu visualisieren. Die Funktion „Performance Insights“ bietet eine geführte Analyse.
• PageSpeed Insights: Bietet Felddaten (CrUX) und Labordaten für INP sowie spezifische Empfehlungen. Es ist das Referenztool von Google.
• Lighthouse: Integriert in Chrome DevTools und PageSpeed Insights, bietet es eine vollständige Performance-Audit, einschließlich Interaktivitätsmetriken.
• Web-vitals JavaScript library: Für die Echtzeit-Überwachung von INP (RUM – Real User Monitoring) auf Ihrer Website. Ermöglicht das Sammeln von INP-Daten von realen Benutzern und das Senden an Ihr Analyse-Tool (z. B. GA4).
• Sentry oder Bugsnag: Für die Überwachung von Fehlern und Performance in der Produktion, die die Interaktivität beeinträchtigen können.
• Webpack Bundle Analyzer: Um den Inhalt Ihrer JavaScript- und CSS-Bundles zu visualisieren und schwere Bibliotheken oder ungenutzten Code zu identifizieren.
• Cloudflare oder Akamai: Zur Optimierung des Content Delivery Networks (CDN), das das Laden von Ressourcen beschleunigen und die Serverantwortzeit reduzieren kann, was sich indirekt auf INP auswirkt.

Ist das INP Ihrer Website rot? Bei ZDS diagnostizieren wir genau, welche Interaktionen das Problem verursachen und wie es behoben werden kann. Unser Ansatz basiert auf realen Daten und den neuesten Google-Richtlinien, um sicherzustellen, dass Ihre Website nicht nur die aktuellen Standards erfüllt, sondern auch für zukünftige Web-Trends gerüstet ist. Technische CWV-Audit.

Die Anpassung an INP ist eine Investition in die User Experience und in die Zukunft Ihrer Online-Präsenz. Bei ZDS sind wir bereit, Sie durch diese Änderung zu navigieren und sicherzustellen, dass Ihre Website 2026 und darüber hinaus glänzt.