Fast Websites: The New Speculation Rules API

The new Speculation Rules API enables browsers to prefetch and prerender website content, potentially leading to faster perceived performance. While this can improve user experience, it's crucial to consider the potential downsides, including increased costs for server resources and bandwidth, especially for websites with many pages or complex routing. Ultimately, the decision to use these features depends on balancing the benefits of faster perceived loading times against potential costs and the user's network conditions.

Speculation Rules API

• 00:00:06 The Speculation Rules API, now in Chrome and being polyfilled for other browsers, leverages prefetching and prerendering to improve website speed. The API allows developers to specify rules for preloading content based on link matches or CSS selectors. It also introduces an 'eagerness' setting that allows the browser to make intelligent decisions about when to prefetch or prerender based on factors like network speed and battery life.

Prefetching and Prerendering

• 00:01:15 Prefetching and prerendering have long been used to improve website speed by loading assets ahead of time. Prerendering goes a step further by rendering the content in a hidden tab, leading to instant loading on subsequent page visits. However, this can lead to increased server and bandwidth costs if done aggressively, as seen in the example of the McMaster Car website.

Costs of Prefetching

• 00:10:31 Prefetching and prerendering can significantly increase costs related to bandwidth usage and server resources. An average HTML page can cost little when served from a CDN but can become costly when aggressively prefetching a large number of pages. The increased load on servers and databases must be considered when implementing these techniques, and the cost-benefit ratio must be carefully evaluated.

Page Speed Insight Score

• 00:20:25 The relevance of the Page Speed Insight score is debated as it may not accurately reflect real-world user experience. While it can be a valuable tool, the focus should be on delivering a fast user experience, not necessarily achieving a high Lighthouse score. Many real-world websites with lots of images and features do not receive high scores but are perceived as fast by users.

User Experience

• 00:22:43 Ultimately, the most important metric for website speed is user experience. Techniques like preloading and prefetching, combined with other optimizations, can lead to a smoother, faster user experience. The user's network conditions, device capabilities, and overall experience should be prioritized over a specific Page Speed Insights score.