Explores the pending Core Web Vital, Interaction to Next Paint that replaces FID in 2024 and diagnose it to solve pains with annoying long tasks in the browser, also using the Long Animation Frames API.
What to record? • INP value • Responsible element selector • Loading state at the point • Interaction start time • Event type (tap, click, keyboard event)
Long tasks API • Tells you a long task happened and took this long, but doesn't tell what might have caused it. – Basic attribution model • Doesn't count the rendering updates time, happens in a different task.
Quick recap: • INP – pending CWV for March 2024 • Gives good attribution data to diagnose • Leads you to measure field data using web vitals JS library for example • We should then use lab tools to reproduce the slowness • Understanding delays in the browser • Strategies to fix the main thread blocking.