Blazing Fast Page Navigation with Speculation Rules

What if your website could predict where a user will click next? Learn how the Speculation Rules API makes page navigation feel truly instant.

#1about 3 minutes

Why speculation rules make cheaper phones feel faster

Speculation rules pre-load content to create a faster navigation experience, even on less powerful hardware.

#2about 1 minute

Understanding the traditional page loading process

Traditional page navigation involves a slow, sequential process of requesting HTML, parsing it, and then fetching assets for each page.

#3about 3 minutes

Leveraging human reaction time for faster navigation

The significant delay between a user deciding to click and the actual click event provides a window to pre-load resources.

#4about 4 minutes

Achieving instant navigation with speculative loading

Speculation rules aim to eliminate loading time by pre-rendering pages in a hidden background tab before the user clicks.

#5about 4 minutes

Writing speculation rules with action, target, and eagerness

Define speculation rules using a JSON structure with actions like prefetch or pre-render, targets like URLs, and eagerness levels like moderate or immediate.

#6about 1 minute

Measuring the impact on Largest Contentful Paint (LCP)

The effectiveness of speculation rules is measured by the improvement in the Largest Contentful Paint (LCP) metric from Core Web Vitals.

#7about 9 minutes

Live demo of implementing and debugging speculation rules

A practical demonstration shows how to use Chrome DevTools to inspect speculation rules, view pre-rendered pages, and measure the dramatic LCP improvement.

#8about 1 minute

Understanding browser support and progressive enhancement

Speculation rules are currently supported in Chromium-based browsers, making them a progressive enhancement for a majority of users.

#9about 4 minutes

Limitations and best practices for pre-rendering

Avoid pre-rendering URLs that trigger state changes like signing out, adding to a cart, or tracking events to prevent unintended side effects.

#10about 4 minutes

Mitigating resource waste with dictionary compression

Address the downside of wasted resources from unused pre-renders by using dictionary compression to significantly reduce the bandwidth of fetched pages.

#11about 1 minute

Actionable steps to implement speculation rules today

Start by testing speculation rules with a simple script, consider enabling dictionary compression, and continue optimizing the initial page load for all users.