Performance Metrics Impact

Speed Kit's Impact on Web Performance Metrics

‍

Key Takeaways

Drastic TTFB Reduction: Speed Kit fundamentally improves Time to First Byte (TTFB) by caching dynamic HTML and serving it from edge nodes, which virtually eliminates Backend Time and Network Time for the main document.
Instant Page Loads: Speed Kit delivers an instant user experience by predictively preloading pages and using the Speculation Rules API to pre-render them, making subsequent navigations seamless.
Core Web Vitals Improvement: These core optimizations directly lead to significant improvements in crucial Google Core Web Vitals, especially Largest Contentful Paint (LCP) and First Contentful Paint (FCP), which are heavily influenced by a fast TTFB.

Introduction

A website's performance is fundamentally determined by three factors: Network Time, Backend Time, and Browser Time. At Speed Kit, our goal is to deliver instant page navigation, creating a user experience where page transitions occur without any perceptible delay. To achieve this, we strategically reduce or eliminate these performance bottlenecks. Speed Kit makes dynamic HTML cacheable, serves content from edge nodes close to the user, and intelligently pre-caches and pre-renders pages the user is most likely to visit next, transforming the user journey.

How Speed Kit Accelerates Core Performance Factors

Speed Kit's Impact on Web Performance Metrics

Backend Time

The Problem: Personalized data and security are non-negotiable in e-commerce. Features like basket state, recommendations, user account information, and CSRF tokens mean that the HTML document is inherently dynamic and cannot be cached by traditional systems. This forces every page request to be processed by the origin server, creating a significant performance bottleneck. Our Solution: Speed Kit addresses this challenge by caching only the static parts of your HTML. We intelligently identify and hide dynamic and personalized content behind loading indicators, creating a "neutral," cacheable version of the page. This static shell can then be delivered instantly from the closest possible location—either the service worker cache in the user's browser or a nearby edge node—effectively eliminating the Backend Time for the critical HTML document.

Network Time

The Problem: Network Time significantly degrades performance due to the required round trips between the browser and server. While Content Delivery Networks (CDNs) effectively cache static assets like JavaScript and CSS, the HTML document itself remains the most critical resource. For dynamic e-commerce sites, caching HTML with a traditional CDN is exceptionally difficult, forcing most requests to travel all the way back to the potentially distant origin server. Our Solution: Speed Kit overcomes this by making your dynamic HTML cacheable, allowing us to serve it from our globally distributed edge nodes. This drastically cuts down the distance data has to travel.

Edge Caching: By serving HTML from an edge server close to the user, we minimize the round-trip time. We proactively pre-warm these edge nodes to ensure a high cache-hit ratio for your most important pages.
Browser Caching: Speed Kit utilizes a service worker to cache HTML locally in the browser's Service Worker Cache. For repeat visits, this can eliminate Network Time entirely for the main document.
Predictive Preloading: Our system goes a step further by using a client-side prediction model to cache anticipated next pages in the service worker before the user even clicks, delivering an instant experience.

Browser Time

The Problem: Page Browser Time has traditionally been the final, most difficult frontier of web performance. However, the introduction of the Speculation Rules API in Chromium-based browsers now allows pages to be fully pre-rendered in a hidden tab before navigation, enabling an instant switch when the user clicks a link. While powerful, harnessing this API independently presents several complex challenges. Our Solution: Speed Kit solves these challenges for you, turning a complex technology into a seamless performance gain.

Accurate Prediction: Speed Kit leverages Real User Monitoring (RUM) data to train an advanced prediction model that runs directly in the browser. This enables highly precise predictions of the user's next navigation.
Early Preloading: Because our prediction model is client-side, it can make decisions instantly. This gives the browser maximum time to finish preloading and prerendering the next page, ensuring users experience the full speed benefit.
Infrastructure Protection: Pre-caching uncacheable HTML directly from your origin can increase server load by up to 10x. Speed Kit protects your infrastructure by serving all pre-loaded HTML from our own edge nodes. Crucially, we do not charge you for pre-cached HTML that isn't ultimately viewed by the user.
Eliminating Side Effects: JavaScript executed during pre-rendering can skew analytics or trigger unintended actions. Speed Kit prevents this by ensuring that JavaScript for a pre-rendered page only executes when it becomes visible to the user.
Bandwidth Efficiency: Speed Kit employs advanced dictionary compression for HTML, making files up to 90% smaller than their gzipped versions. This means we can effectively load ten HTML files for the bandwidth cost of one, saving valuable user data and accelerating load times, especially on mobile networks.

Which Performance Metrics Speed Kit Optimizes

Time To First Byte (TTFB)

While Largest Contentful Paint (LCP) often receives the most attention, its performance is fundamentally built upon the Time To First Byte (TTFB). Think of TTFB as a foundational "fixed cost" included in every page load—it represents the unavoidable delay before the browser can even begin to render the page. It measures the time from the start of a user's request to the moment the first byte of the HTML document is received and consists of:

DNS Lookup Time
TLS Negotiation Time (SSL Handshake)
Network Time (Round Trip Time)
Backend Time (Backend Processing)
Redirect Time Many frontend optimizations focus on what happens after the browser receives the HTML. While valuable, they cannot reduce this initial TTFB delay. No matter how fast your frontend code renders, it can't start work until the server and network deliver the document.

This is where Speed Kit creates a fundamental advantage. By drastically cutting this foundational fixed cost, we enable all other rendering optimizations—both yours and ours—to have a much greater impact. We handle the network and server bottlenecks by reducing Network Time and Backend Time, creating the perfect foundation for your team to build a lightning-fast frontend experience on top.

First Contentful Paint (FCP)

FCP measures the time until the user sees the very first piece of content rendered on the screen. For most websites, FCP is heavily dependent on TTFB—the browser cannot paint anything until it receives the HTML. By aggressively optimizing TTFB, Speed Kit directly contributes to a faster FCP, assuring users that the page is loading correctly.

Largest Contentful Paint (LCP)

LCP is a critical Google Core Web Vital that measures when the largest content element in the viewport becomes visible. It is a primary indicator of perceived loading speed and directly influences search rankings. Like FCP, LCP is fundamentally tied to TTFB. A faster TTFB means the browser can discover and load the page's main content sooner.

For client-side rendered (CSR) pages, a fast TTFB for the initial HTML shell wouldn't necessarily improve FCP and LCP. Speed Kit circumvents this issue by caching a server-side rendered (SSR) version of the HTML. This allows the LCP to fully benefit from the blazing-fast TTFB. During onboarding, our Product Integration Team ensures that Speed Kit's TTFB improvements directly translate to a faster LCP. For more info, please refer to our full documentation on Achieving Instant LCP on Client-Side Rendered Websites with Speed Kit.

Impact on Other Core Web Vitals

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vital that measures the visual stability of a webpage. It quantifies unexpected shifts of visible elements during the page's entire lifecycle. A low CLS score indicates a stable and pleasant user experience without distracting content movement.

While Speed Kit's primary focus is on loading performance, its pre-rendering capability can solve CLS issues that occur during the initial page load by ensuring more elements are ready before the page is displayed. This does not affect CLS that occurs later due to user interaction. To address visual stability comprehensively, the accompanying Real User Monitoring (RUM) solution from Speed Kit provides the necessary tools to help your team identify, debug, and fix all types of CLS problems.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a Core Web Vital that measures a page's overall responsiveness to user interactions. It assesses the latency of all interactions—from a click, tap, or keypress until the next visual update on the screen—to provide a single value representing a page's perceived interactivity.

Speed Kit's impact on INP is usually neutral, as this metric is more closely tied to the complexity of a site's JavaScript and event handling logic. The accompanying Real User Monitoring (RUM) solution from Speed Kit is a powerful tool that enables your developers to identify and fix the root causes of INP problems, ensuring a smooth and responsive user experience.