{"id":7128,"date":"2026-06-04T06:49:26","date_gmt":"2026-06-04T06:49:26","guid":{"rendered":"https:\/\/nubusiness.it\/was-ist-interaction-to-next-paint-inp\/"},"modified":"2026-06-04T06:49:26","modified_gmt":"2026-06-04T06:49:26","slug":"was-ist-interaction-to-next-paint-inp","status":"publish","type":"post","link":"https:\/\/nubusiness.it\/de\/was-ist-interaction-to-next-paint-inp\/","title":{"rendered":"Was ist Interaction to Next Paint (INP)"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Interaction to Next Paint (INP) ist eine ausstehende Core Web Vitals Hauptmetrik, die ab M\u00e4rz 2024 den First Input Delay (FID) ersetzen wird. INP bewertet die Reaktionsf\u00e4higkeit mithilfe von Daten aus der Event Timing API. Wenn eine Interaktion die Seite blockiert, entsteht eine schlechte Nutzererfahrung. INP beobachtet die Latenz aller Interaktionen, die der Nutzer auf der Seite ausf\u00fchrt, und meldet einen einzelnen Wert, unter dem (oder f\u00fcr den Gro\u00dfteil) aller Interaktionen lagen. Ein niedriger INP-Wert bedeutet, dass die Seite in der Lage war, schnell und konsistent auf alle oder die meisten Nutzerinteraktionen zu reagieren.<\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Inhaltsverzeichnis<\/h2><nav><ul><li class=\"\"><a href=\"#cose-inp\">Was ist INP?<\/a><ul><li class=\"\"><a href=\"#una-nota-sul-calcolo-di-inp\">Eine Anmerkung zur Berechnung von INP<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#qual-e-un-buon-punteggio-di-inp\">Was ist ein guter INP-Wert?<\/a><\/li><li class=\"\"><a href=\"#cosa-contiene-uninterazione\">Was umfasst eine Interaktion?<\/a><\/li><li class=\"\"><a href=\"#in-cosa-differisce-inp-da-first-input-delay-fid\">Worin unterscheidet sich INP vom First Input Delay (FID)?<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Chrome-Nutzungsdaten zeigen, dass 90 % der Zeit, die ein Nutzer auf einer Seite verbringt, nach dem Laden der Seite stattfinden. Daher ist eine sorgf\u00e4ltige Messung der Reaktionsf\u00e4higkeit w\u00e4hrend des Seitenlebenszyklus wichtig. Genau das bewertet die Metrik INP.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gute Reaktionsf\u00e4higkeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, erh\u00e4lt der Nutzer visuelles Feedback, das der Browser im n\u00e4chsten Frame darstellt. Das visuelle Feedback signalisiert beispielsweise, ob ein Artikel im Onlineshop tats\u00e4chlich zum Warenkorb hinzugef\u00fcgt wurde, ob sich ein mobiles Navigationsmen\u00fc ge\u00f6ffnet hat, ob die Inhalte eines Login-Formulars vom Server authentifiziert wurden, und so weiter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www-1024x683.jpg\" alt=\"Che cos&#039;\u00e8 Interaction to Next Paint (INP)\" class=\"wp-image-6203\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www-1024x683.jpg 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www-300x200.jpg 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www-768x512.jpg 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www-1536x1024.jpg 1536w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www-900x600.jpg 900w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/inp-www.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Einige Interaktionen ben\u00f6tigen nat\u00fcrlich mehr Zeit als andere, aber bei besonders komplexen Interaktionen ist es wichtig, schnell ein erstes visuelles Feedback zu geben, um dem Nutzer zu signalisieren, dass etwas geschieht. Die Zeit bis zum n\u00e4chsten Paint ist die erste Gelegenheit daf\u00fcr. INP hat daher nicht das Ziel, alle m\u00f6glichen Folgeeffekte einer Interaktion zu messen (wie das Nachladen von Netzressourcen oder UI-Updates durch andere asynchrone Vorg\u00e4nge), sondern die Zeit, in der der n\u00e4chste Paint blockiert ist. Verz\u00f6gert sich das visuelle Feedback, kann dies den Eindruck erwecken, die Seite reagiere nicht auf die Aktionen des Nutzers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ziel von INP ist es sicherzustellen, dass die Zeit vom Beginn einer Nutzerinteraktion bis zum n\u00e4chsten dargestellten Frame f\u00fcr alle oder die meisten Interaktionen so kurz wie m\u00f6glich ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Im folgenden Video zeigt das Beispiel rechts ein sofortiges visuelles Feedback beim \u00d6ffnen eines Akkordeon-Elements. Es demonstriert au\u00dferdem, wie schlechte Reaktionsf\u00e4higkeit zu mehrfachen unerw\u00fcnschten Eingaben f\u00fchren kann, weil der Nutzer denkt, die Seite funktioniere fehlerhaft.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"370\" style=\"aspect-ratio: 1444 \/ 370;\" width=\"1444\" controls src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/INP.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cose-inp\">Was ist INP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">INP ist eine Metrik, die die Gesamtreaktionsf\u00e4higkeit einer Seite auf Nutzerinteraktionen bewertet, indem sie die Latenz aller Klick-, Tap- und Tastaturinteraktionen beobachtet, die w\u00e4hrend eines Besuchs auf einer Seite auftreten. Der finale INP-Wert entspricht der l\u00e4ngsten Dauer aller Interaktionen, wobei Ausrei\u00dfer ignoriert werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"una-nota-sul-calcolo-di-inp\">Eine Anmerkung zur Berechnung von INP<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Interaktion ist eine Gruppe von Event-Handlern, die w\u00e4hrend derselben logischen Nutzeraktion ausgel\u00f6st werden. Beispielsweise umfassen &#8222;Tap&#8220;-Interaktionen auf Touch-Ger\u00e4ten mehrere Ereignisse wie pointerup, pointerdown und click. Eine Interaktion kann durch <a href=\"https:\/\/it.wikipedia.org\/wiki\/JavaScript\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a>, CSS, browserinterne Steuerelemente (wie Formularelemente) oder eine Kombination davon gesteuert werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Latenz einer Interaktion entspricht der l\u00e4ngsten Dauer unter den Event-Handlern, die die Interaktion steuern, vom Beginn der Interaktion durch den Nutzer bis zum Zeitpunkt, an dem der n\u00e4chste Frame mit visuellem Feedback pr\u00e4sentiert wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"qual-e-un-buon-punteggio-di-inp\">Was ist ein guter INP-Wert?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es ist schwierig, einer Reaktivit\u00e4tsmetrik Labels wie &#8222;gut&#8220; oder &#8222;schlecht&#8220; zuzuweisen. Einerseits m\u00f6chte man Entwicklungspraktiken f\u00f6rdern, die gute Reaktionsf\u00e4higkeit priorisieren. Andererseits muss ber\u00fccksichtigt werden, dass die F\u00e4higkeiten der Ger\u00e4te, die Nutzer verwenden, stark variieren, sodass realistische Entwicklungsziele n\u00f6tig sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um sicherzustellen, dass du nutzerfreundliche, reaktionsschnelle Erlebnisse lieferst, ist ein n\u00fctzlicher Referenzwert das 75. Perzentil der im Feld gemessenen Seitenladezeiten, aufgeteilt nach Mobil- und Desktop-Ger\u00e4ten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein INP von h\u00f6chstens 200 Millisekunden zeigt an, dass deine Seite eine gute Reaktionsf\u00e4higkeit hat.<\/li>\n\n\n\n<li>Ein INP gr\u00f6\u00dfer als 200 Millisekunden und h\u00f6chstens 500 Millisekunden zeigt, dass die Reaktionsf\u00e4higkeit deiner Seite verbessert werden sollte.<\/li>\n\n\n\n<li>Ein INP gr\u00f6\u00dfer als 500 Millisekunden zeigt, dass deine Seite eine schlechte Reaktionsf\u00e4higkeit hat.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"198\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-INP-.png\" alt=\"\" class=\"wp-image-6200\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-INP-.png 835w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-INP--300x71.png 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/Interaction-to-Next-Paint-INP--768x182.png 768w\" sizes=\"auto, (max-width: 835px) 100vw, 835px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cosa-contiene-uninterazione\">Was umfasst eine Interaktion?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"271\" src=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/interazione-INP-1024x271.png\" alt=\"\" class=\"wp-image-6201\" title=\"\" srcset=\"https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/interazione-INP-1024x271.png 1024w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/interazione-INP-300x80.png 300w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/interazione-INP-768x204.png 768w, https:\/\/nubusiness.it\/wp-content\/uploads\/2023\/07\/interazione-INP.png 1030w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Diagramm, das eine Interaktion im Haupt-Thread darstellt. Der Nutzer f\u00fchrt eine Eingabe aus, w\u00e4hrend blockierende Aufgaben ausgef\u00fchrt werden. Die Eingabe wird verz\u00f6gert, bis diese Aufgaben abgeschlossen sind; anschlie\u00dfend werden die Event-Handler pointerup, mouseup und click ausgef\u00fchrt, dann werden Rendering- und Painting-Vorg\u00e4nge gestartet, bis der n\u00e4chste Frame pr\u00e4sentiert wird. Der Lebenszyklus einer Interaktion: Es tritt eine Eingabeverz\u00f6gerung bis zum Start der Event-Handler auf, die durch Faktoren wie lange Aufgaben im Haupt-Thread verursacht werden kann. Danach werden die Event-Handler der Interaktion ausgef\u00fchrt, und es kommt zu einer Verz\u00f6gerung, bevor der n\u00e4chste Frame dargestellt wird. Der Hauptmotor der Interaktivit\u00e4t ist h\u00e4ufig JavaScript, obwohl Browser auch Interaktivit\u00e4t \u00fcber nicht-JavaScript-gesteuerte Controls bieten, wie Checkboxen, Radiobuttons und CSS-gesteuerte Controls.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr INP werden nur die folgenden Interaktionstypen beobachtet:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicks mit der Maus.<\/li>\n\n\n\n<li>Tippen auf einem Touchscreen-Ger\u00e4t.<\/li>\n\n\n\n<li>Dr\u00fccken einer Taste auf einer physischen oder virtuellen Tastatur.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"in-cosa-differisce-inp-da-first-input-delay-fid\">Worin unterscheidet sich INP vom First Input Delay (FID)?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">W\u00e4hrend INP alle Interaktionen auf der Seite ber\u00fccksichtigt, erfasst der First Input Delay (FID) nur die erste Interaktion. FID misst nur die Eingabeverz\u00f6gerung der ersten Interaktion, nicht die Zeit, die zur Ausf\u00fchrung der Event-Handler oder zur Darstellung des n\u00e4chsten Frames ben\u00f6tigt wird.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Da FID ebenfalls eine Lade-Reaktivit\u00e4tsmetrik ist, beruht seine Logik auf der Annahme, dass, wenn die erste Interaktion w\u00e4hrend der Ladephase einer Seite kaum oder gar keine Eingabeverz\u00f6gerung aufweist, die Seite einen guten ersten Eindruck gemacht hat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">INP geht \u00fcber den ersten Eindruck hinaus. Indem alle Interaktionen abgetastet werden, kann die Reaktionsf\u00e4higkeit umfassend bewertet werden, wodurch INP im Vergleich zu FID ein zuverl\u00e4ssigerer Indikator f\u00fcr die Gesamtreaktionsf\u00e4higkeit ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Was passiert, wenn kein INP-Wert gemeldet wird? Es ist m\u00f6glich, dass eine Seite keinen INP-Wert zur\u00fcckgibt. Das kann aus verschiedenen Gr\u00fcnden vorkommen:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Seite wurde geladen, aber der Nutzer hat nicht geklickt, getippt oder eine Taste gedr\u00fcckt. Die Seite wurde geladen, aber der Nutzer hat mit Gesten interagiert, die keine Klicks, Taps oder Tastatureingaben beinhalten. Zum Beispiel beeinflussen Scrollen oder Mouseover den INP nicht. Die Seite wurde von einem Bot geladen, etwa einem Suchcrawler oder einem Headless-Browser, der nicht daf\u00fcr programmiert ist, mit der Seite zu interagieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interaction to Next Paint (INP) ist eine ausstehende Core Web Vitals Hauptmetrik, die ab M\u00e4rz 2024 den First Input Delay (FID) ersetzen wird. INP bewertet die Reaktionsf\u00e4higkeit mithilfe von Daten aus der Event Timing API. Wenn eine Interaktion die Seite&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6202,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7128","post","type-post","status-publish","format-standard","has-post-thumbnail","category-senza-categoria"],"_links":{"self":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/posts\/7128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/comments?post=7128"}],"version-history":[{"count":0,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/posts\/7128\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/media\/6202"}],"wp:attachment":[{"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/media?parent=7128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/categories?post=7128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nubusiness.it\/de\/wp-json\/wp\/v2\/tags?post=7128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}