Faster than light loading with the Speculation Rules API

As web developers, we constantly optimize for the fastest possible loading time, as slow loading times are undeniably a lousy user experience. We can work in multiple areas to shave off milliseconds wherever possible:

• Rendering : Render the initial page Server-Side (SSR). Any later enhancement, like setting up events, etc., happens seamlessly and efficiently at the later hydration stage.
• Server response times : Server-side caching, database optimizations, and performant algorithms contribute to less time spent on the server and more time shipping bits.
• Server distribution : Cloud hosting ensures that no single server gets overwhelmed and that you always connect to geographically nearby machines (more on this later).
• Ship fewer bytes : Once the server starts streaming data to the client, we want to limit the stream's length so the client can focus on the next and most important step: getting something on the screen.

At toddle.dev, our time to first paint keeps getting lower, and we still want to explore many areas. However, physics is starting to significantly limit how long it takes to get data to the screen.

Lightspeed is too slow

Even with toddle sites being distributed to 320 cities in more than 120 countries, data still has to move from server to client at the crippling slow speed of c , which in our universe is, unfortunately, just 299,792,458 m/s . This, combined with the HTTP requirement for an upfront TCP 3-Way Handshake , means we have to go back and forth multiple times at c to your nearest server before streaming data. Then there is the additional overhead of deflation, the whole layout engine pipeline, and finally, rendering to actual pixels. In other words, it's slow and realistically limits us to about 200ms for a simple page to load. More complex pages that include multiple resources like images or significant content may take twice that. All this is using state-of-the-art methods and optimized well beyond what you can expect on other platforms and pages that may load in seconds rather than milliseconds.

Perceived performance ~= raw performance

Usually, when physics gets in the way, you have to realize the limitation, settle, and pad yourself on the back for how far you've come. However, the engineers at Google decided that this wasn't enough for them, and perhaps there was a way to beat physics this one time. While Google engineers didn't invent faster-than-light travel (yet), they did switch to a clever optimization strategy, " perceived performance ." Perceived performance is nearly as valuable as raw performance, as they are indistinguishable from the users' perspectives. Users don't care if something loads in 0 seconds or if the resource was fetched 200ms ahead of time in the background as long as they perceive the same thing. This brings us to the new Speculation Rules API.

Speculation rules to the rescue

As the name indicates, the new Speculation rules API allows developers to hint the browser on what to load ahead of time speculatively. Unlike previous browser APIs, this is not only about pre-connecting or prefetching individual resources. Instead, it is as if the page has been opened in an invisible background tab and then is activated by replacing the foreground tab with that pre-rendered page. This makes multi-page websites perform even better than single-page applications.

The new API is more powerful than previous iterations like the now-deprecated rel="prerender," as it has more general rules, and better tools to inspect the rules live. This screenshot is taken from Chrome on the toddle blog:

Eagerness.

The new API allows you to specify a level of eagerness to speculate on:

• Eeager:  This setting indicates that a resource should be prerendered as soon as possible.
• moderate:  In Chrome, this setting indicates that a resource will prerender after 200 milliseconds of hover on a link (or on pointerdown event if that is sooner, and on mobile where there is no `hover` event).
• conservative:  Triggers on pointers or touchdowns.

The new speculation rules outsource some details to browsers. Your job is to hint the browser what to do by defining the rules, but ultimately, the browser implementation makes the final call. This is great as the browser knows more about your users than you do, like what device they are on and whether they are running on low data mode or are running out of system memory.

Check out the official article for more details on the new Speculation Rules API.

You can use Speculation Rules in toddle

As with many cutting-edge APIs, Speculation Rules have already been implemented in toddle. Adding eagerness to a `<a>` tag is as simple as selecting it from a dropdown on the element itself. Since toddle is built in toddle, we have already added this feature to our pages. For example, in this blog https://toddle.dev/blog/ - the main article has "eager" loading, while the rest have "moderate" loading.

Clicking posts should give the perception of instant loading, even though they are entirely different pages! Note! Speculation rules currently have 73.37% browser support . Make sure your browser is supported before you try it out!

See Andreas' implement Speculation rules in toddle