Diagnosing INP & Breaking down long tasks

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.

Transcript

1. Breaking down long tasks
2. Poor responsiveness/jankiness
3. INP • Why replace FID?
4. https://almanac.httparchive.org/en/2022/performance#fig-41
5. gives you the worst interaction value, doesn’t tell you whats that worst interaction!
6. Find the slow interactions - field data - lab data
7. Field data • Pagespeed using CruX • Your RUM Provider • Web vitals JS library
8. What to record? • INP value • Responsible element selector • Loading state at the point • Interaction start time • Event type (tap, click, keyboard event)
9. https://app.datadoghq.eu/rum/performance-monitoring
10. Not great INP value! RUM provider showed the bad INP value, but not the interaction causing it.
11. Record using web vitals JS library (the attribution build)
12. import { onINP } from 'web-vitals/attribution';
16. Report the metrics collected to your analytics tool
18. Have the field data, yayy! 🎉 But, how to reproduce and fix?
19. …comes testing in the lab
20. Web vitals chrome extension
22. Cannot use extensions? Mobile device? let worstInp = 0; const observer = new PerformanceObserver((list, obs, options) => { for (let entry of list.getEntries()) { if (!entry.interactionId) continue; entry.renderTime = entry.startTime + entry.duration; worstInp = Math.max(entry.duration, worstInp); console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options); } }); observer.observe({ type: 'event', durationThreshold: 0, // 16 minimum by spec buffered: true });
24. Still no luck? Performance profile, here I come!
27. - Input delays? - Expensive event callbacks?
28. scheduler.yield() https://developer.chrome.com/origintrials/#/view_trial/836543630784069633
29. startTransition() API
30. rendering the updates can be the most challenging! (a.k.a presentation delay)
31. Large DOM sizes Leads to Style recalculation
32. Forced reflows – CSS selector complexity .box:nth-last-child(-n+1) .title { /* styles */ } https://web.dev/articles/reduce-the-scope-and-complexity-of-style-calculations
33. 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.
34. Long Animation frames observer.observe({ type: 'long-animation-frame', buffered: true });
35. • Name • Event type • Timing data • Window attribution etc. Better attribution https://developer.chrome.com/articles/long-animation-frames/
36. chrome://flags/#enable-experimental-web-platform-features
37. Origin trials for LoAF https://developer.chrome.com/origintrials/#/view_trial/3935020174414970881
39. Strategies to yield to the main thread
41. Deferred events pushed to the end of the queue?
42. scheduler .yield() developer.chrome.com/origintrials
44. Scheduler .postTask()
45. scheduler .postTask(method, {priority: ‘user-blocking’ }) scheduler .postTask(method, {priority: ‘user-visible’ }) scheduler .postTask(method, {priority: ‘background’ })
46. navigator.scheduling.isInputPending()
48. 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.
49. thank you! x.com/TheNishuGoel