- Make yourself familiar with the page and observe the initial LCP and CLS with default settings.
- Disable the page frame UI (including those instructions) using the toggle and record a Performance profile.
- Use the Billboard toggles to influence what font is used and how the image is loaded.
- Click any of the driver bios and wait for them to load. Try the same with Speculation Rules enabled.
- Place an obstacle on the racing track and see how stuttery or smooth cars can move around with
scheduler.yield()enabled and disabled.
Speed Dating
Learn more about the drivers taking part in this race. Their profiles are on separate static pages; if speculation rules are enabled they load instantly.
Obstacle Course
This race is running on the main thread: the movement of the cars and road are animated using JavaScript and requestAnimationFrame. Other work on the main thread will block the animation from running. Using scheduler.yield() during heavy tasks can keep the animation running though.
Place an obstacle for the drivers to see them work around it - with yielding turned off and on in the control panel. How does INP compare?
That's a wrap!
That's all there is to this demo. Want to check out another one?
