Scheduling work on the main thread to improve INP

A presentation at DevFest, Malta 2023 in December 2023 in Malta by Kevin Farrugia

Slide 1

Slide 1

Scheduling work on the main thread to improve INP Dec 06 2023

Slide 2

Slide 2

Source: https://toot.cafe/@slightlyoff/111527384063250418

Slide 3

Slide 3

Interaction to Next Paint (INP) will become a Core Web Vital in March 2024

Slide 4

Slide 4

Source: https://imkev.dev/inp

Slide 5

Slide 5

Hi, I’m Kevin.

Slide 6

Slide 6

Slide 7

Slide 7

The main thread

Slide 8

Slide 8

Source: https://aerotwist.com/blog/the-anatomy-of-a-frame/

Slide 9

Slide 9

The event loop

Slide 10

Slide 10

Source: https://www.youtube.com/watch?v=cCOL7MC4Pl0

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

setTimeout

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

async / await

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

When to yield?

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

scheduler.postTask

Slide 32

Slide 32

Source: https://caniuse.com/mdn-api_scheduler_posttask

Slide 33

Slide 33

user-blocking user-visible background

Slide 34

Slide 34

Slide 35

Slide 35

TaskController

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

scheduler.yield

Slide 39

Slide 39

Source: https://web.dev/articles/optimize-long-tasks

Slide 40

Slide 40

Source: https://web.dev/articles/optimize-long-tasks

Slide 41

Slide 41

Source: https://web.dev/articles/optimize-long-tasks

Slide 42

Slide 42

React’s Concurrency Mode

Slide 43

Slide 43

Slide 44

Slide 44

Thank you!

Slide 45

Slide 45

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