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