INP auf Landingpages optimieren: Wenn der Klick schneller sein muss
Eine Landingpage kann schnell laden und sich trotzdem langsam anfühlen. Der CTA reagiert verzögert, das Formular stockt oder das mobile Menü öffnet erst nach einer Denkpause. Genau diese Momente misst Interaction to Next Paint, kurz INP. Für Performance Marketing ist das kein Entwicklerdetail: Wenn die Seite beim wichtigsten Klick träge wird, kaufst du Traffic für eine Erfahrung, die Nutzer ausbremst.
Was INP tatsächlich misst
INP bewertet die Reaktionsfähigkeit einer Seite während des gesamten Besuchs. Die Metrik beobachtet Interaktionen wie Klicks, Taps und Tastatureingaben und betrachtet die Zeit vom Beginn der Eingabe bis zu dem Moment, in dem der Browser das nächste sichtbare Bild darstellen kann.
Damit geht INP weiter als eine reine Ladezeit. Ein Hero kann längst sichtbar sein, während ein schweres Script den Hauptthread blockiert und der erste CTA deshalb verspätet reagiert. Google empfiehlt für eine gute Nutzererfahrung einen INP von weniger als 200 Millisekunden. Zwischen 200 und 500 Millisekunden besteht Verbesserungsbedarf; darüber gilt die Reaktionsfähigkeit als schlecht.
Schnell geladen ist nicht automatisch schnell bedienbar. Entscheidend ist, was nach dem Tap passiert.
Warum Landingpages besonders anfällig sind
Landingpages sammeln gern alles, was Marketing messbar und überzeugend machen soll: Consent-Management, Analytics, Werbepixel, Heatmaps, Chat, Calendly, Video-Player, Formularlogik, Animationen und A/B-Testing. Jedes Element kann sinnvoll sein. Zusammen konkurrieren sie aber um Rechenzeit – besonders auf durchschnittlichen Smartphones.
Typische kritische Interaktionen sind:
- der erste Klick auf den Haupt-CTA,
- das Öffnen eines Pop-ups oder Termin-Kalenders,
- die Auswahl in einem mehrstufigen Formular,
- das Tippen in Felder mit Live-Validierung,
- das Aufklappen von FAQ-Elementen,
- ein mobiles Menü mit Animation und Tracking-Events.
Field Data und Lab Data nicht verwechseln
Der Core-Web-Vitals-Bericht in der Search Console basiert auf echten Nutzungsdaten aus dem Chrome User Experience Report. Er gruppiert ähnliche URLs und bewertet mobile sowie Desktop-Daten getrennt. Diese Felddaten zeigen, wie die Seite unter realen Geräten, Netzwerken und Interaktionen funktioniert.
PageSpeed Insights, Lighthouse und die Chrome DevTools helfen bei der Diagnose einzelner URLs. Labortests sind schneller verfügbar und reproduzierbar, ersetzen aber keine Felddaten. INP ist besonders schwierig im Labor, weil die Metrik Interaktionen über die gesamte Seitennutzung betrachtet. Ohne echte Interaktion gibt es keinen aussagekräftigen INP.
Die sinnvolle Reihenfolge:
- In der Search Console betroffene URL-Gruppen und Gerätetypen finden.
- Mit PageSpeed Insights Feld- und Labordaten vergleichen.
- Die tatsächlichen Klickpfade in Chrome DevTools nachstellen.
- Mit Real User Monitoring konkrete langsame Interaktionen identifizieren.
- Nach dem Fix erneut im Labor testen und die Felddaten abwarten.
INP besteht aus drei Verzögerungen
Eine langsame Interaktion hat nicht nur eine mögliche Ursache. Vereinfacht besteht sie aus:
- Input Delay: Die Eingabe wartet, weil der Hauptthread noch andere Aufgaben verarbeitet.
- Processing Duration: Event-Handler und zugehörige JavaScript-Logik brauchen zu lange.
- Presentation Delay: Der Browser benötigt nach der Logik zu lange für Layout, Rendering und das nächste Bild.
Diese Trennung ist wichtig. Ein langsamer Button wird nicht automatisch schneller, wenn du nur Bilder komprimierst. Du musst wissen, ob die Verzögerung vor, während oder nach dem eigentlichen Event entsteht.
Priorität 1: Lange JavaScript-Aufgaben zerlegen
Blockiert eine lange Aufgabe den Hauptthread, muss der Klick warten. Besonders kritisch sind große JavaScript-Bundles, mehrere Tag-Manager-Skripte und Komponenten, die direkt nach dem Laden alles gleichzeitig initialisieren.
Prüfe, welche Logik wirklich vor der nächsten sichtbaren Reaktion passieren muss. Beim Formular-Klick sollte zuerst der nächste Schritt erscheinen. CRM-Synchronisierung, zusätzliche Analysen oder aufwendige Berechnungen können anschließend laufen. web.dev empfiehlt, nicht kritische Arbeit zu verschieben und dem Browser zwischendurch Gelegenheit zum Rendern zu geben.
Praktische Maßnahmen:
- ungenutztes JavaScript entfernen,
- große Aufgaben in kleinere Einheiten zerlegen,
- nicht kritische Funktionen verzögert laden,
- Event-Handler auf die notwendige Arbeit begrenzen,
- aufwendige Berechnungen außerhalb des Hauptthreads prüfen.
Priorität 2: Drittanbieter-Skripte auf Geschäftswert prüfen
Der nächste Tracking- oder Widget-Einbau wirkt einzeln klein. In Summe entsteht oft das eigentliche Problem. Erstelle deshalb ein Script-Inventar mit Eigentümer, Zweck und messbarem Nutzen.
Stelle für jedes externe Script drei Fragen:
- Brauchen wir es auf jeder Landingpage?
- Muss es direkt beim Seitenstart geladen werden?
- Nutzen wir die Daten tatsächlich für eine Entscheidung?
Ein Chat-Widget ohne gepflegten Chat, ein zweites Analyse-Tool ohne Auswertung oder drei parallel feuernde Pixel sind keine Marketing-Infrastruktur. Sie sind Ballast. Consent kann den Ladezeitpunkt steuern, ersetzt aber nicht die technische Priorisierung nach erteilter Einwilligung.
Priorität 3: DOM und Layout-Arbeit reduzieren
Sehr große DOM-Strukturen verteuern Rendering und Layout. Pagebuilder erzeugen gern mehrere verschachtelte Container für ein Element, das visuell simpel aussieht. Kommt bei einer Interaktion noch dynamischer Inhalt hinzu, muss der Browser viel neu berechnen.
Vermeide außerdem Layout Thrashing: JavaScript ändert Styles und liest im selben Arbeitsschritt wieder Layoutwerte aus. Dadurch wird der Browser zu synchronen Berechnungen gezwungen. Bündele DOM-Lese- und Schreibvorgänge und reduziere unnötige visuelle Updates.
Für lange Seiten kann content-visibility helfen, weit unten liegende Bereiche erst zu rendern, wenn sie sich dem sichtbaren Bereich nähern. Das ist kein pauschaler Einzeiler, sondern muss auf Zugänglichkeit, Layout und tatsächlichen Effekt getestet werden.
Formulare auf mobilen Geräten testen
Ein Formular ist meist die wichtigste Interaktion der Landingpage. Trotzdem wird es häufig nur auf dem Entwickler-Laptop geprüft. Teste es auf einem realistischen Smartphone und achte auf:
- verzögerte Fokuswechsel,
- Live-Validierung bei jedem Tastendruck,
- ruckelnde Fortschrittsanzeigen,
- doppelte Submit-Handler,
- Kalender oder Dropdowns mit großen Bibliotheken,
- unnötige Animationen beim Schrittwechsel.
Mehr Schritte sind nicht automatisch langsamer. Ein gut gebautes, mehrstufiges Formular kann die kognitive Last reduzieren. Technisch muss jeder Schritt aber leichtgewichtig reagieren.
Sofortiges Feedback macht Wartezeit verständlicher
Nicht jede Verarbeitung lässt sich auf null reduzieren. Dann braucht der Nutzer sichtbares Feedback: Der Button wechselt in einen Ladezustand, die Auswahl wird sofort markiert oder ein Fortschritt erscheint. Das verbessert nicht zwingend den gemessenen INP, verhindert aber Unsicherheit und Doppelklicks.
Wichtig: Ein Loader ist keine Entschuldigung für blockierenden Code. Erst technische Ursache reduzieren, dann verbleibende Wartezeit ehrlich kommunizieren.
INP, CRO und SEO richtig einordnen
Google empfiehlt gute Core Web Vitals für Nutzerfreundlichkeit und Sucherfolg. Trotzdem ist ein grüner Wert kein automatischer Ranking-Sprung. Inhalt, Suchintention, Relevanz und viele weitere Signale bleiben entscheidend.
Für Paid Traffic ist der wirtschaftliche Zusammenhang direkter: Eine träge Interaktion kann den Weg zwischen Klick und Conversion stören. Messe deshalb neben INP auch Formularstarts, Schritt-Abbrüche und Conversionrate. Der bestehende Leitfaden zur Landingpage-Optimierung für Leadgenerierung zeigt, wie Technik, Botschaft und Funnel gemeinsam bewertet werden.
Was Value-Based Bidding daraus lernen kann
Eine schnelle Seite sorgt dafür, dass das gewünschte Signal überhaupt sauber entsteht. Der neue Beitrag zu Value-Based Bidding für Google-Ads-Leads setzt danach an: Er zeigt, wie qualifizierte Leads und Abschlüsse unterschiedliche Werte erhalten, damit Google nicht nur auf die Menge der Formulare optimiert.
Offizielle Grundlage
Google definiert INP und die empfohlenen Schwellenwerte in der Dokumentation zu Interaction to Next Paint. Konkrete technische Maßnahmen beschreibt web.dev im Leitfaden INP optimieren. Felddaten und URL-Gruppen erklärt die Search-Console-Hilfe zu Core Web Vitals.
Mein Fazit
INP zeigt, ob deine Landingpage nach dem Laden wirklich benutzbar bleibt. Beginne nicht mit kosmetischen Minifixies, sondern mit den geschäftskritischen Interaktionen: CTA, Formular, Kalender und Mobile Navigation. Finde die konkrete Verzögerung, reduziere Hauptthread-Arbeit, hinterfrage Drittanbieter-Skripte und teste auf echten Geräten. Eine Landingpage muss nicht nur Aufmerksamkeit gewinnen. Sie muss im entscheidenden Moment reagieren.
Lass uns deine Landingpage schnell und conversionstark machen ↗