How Speed Kit Works: A Technical Overview

‍

Key Takeaways

• Simple Setup & Removal: The integration is designed to be fast and easy, typically taking less than two hours of customer effort for three simple steps: adding a JS tag, hosting the Speed Kit service worker, and IP whitelisting. The service can be removed just as easily.
• Independent & Safe Architecture: Speed Kit operates as a separate layer that does not modify existing systems. It protects origin servers from additional load through intelligent caching and built-in safeguards like rate-limiting and dynamic throttling.
• Automated Predictive Acceleration: By creating a cacheable version of dynamic HTML and using RUM-powered machine learning to predict user behavior, Speed Kit automatically pre-renders subsequent pages to eliminate network and browser time, delivering an instant user experience.

Introduction

A website's performance is fundamentally determined by three sequential bottlenecks: Server Time to process a request, Network Time to transfer data, and Browser Time to render the page. For modern e-commerce shops, these delays create a slow user experience that costs conversions and revenue. Traditional optimization methods eventually hit a performance wall because they cannot effectively cache the dynamic and personalized HTML that is central to the shopping experience.

Speed Kit is an all-in-one solution engineered to break through this wall by strategically eliminating all three bottlenecks. To achieve a truly instant user experience, the approach must shift from passively reacting to user clicks to proactively predicting them. It combines a powerful dynamic caching layer to eliminate Server Time, a global edge network and browser-side Service Worker to eliminate Network Time, and an intelligent Predictive Preloading engine that uses pre-rendering to eliminate Browser Time on subsequent navigations.

This document provides a high-level technical overview for developers, architects, and technical managers, explaining how Speed Kit's core components work in concert. We will explore how each technology targets a specific bottleneck to deliver a seamless and instant user journey.

The Foundation: Dynamic Caching

The biggest performance bottleneck on most e-commerce sites is the HTML document itself. Because it contains personalized data like shopping carts or user-specific recommendations, it cannot be easily cached by traditional CDNs, forcing the server to generate it on every request. Speed Kit's foundational technology is designed to make this "uncacheable" content cacheable, which eliminates this Server Time bottleneck.

Our backend creates a "neutral" or "anonymized" version of the HTML by fetching it from your origin server in a cookie-less context, effectively simulating a brand-new visitor. This process automatically strips or hides personalized information, resulting in a clean, static version of the page that is safe to store in our multi-layered cache architecture (Backend, Edge, Browser).

This cached HTML is the fuel for our acceleration engine. It allows Speed Kit's predictive features to operate without overwhelming your servers, as all preload requests are served from our own highly efficient caches.

To ensure this cached content remains perfectly synchronized, Speed Kit employs a combination of three automated methods. Deployment detection keeps the cache in sync with new codebase releases. Periodic updates handle predictable, site-wide changes like a daily price refresh on a schedule. Finally, crowd-sourced change detection uses real-time user traffic to spot and report individual content discrepancies as they happen.

For a comprehensive explanation of our cache synchronization methods, please see the full documentation: Dynamic Caching & Content Synchronization Explained.

The Orchestrator: The Speed Kit Service Worker

The Speed Kit Service Worker is a small piece of JavaScript that runs directly in the user's browser. It acts as the client-side "brain" that orchestrates performance optimizations by sitting between the browser and the network. It can intercept navigation requests and intelligently decide how to respond in the fastest way possible, primarily targeting Network Time.

When a user navigates to a page, the Service Worker initiates a "race" between a request to the Speed Kit cache for the anonymized HTML and a request to the origin server for the live, personalized version. In the common case, the Speed Kit cache wins, and the fast, anonymous version is displayed instantly. When the response from the origin arrives moments later, the Service Worker seamlessly merges the personalized content into the already-rendered page. This guarantees that Speed Kit never slows down a site; in the worst-case scenario, the user simply sees the original version from the server.

This Service Worker is also responsible for executing the commands from our predictive engine, pre-caching required assets, and consulting a data structure known as a Bloom Filter to ensure that the content served from its local cache is always up-to-date.

The Ultimate Goal: Predictive Preloading for Instant Navigations

While dynamic caching provides a massive speed boost for the initial page load, Predictive Preloading is how Speed Kit eliminates both Network Time and Browser Time for subsequent navigations to deliver a truly instant user experience. The goal is to prepare the next page before the user clicks a link by accomplishing three phases in the background.

1. Prediction

The process starts with a machine learning engine, which is fueled by data from our Real User Monitoring (RUM) solution. By analyzing user navigation patterns, the model can predict the next page a user is likely to visit with an accuracy higher than 85%. This prediction is sent to the Service Worker in the user's browser.

2. Pre-caching

Once a prediction is made, the Service Worker proactively fetches the required anonymized HTML for the predicted page from the Speed Kit cache. This asset is then stored locally in the Service Worker's cache on the user's device, making it instantly available without a network request. This step never adds load to your origin server, as all preload requests for HTML are handled by Speed Kit's infrastructure.

3. Pre-rendering

For the ultimate performance gain, Speed Kit leverages the browser's modern Speculation Rules API. If the pre-caching step was successful, the Service Worker instructs the browser to fully pre-render the predicted page in a hidden background tab. This includes rendering the HTML and fetching necessary sub-resources like CSS and images. When the user clicks the link, the page is already fully rendered in memory and can be swapped into view instantly, resulting in a Largest Contentful Paint (LCP) below 300ms.

While the process seems straightforward, a robust implementation requires solving several significant engineering challenges:

• Protecting the Origin Server: A naive preloading implementation could multiply traffic to an origin server, increasing load and costs significantly. Speed Kit solves this because its preloading is built upon our dynamic caching foundation. All preload requests for HTML are served from our own highly efficient edge infrastructure, ensuring these requests never hit your origin servers and guaranteeing zero additional load.
• Minimizing Bandwidth Consumption: Preloading multiple pages can consume a user's bandwidth, which is a critical concern on mobile networks. To solve this, Speed Kit uses advanced dictionary compression and delta encoding for HTML. This drastically reduces file sizes by 80-90% on top of standard gzip compression, allowing multiple pages to be preloaded using minimal bandwidth.
• Preventing Unwanted Side-Effects: Preloading can inadvertently trigger server-side actions (like altering a user's history) or client-side issues (like firing analytics for unvisited pages), which can corrupt crucial business data. Speed Kit prevents server-side effects because all pre-caching is done in an anonymous context, without user cookies or specific headers. It prevents client-side issues by only executing a page's JavaScript once the user actually navigates to it and it becomes visible.
• Ensuring Fast, Accurate Predictions: For pre-rendering to be effective, the system must predict the user's next navigation with enough "lead time" for the browser to finish rendering the page before the user clicks. Speed Kit solves this by using a sophisticated machine learning architecture trained on extensive Real User Monitoring (RUM) data to make highly accurate predictions early in the user journey. Building such a powerful prediction model is not possible without rich RUM data from billions of user journeys.

For more details on how these challenges are solved, read our full documentation: Predictive Preloads: Achieving Instant E-commerce Navigation.

Adapting to Modern Architectures

Speed Kit is not a one-size-fits-all solution. Its architecture is designed to be flexible, applying tailored optimization strategies based on your website's specific technology stack.

Multi-Page Applications (MPAs)

For traditional server-rendered websites, Speed Kit uses the dynamic caching and content merging process described earlier. Predictive Preloading is applied to make navigations between these pages feel instantaneous.

Single-Page Applications (SPAs)

SPAs present a unique challenge with "soft navigations" that are often slow and invisible to standard tools. Speed Kit addresses this in two primary ways:

• API Call Caching: We cache the API calls that fetch data for subsequent views, serving them instantly from the browser cache.
• Transforming Soft Navigations: For the biggest impact, Speed Kit uses its predictive engine to pre-render the destination page. When the user clicks, we intercept the soft navigation and perform an instant "hard" navigation to the fully rendered page, bypassing the slow client-side rendering process of the SPA framework.

Learn more in our guide: Accelerating Single-Page Applications (SPAs) with Speed Kit.

Client-Side Rendered (CSR) Sites

Websites using CSR send a nearly empty HTML file to the browser, relying on JavaScript to render the page. This leads to very slow initial load times and a poor LCP. Speed Kit solves this by adding a server-side rendering layer. Our backend uses a headless browser to execute the JavaScript and capture a fully-rendered HTML snapshot of the page. This snapshot is what gets cached, preloaded, and pre-rendered, combining the instant load times of a static site with the interactivity of a dynamic application.

Explore the solution in our full documentation: Achieving Instant LCP on Client-Side Rendered Websites with Speed Kit.

Integration and Operation

Speed Kit is designed as a low-risk, independent layer that enhances your existing infrastructure without requiring deep integration.

Technical Setup

The initial integration is a straightforward process guided by our expert team, typically taking less than two hours. It involves three simple steps:

1. Add the Speed Kit JavaScript tag to your site's HTML.
2. Upload the Service Worker file to the root directory of your domain.
3. Whitelist Speed Kit's IP addresses in your firewall to ensure our backend can fetch content.

Low-Risk and Safe by Design

The entire service can be activated or deactivated with a single click in the Speed Kit dashboard, immediately routing all traffic back to your origin server. We have implemented multiple safeguards to protect your origin from being overwhelmed, including configurable rate-limiting and dynamic throttling that automatically "backs off" if your server is under stress. Furthermore, Speed Kit is fully compatible with search engine crawlers like Googlebot, which do not execute Service Workers and will always index the live version of your site directly from your origin, ensuring zero risk to your SEO.

Data Privacy and GDPR Compliance

Speed Kit is engineered from the ground up with a security-first and privacy-by-design philosophy, ensuring full compliance with regulations like GDPR. As a technical solution for delivering website performance and security, its core functions and associated cookies are classified as "technically necessary" under the German TDDDG (§ 25) and GDPR. This means it typically does not require explicit user consent via a cookie banner, simplifying consent management. Our commitment to security is validated through regular external audits, including continuous penetration testing and a review of our Technical and Organizational Measures (TOMs).

For a comprehensive overview of our data processing, sub-processors, and the legal framework, please refer to our full data compliance documentation: Speed Kit and Data Compliance: An Overview of GDPR, Security, and Consent.