Welche Core Web Vitals optimierst du, und was misst Interaction to Next Paint eigentlich?

Die drei sind Largest Contentful Paint für das Laden, Interaction to Next Paint für die Reaktionsfähigkeit und Cumulative Layout Shift für visuelle Stabilität. INP misst die komplette Latenz einer Interaktion, vom Input-Event über deinen Handler und alle Rendering-Arbeit bis der nächste Frame gepaintet ist. Google berichtet ungefähr die schlechteste Interaktion auf der Seite, ein einziger langsamer Handler ruiniert also den Wert, selbst wenn der Durchschnitt in Ordnung ist.

Die drei sind LCP dafür, wie schnell der Hauptinhalt auftaucht, INP für die Reaktionsfähigkeit und CLS für Layout-Stabilität. INP ist das Interessante, weil es First Input Delay abgelöst hat und die ganze Interaktion misst statt nur die Wartezeit, bis der Handler läuft. Es ist also das Input Delay, während der Main Thread beschäftigt ist, plus die Zeit, die mein Handler braucht, plus das Presentation Delay bis der nächste Frame gerendert ist. Unter zweihundert Millisekunden ist der gute Bereich, und gemessen wird bei echten Nutzern im Feld, es spiegelt also Mittelklasse-Android-Handys wider und nicht meinen Laptop. Die praktische Konsequenz ist, dass es meistens den Handler betrifft und nicht das Bundle. Auf einer Suchseite, für die ich verantwortlich war, wurden beim Tippen rund vierhundert Millisekunden gemeldet, und es stellte sich heraus, dass jeder Tastendruck synchron eine große Ergebnisliste neu gerendert hat. Den teuren Teil zu debouncen und vor dem Rendern an den Browser abzugeben, hat es unter hundertfünfzig gedrückt.