DevTools Tips: Debugging speculative navigations for faster page loads

Sofia Emelianova
Sofia Emelianova

The Speculation Rules API lets you implement a near-instant page load based on speculation rules that you define. This lets your website prefetch and prerender most navigated-to pages.

Watch the video and check out this demo to learn how to:

  • Inspect speculations, their rules, and statuses in Application > Background services > Speculative loads.
  • Switch between renders through the drop-down menu in the action bar at the top and inspect the renders using all DevTools panels.
  • Live trace prerender status.

How can you know where the user will click next? To help you maximize the potential of speculative loads, Chrome 121 can now pick up all the links from the document rather than a fixed list but only prerender when the user is hovering over a link and is about to click it.

Watch the last part of the video to learn how to implement and debug document rules that trigger prerenders on hover or mousedown events. These events give a small head start to speculatively load pages before navigation. Check out this feature on this demo.

For more information, see: