Interaction to Next Paint

A presentation at Google I/O Extended - Malta in June 2022 in Malta by Kevin Farrugia

Slide 1

Slide 1

Malta Interaction to Next Measuring responsiveness on the web Paint Kevin Farrugia @imkevdev

Slide 2

Slide 2

Responsiveness INP measures how quickly a page responds to a user interaction Malta

Slide 3

Slide 3

Responsiveness Malta

Slide 4

Slide 4

First Input Delay ●Measures the first interaction on a page. ●Only includes the delay in processing. Malta

Slide 5

Slide 5

Good FID The number of websites achieving a good FID score has increased from 72.1% of origins in 2018 to 92.5% of origins in May 2022. FID on desktop was always > 98%. Malta

Slide 6

Slide 6

Interaction to Next Paint ●Considers all user interactions. ●Measures the time from the input until the frame is painted to screen. Malta

Slide 7

Slide 7

The “worst” INP ●INP score is the worst interaction on your page. ●> 50 interactions, then 98th percentile.

Slide 8

Slide 8

It’s good for business! The more long tasks, the less likely a user is to convert. The median conversion rate for users that experience < 500ms JS long tasks is 38.5%, while users that experience > 4000ms long tasks have a conversion rate of 11.8%. Malta

Slide 9

Slide 9

Optimizing INP ●Minimize main-thread work. ●Optimize JavaScript bundles. ●Audit your event handlers. ●Beware of hydration in Single Page Apps.

Slide 10

Slide 10

Measuring INP ●CrUX dataset, including PageSpeed Insights. ●web-vitals library ●PerformanceObserver.

Slide 11

Slide 11

INP in the real world CWV technology report INP data for May 2022 Malta

Slide 12

Slide 12

Thank you Recommended reading: ●web.dev/inp ●debugbear.com/docs/metrics/interaction-to-next-paint ●Correlation between Total Blocking Time and Interaction to Next Paint on Mo bile (Annie Sullivan) ●imkev.dev/inp @imkevdev