A presentation at DevFest, Malta 2023 in in Malta by Kevin Farrugia
Scheduling work on the main thread to improve INP Dec 06 2023
Source: https://toot.cafe/@slightlyoff/111527384063250418
Interaction to Next Paint (INP) will become a Core Web Vital in March 2024
Source: https://imkev.dev/inp
Hi, I’m Kevin.
The main thread
Source: https://aerotwist.com/blog/the-anatomy-of-a-frame/
The event loop
Source: https://www.youtube.com/watch?v=cCOL7MC4Pl0
setTimeout
async / await
When to yield?
scheduler.postTask
Source: https://caniuse.com/mdn-api_scheduler_posttask
user-blocking user-visible background
TaskController
scheduler.yield
Source: https://web.dev/articles/optimize-long-tasks
Source: https://web.dev/articles/optimize-long-tasks
Source: https://web.dev/articles/optimize-long-tasks
React’s Concurrency Mode
Thank you!
References & links ● Slides: https://imkev.dev/devfest-2023 ● Learn Performance: https://web.dev/learn/performance ● Demos: https://learn-performance-scheduling.glitch.me/ ● React useTransition demo: https://learn-performance-react-use-transition.glitch.me/ ● Geekbench 5 Multi-Core Scores: https://toot.cafe/@slightlyoff/111527384063250418 ● Interaction to Next Paint video: https://imkev.dev/inp ● Interaction to Next Paint (INP): https://web.dev/articles/inp ● Anatomy of a Pixel: https://aerotwist.com/blog/the-anatomy-of-a-frame/ ● In the loop: https://www.youtube.com/watch?v=cCOL7MC4Pl0 ● Compatibility table for scheduler.postTask: https://caniuse.com/mdn-api_scheduler_posttask ● Optimize long tasks: https://web.dev/articles/optimize-long-tasks
for free. You
can too.