Predictive Preloading

‍

Overview

Predictive Preloading significantly enhances the user experience by providing instant navigation. This advantage is achieved by predicting which page a user will visit next, pre-caching it in the browser, and pre-rendering it in a background tab. The transition to the new page occurs seamlessly when the user navigates.

‍

Key Components

Real-User Monitoring Data

SpeedKit collects web performance data from all users in near real time and uses this information to continuously improve its predictive models.
Speed Kit utilizes its real user monitoring system to monitor and optimize prediction, pre-caching, and pre-rendering rates.

Prediction

Accuracy: To predict the next user navigation as accurately as possible, Speed Kit uses a combination of machine learning models (ML) and actual user behavior. Our machine learning models are trained on more than 300 million user sessions and take user flows and behavior into consideration.
Speed: Early predictions are key to allowing enough time for full pre-rendering, guaranteeing complete page rendering and instant navigation.

Pre-Caching

The service worker caches a server-rendered version of the page loaded from Speed Kit infrastructure directly in the browser.
Speed Kit protects its customers' infrastructure and minimizes potential side effects by ensuring that requests to the customer's infrastructure are made only when a user navigates to a page.
Speed Kit employs dictionary compression to reduce HTML file sizes by up to 90%, conserving bandwidth and enabling a high number of pre-loads.

Pre-Rendering

The system renders pages with high probability in the background to enable instant navigation.
When a page becomes visible to a user, Speed Kit requests the version from the origin and replaces the placeholders with the personalized content.
The system only executes JavaScript when the prerendered page becomes visible and the <body> is merged, ensuring that analytics, ads, and other third parties work correctly and saving client-side resources.
‍

Compatibility

The prerendering feature leverages the Speculation Rules API, which is currently supported only by Chromium-based browsers, including Google Chrome, Microsoft Edge, and Opera.

Users with non-Chromium-based browsers will still experience significant benefits from the prediction and pre-caching features.

Speed Kit optimizes its functionality by choosing the most suitable option based on the Accept-Encoding header. Dictionary compression is available exclusively on Chromium-based browsers like Chrome, Edge, and Opera. For broader compatibility, Speed Kit also supports Brotli and Gzip compression for older browsers.
‍

Impacted Performance Metrics

Predictive preloads greatly improve loading metrics, such as Time To First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP), resulting in perfect scores for pre-rendered pages.

This technique can effectively speed up the loading of all pages covered by Speed Kit from the second page view of the first visit onward.
‍

Speed Kit vs Do-It-Yourself

Achieving instant page navigation depends on the ability to quickly and accurately predict the user's next navigation. To make an accurate prediction, you need to train machine learning models with a significant amount of real user data.

Additionally, caching server-rendered HTML files in a distributed infrastructure is essential. Without this capability, you would face the need to scale your infrastructure by 10–20 times, potentially leading to outages during peak events like Black Friday.

Speed Kit provides a ready-to-use solution that addresses these challenges seamlessly.

Challenge	Speed Kit	Do It Yourself
Prediction	Best possible prediction based on ML model, real user monitoring data, and user behavior.	Building and optimizing a customized prediction system to achieve >90% accuracy is a very complex IT project.
Server Load	There is no impact on the origin infrastructure. Speed Kit is delivering all pre-rendered pages from its own edge infrastructure.	You have to scale your infrastructure by 10-20x and ensure not to overload your system.
Client Load	Speed Kit employs dictionary compression to shrink HTML file sizes by up to 90% and controls JavaScript execution for pre-rendered pages.	You either set up your dictionary compressions, or the bandwidth usage increases considerably for yourself and your users.
Side Effects	To avoid unwanted side effects and to save CPU time, Speed Kit only executes JavaScript when the page becomes visible to the user.	You have to adapt your own code and handle 3rd party scripts differently to avoid unwanted side effects, like counting unseen pages as page views, registering not-seen products to product history, not-up-to-date shopping cart information, etc.

Accelerating Dynamic Data

Refresh API