How to optimize web responsiveness with Interaction to Next Paint

Dive into Interaction to Next Paint (INP), the newest performance metric in the Web Vitals program. Learn from the Chrome team how INP works and see how to use it to diagnose input responsiveness issues. One third of websites still struggle to meet the 200ms threshold for ""good"" INP. See what real-world sites did to improve their INP and how it affected their bottom line.
Resources:
INP documentation → goo.gle/3U7rUuF
Optimize INP guide → goo.gle/40YEgYe
Optimize long tasks guide → goo.gle/3ZMFHbc
Speakers: Annie Sullivan, Michal Mocny
Watch more:
Watch all the Technical Sessions from Google I/O 2023 → goo.gle/IO23_sessions
Watch more Web Sessions → goo.gle/IO23_web
All Google I/O 2023 Sessions → goo.gle/IO23_all
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@ChromeDevs]

Watch more Web Sessions → goo.gle/IO23_webpl_pin

[@saintpyo]

I really enjoyed the demo

[@rutvijdoshi9664]

Great video... Loved it

[@yfzhangphonn]

Great news for the front-end devs, people who values lower level improvement on performance will have a better market,

Have you got the link of Chrome Extension Web Vitals?

[@user-pi2iw1op7j]

Where can I find this INP snippet?

[@JacobGextrem]

Where can I grab "useAbortSignallingTransition"?

[@shobhitkumar_shorts]

How about analytics and other third party tools. Which triggers when u interact. Any suggestions..

[@hollycow8171]

Simple Question: Even if you do everything the INP is not constant it fluctuates some still even goes to 150 in your simple demo!! So how you think it can attain in larger project or non React/Angular projects.

[@josephbwuzhere]

INP should be good if under 320ms, 200 is NOT noticeable at all.

[@shobhitkumar_shorts]

As per my understanding not only your code causes this but your internet ,your system environment also contribute...

[@rinotovar327]

Could we please have a GitHub repo with the demo shown?

[@RickViscomi]

github.com/mmocny/inp-workshop-nextjs

[@rinotovar327]

thanks

[@Kenbreg]

Hi Google. It is irresponsible to bring in measures which de-rank a site without properly providing tools to debug such issues. It should be made simple "INP issue when a user clicks the 'Download' button" etc.

[@BrendaMalone]

How is the ordinary Website owner supposed to be able to do this?

[@bartek4210]

Consult web developers. It's like asking how ordinary home owner should be able to improve electricity system at home without consulting electrician.

[@AdvicesAcademyNetwork]

And in order to achieve good CWV now with INP, you need to pay good money to your host, and atleast $25/month Cloudflare plan. I am doing both and still not all pages doesn't pass CWV@@bartek4210

[@AdvicesAcademyNetwork]

So now you want content creators to know coding better than the developers. Is it fair? I believe INP will be a failed project.

[@pyninjacoder6043]

No, they wants that you hire developers and in the era of AI you give them some work that's today ai not able to do for you.