[{"data":1,"prerenderedAt":2995},["ShallowReactive",2],{"\u002Fdocs\u002Fclient-side-rendering":3,"docs-search-sections":253},{"id":4,"title":5,"body":6,"category":241,"description":242,"draft":243,"extension":244,"meta":245,"navigation":246,"order":247,"path":248,"seo":249,"stem":251,"__hash__":252},"docs\u002Fdocs\u002Fclient-side-rendering.md","Client-Side Rendering",{"type":7,"value":8,"toc":229},"minimark",[9,14,19,42,46,50,53,60,64,67,72,75,78,82,85,111,114,118,121,125,128,132,135,139,142,146,149,175,179,182,202,205,209,215],[10,11,13],"h2",{"id":12},"achieving-instant-lcp-on-client-side-rendered-websites-with-speed-kit","Achieving Instant LCP on Client-Side Rendered Websites with Speed Kit",[15,16,18],"h3",{"id":17},"key-takeaways","Key Takeaways",[20,21,22,30,36],"ul",{},[23,24,25,29],"li",{},[26,27,28],"strong",{},"Server-Side Rendering Layer",": Speed Kit uses a Chromium-based rendering layer to create a fully rendered HTML snapshot of a client-side rendered page, which can then be cached.",[23,31,32,35],{},[26,33,34],{},"Intelligent Caching",": By executing JavaScript and fetching necessary resources on the server, Speed Kit ensures that the cached version is a complete and accurate representation of the page.",[23,37,38,41],{},[26,39,40],{},"Seamless User Experience",": Users receive an instant, fully-rendered page from the cache while the original interactive application rehydrates in the background, ensuring a fast initial load without sacrificing dynamic functionality.",[15,43,45],{"id":44},"introduction","Introduction",[47,48,49],"p",{},"Client-Side Rendering (CSR) is a popular approach for building modern, interactive web applications. In a CSR model, the browser receives a minimal HTML document and then uses JavaScript to render the page content, which often involves fetching additional data. While this can create a fluid, app-like user experience, it often comes at a cost: initial load times can be slow, as the browser must download, parse, and execute JavaScript before the user sees any meaningful content. For e-commerce sites, this delay can lead to lost conversions and revenue.",[47,51,52],{},"Speed Kit addresses this challenge by introducing a server-side rendering layer that makes client-side rendered pages cacheable. By pre-rendering the page on the server, Speed Kit can deliver a fully formed HTML document to the user's browser, dramatically reducing the Time to First Byte (TTFB) and ensuring that users see content almost instantly. This document explains the architecture and processes that allow Speed Kit to accelerate even the most dynamic client-side rendered e-commerce shops.",[47,54,55],{},[56,57],"img",{"alt":58,"src":59},"Client Side Rendering vs. Server Side Rendering","\u002Fimages\u002Fdocs\u002Fclient-side-rendering\u002F01.webp",[15,61,63],{"id":62},"client-side-rendering-csr","Client-Side Rendering (CSR)",[47,65,66],{},"In a typical Client-Side Rendering (CSR) setup, the server sends a minimal HTML file to the browser. Crucially, this file doesn't contain the rendered HTML that allows the browser to display anything meaningful. Instead, it contains links to the necessary JavaScript files. The browser must then download and execute this JavaScript to generate the final page content, which may involve using data already embedded in the HTML or fetching it from an API. While the goal of offloading rendering to the client is a rich, app-like user experience, this approach introduces significant performance and reliability issues.",[68,69,71],"h4",{"id":70},"performance-and-user-experience","Performance and User Experience",[47,73,74],{},"This approach presents significant performance challenges and is inherently less resilient than server-side rendering (SSR). The user often sees a blank screen or a loading animation until the browser downloads, parses, and executes large JavaScript bundles, leading to a poor Largest Contentful Paint (LCP). Unlike with SSR, the rendering environment is entirely out of the development team's control; it depends on the user's device, browser, and even battery status, making it difficult to test and predict the actual user experience. On less powerful mobile devices, this client-side processing can be slow, and other JavaScript tasks can block the main thread, further delaying rendering. This heavy reliance on client-side execution also means that CSR is vulnerable to JavaScript errors, which can prevent the page from displaying correctly or at all.",[47,76,77],{},"This delay is compounded by how browsers handle different resources. While traditional HTML can be streamed, parsed, and even begin to be rendered and painted as it downloads—allowing the browser's preload scanner to discover and fetch critical sub-resources like Javascript, CSS and images early—this mechanism is ineffective with CSR. The initial HTML contains no meaningful content, so the browser must wait for JavaScript to execute before it can discover the actual content of the page, creating a significant bottleneck.",[68,79,81],{"id":80},"the-seo-challenges-of-client-side-rendering","The SEO Challenges of Client-Side Rendering",[47,83,84],{},"Client-Side Rendering (CSR) creates significant technical hurdles for search engine crawlers, which can directly impact search rankings and visibility. The primary challenges stem from how content is delivered and rendered.",[20,86,87,93,99,105],{},[23,88,89,92],{},[26,90,91],{},"Empty Initial HTML:"," The server first delivers an HTML file that is essentially an empty shell. It lacks any meaningful, indexable content and instead contains links to JavaScript files that must be executed to build the page.",[23,94,95,98],{},[26,96,97],{},"Intensive Crawler Rendering:"," This forces search engines like Googlebot into a resource-intensive, two-step process. The crawler cannot simply index the HTML; it must download, parse, and execute the JavaScript to see the final content. This requires significant computational resources from the crawler.",[23,100,101,104],{},[26,102,103],{},"Crawl Budget Depletion:"," Every website is allocated a finite \"crawl budget\" by search engines. The resource-intensive nature of rendering JavaScript can quickly exhaust this budget, especially for large e-commerce sites. As a result, crawlers may not have the capacity to discover and index all pages on the site.",[23,106,107,110],{},[26,108,109],{},"Risk of Rendering Errors:"," The entire indexing process hinges on the flawless execution of JavaScript. If there are any code errors or incompatibilities with the crawler's rendering engine, the content may fail to appear, leaving the page effectively blank and invisible to the search engine.",[47,112,113],{},"These issues stand in stark contrast to server-rendered pages, where crawlers receive a complete and immediately indexable HTML document, ensuring a much more efficient and reliable indexing process.",[15,115,117],{"id":116},"server-side-rendering-ssr","Server-Side Rendering (SSR)",[47,119,120],{},"With Server-Side Rendering, the server generates the full HTML for a page in response to a user's request. The browser receives a complete HTML document and can start rendering it immediately.",[68,122,124],{"id":123},"performance-characteristics","Performance Characteristics",[47,126,127],{},"The primary characteristic of SSR is its positive impact on the initial page load. Because the browser receives a content-rich HTML document, it can start displaying pixels immediately, resulting in an excellent LCP. This method is also highly effective for SEO as crawlers can easily index the content. The trade-off is a potentially higher Time to First Byte (TTFB) and increased server load. However, this server-centric approach gives the development team full control over the rendering environment; if performance issues arise, they can be addressed by scaling the server infrastructure.",[68,129,131],{"id":130},"navigational-experience","Navigational Experience",[47,133,134],{},"While the initial load is fast, subsequent page navigations in a traditional SSR setup require a full page reload. This can feel slower than the instant transitions of an SPA, but modern browser features like the Speculation Rules API can mitigate this by pre-rendering pages to make navigations feel instant.",[15,136,138],{"id":137},"how-speed-kit-accelerates-client-side-rendered-pages","How Speed Kit Accelerates Client-Side Rendered Pages",[47,140,141],{},"Speed Kit combines the best of both worlds by adding a server-side rendering layer to your client-side rendered website. This allows us to cache the fully rendered HTML, even if your origin server only provides a minimal HTML shell.",[68,143,145],{"id":144},"backend-pre-rendering-process","Backend Pre-Rendering Process",[47,147,148],{},"Our backend system utilizes a headless browser to perform the rendering process on the server side, just as a client's browser would.",[20,150,151,157,163],{},[23,152,153,156],{},[26,154,155],{},"Execution",": The headless browser loads your page and executes all necessary JavaScript to fetch data and build the Document Object Model (DOM).",[23,158,159,162],{},[26,160,161],{},"Snapshot",": We intelligently wait until the page is fully constructed, using configurable \"guards\" (specific page elements) to determine when rendering is complete, and then take a snapshot of the fully-rendered HTML.",[23,164,165,168,169,174],{},[26,166,167],{},"Caching",": This HTML snapshot is captured and stored in Speed Kit's multi-layered cache. Read our ",[170,171,173],"a",{"href":172},"\u002Fdocs\u002Fdynamic-caching","Dynamic Caching"," documentation for more information.",[68,176,178],{"id":177},"instant-previews-with-the-shadow-dom","Instant Previews with the Shadow DOM",[47,180,181],{},"When a user visits a page, the cached HTML snapshot is delivered instantly and displayed within a Shadow DOM, a browser feature that isolates this content from the main page.",[20,183,184,190,196],{},[23,185,186,189],{},[26,187,188],{},"Immediate Display",": Displaying the cached HTML within a Shadow DOM dramatically improves the Largest Contentful Paint (LCP) because the user sees a complete page immediately.",[23,191,192,195],{},[26,193,194],{},"Seamless Hydration:"," While the user views this static preview, your JavaScript application loads in the background to become interactive, a process known as \"hydration.\"",[23,197,198,201],{},[26,199,200],{},"Live Transition:"," Speed Kit uses the same configurable 'guards' to detect when the JavaScript application is fully hydrated. At that moment, the Shadow DOM is seamlessly removed, transitioning the user to the live application. This transition time is closely monitored to ensure a high-quality user experience.",[47,203,204],{},"This approach combines the instant load times of a static site with the rich interactivity of a modern frontend application while guaranteeing that the user always sees the correct, up-to-date content from your origin at the end of the interaction.",[68,206,208],{"id":207},"change-detection-for-csr-pages","Change Detection for CSR Pages",[47,210,211,212,214],{},"Speed Kit’s crowd-sourced change detection works seamlessly with client-side rendered pages. The core principle remains the same: using real-time user traffic to identify stale content. For a detailed explanation of the underlying mechanisms, please see the ",[170,213,173],{"href":172}," documentation.",[20,216,217,223],{},[23,218,219,222],{},[26,220,221],{},"Content Comparison:"," After the live application has fully hydrated, our script compares key elements of the content rendered by the frontend application against the static HTML that was initially served from the cache.",[23,224,225,228],{},[26,226,227],{},"Triggering Updates",": If a discrepancy is found (e.g., a price or stock level has changed), the browser sends a signal to our backend. This triggers an immediate revalidation and refresh of that page across our entire infrastructure, ensuring all subsequent visitors receive the fresh version.",{"title":230,"searchDepth":231,"depth":231,"links":232},"",2,[233],{"id":12,"depth":231,"text":13,"children":234},[235,237,238,239,240],{"id":17,"depth":236,"text":18},3,{"id":44,"depth":236,"text":45},{"id":62,"depth":236,"text":63},{"id":116,"depth":236,"text":117},{"id":137,"depth":236,"text":138},"Platform & Compatibility","How Speed Kit adds a server-side rendering layer to make client-side rendered pages cacheable, delivering instant LCP without sacrificing interactivity.",false,"md",{},true,31,"\u002Fdocs\u002Fclient-side-rendering",{"title":250,"description":242},"Client-Side Rendering | Speed Kit Docs","docs\u002Fclient-side-rendering","3TSe-wJi7-eyhIutJAf0GuTR550CTEb7bq-C9zb4fD0",[254,260,264,268,272,277,283,289,294,300,305,310,315,319,324,329,334,339,344,349,354,359,364,369,374,378,382,387,392,396,401,406,410,415,420,425,429,434,439,444,449,454,458,463,468,473,477,481,485,490,495,500,505,510,515,520,525,530,535,539,543,547,552,557,562,567,571,576,581,586,591,596,601,606,611,616,621,626,631,636,641,645,650,655,660,665,670,675,677,680,684,688,691,695,699,702,705,708,711,715,719,723,728,732,736,740,745,750,755,760,765,770,775,780,785,790,795,800,805,810,815,819,824,828,833,837,842,846,850,855,860,865,869,873,877,882,887,892,897,902,907,912,917,922,926,930,934,939,944,949,954,959,964,969,974,979,984,989,994,999,1004,1009,1014,1019,1024,1029,1034,1039,1044,1049,1054,1059,1063,1067,1071,1076,1081,1086,1091,1096,1101,1106,1111,1115,1120,1125,1130,1135,1140,1144,1149,1153,1158,1163,1168,1173,1178,1183,1188,1193,1198,1203,1208,1212,1217,1222,1227,1232,1237,1242,1247,1252,1257,1260,1264,1268,1272,1277,1282,1287,1292,1297,1302,1307,1312,1317,1322,1327,1332,1337,1342,1347,1352,1357,1362,1367,1372,1377,1382,1387,1392,1397,1402,1407,1412,1417,1421,1426,1431,1436,1441,1446,1451,1456,1461,1466,1471,1475,1480,1485,1490,1495,1499,1503,1507,1512,1517,1522,1527,1532,1537,1542,1547,1552,1557,1562,1567,1572,1577,1581,1584,1588,1592,1597,1602,1607,1612,1617,1622,1627,1632,1637,1642,1647,1652,1657,1662,1667,1671,1675,1679,1684,1689,1693,1698,1703,1708,1713,1718,1723,1728,1733,1738,1743,1747,1751,1755,1760,1765,1770,1775,1780,1784,1789,1794,1799,1804,1809,1814,1819,1824,1829,1833,1838,1843,1848,1853,1858,1863,1867,1872,1876,1881,1886,1891,1896,1901,1906,1911,1916,1920,1924,1928,1933,1938,1943,1948,1953,1958,1963,1968,1973,1978,1983,1988,1993,1998,2003,2008,2012,2016,2021,2026,2031,2036,2041,2046,2051,2056,2061,2066,2071,2076,2081,2086,2091,2096,2101,2106,2111,2116,2121,2126,2131,2136,2141,2146,2151,2156,2159,2164,2169,2174,2179,2184,2189,2194,2199,2204,2209,2213,2218,2223,2227,2231,2236,2241,2246,2251,2256,2261,2266,2271,2276,2281,2286,2291,2296,2301,2306,2311,2316,2320,2324,2328,2333,2338,2343,2348,2353,2358,2363,2368,2373,2378,2383,2388,2392,2396,2401,2406,2411,2416,2421,2426,2431,2436,2441,2446,2450,2454,2458,2463,2468,2473,2478,2483,2488,2493,2498,2503,2508,2512,2516,2520,2524,2529,2534,2539,2543,2547,2551,2555,2559,2563,2567,2572,2576,2581,2586,2591,2595,2599,2603,2608,2613,2618,2623,2628,2633,2638,2643,2647,2652,2657,2662,2666,2670,2674,2679,2684,2689,2694,2699,2704,2709,2714,2719,2724,2729,2734,2739,2744,2749,2754,2759,2764,2769,2774,2779,2784,2789,2794,2799,2804,2809,2814,2819,2824,2829,2834,2839,2843,2848,2851,2855,2859,2863,2867,2872,2877,2882,2886,2890,2894,2898,2903,2908,2913,2918,2923,2928,2933,2938,2943,2948,2952,2956,2960,2965,2970,2975,2980,2985,2990],{"id":255,"title":256,"titles":257,"content":258,"level":259},"\u002Fdocs\u002Fab-testing","A\u002FB Testing",[],"How Speed Kit resolves the conflict between A\u002FB testing and web performance through flicker-free integrations, caching strategies, and best practices.",1,{"id":261,"title":262,"titles":263,"content":230,"level":231},"\u002Fdocs\u002Fab-testing#high-performance-ab-testing-with-speed-kit","High-Performance A\u002FB Testing With Speed Kit",[256],{"id":265,"title":18,"titles":266,"content":267,"level":236},"\u002Fdocs\u002Fab-testing#key-takeaways",[256,262],"The Performance Conflict: Client-side A\u002FB testing tools, while essential for optimization, often hide the entire page body for several seconds to prevent content \"flicker,\" a practice that severely damages Core Web Vitals (CWV).The Speed Kit Solution: Speed Kit mitigates these negative effects by fundamentally accelerating the underlying website and supporting several popular A\u002FB testing tools with out-of-the-box integrations.Actionable Best Practices: To maintain optimal performance, customers should adopt a strategic approach, including limiting concurrent tests, avoiding modifications to the Largest Contentful Paint (LCP) element, and regularly auditing and removing unused testing scripts.",{"id":269,"title":45,"titles":270,"content":271,"level":236},"\u002Fdocs\u002Fab-testing#introduction",[256,262],"A\u002FB testing is a critical practice for any e-commerce business aiming to optimize user experience and increase conversion rates. However, there is a fundamental conflict between the goals of A\u002FB testing and web performance. The most common client-side testing tools work by loading JavaScript that dynamically alters a page in the user's browser, which can introduce significant delays, visual instability, and a poor user experience. This often leads to a dilemma for businesses: sacrifice site speed for conversion rate optimization, or sacrifice optimization for a better performance score. Speed Kit is designed to resolve this conflict. By combining our core acceleration technology with intelligent integrations and clear best practices, we enable you to run effective A\u002FB tests without compromising the speed and responsiveness of your website. This document outlines the common performance challenges posed by A\u002FB testing tools and explains how Speed Kit provides a comprehensive solution.",{"id":273,"title":274,"titles":275,"content":276,"level":236},"\u002Fdocs\u002Fab-testing#client-side-vs-server-side-ab-testing","Client-Side vs. Server-Side A\u002FB Testing",[256,262],"Understanding why A\u002FB testing tools can harm performance is the first step toward solving the problem. The impact varies depending on the implementation method. Client-side testing is the more common approach due to its implementation flexibility, but it is also the primary source of performance issues. Server-side testing, on the other hand, offers significant performance advantages but introduces unique complexities, particularly when used with an advanced caching system like Speed Kit.",{"id":278,"title":279,"titles":280,"content":281,"level":282},"\u002Fdocs\u002Fab-testing#client-side-ab-testing","Client-Side A\u002FB Testing",[256,262,274],"In client-side A\u002FB testing, a standard HTML page is sent to every user, and a JavaScript snippet from the testing tool runs in the browser to dynamically make changes.",4,{"id":284,"title":285,"titles":286,"content":287,"level":288},"\u002Fdocs\u002Fab-testing#pros","Pros",[256,262,274,279],"Ease of Use: Campaigns can often be set up and managed through a user-friendly interface without requiring backend developer support.Flexibility: It's easy to test changes on almost any element of an existing page.Speed of Deployment: New tests can typically be launched very quickly.",5,{"id":290,"title":291,"titles":292,"content":293,"level":288},"\u002Fdocs\u002Fab-testing#common-performance-pitfalls","Common Performance Pitfalls",[256,262,274,279],"Client-side A\u002FB testing tools introduce several performance bottlenecks that directly impact Core Web Vitals and the overall user experience.",{"id":295,"title":296,"titles":297,"content":298,"level":299},"\u002Fdocs\u002Fab-testing#the-flicker-effect-and-anti-flicker-scripts","The \"Flicker\" Effect and Anti-Flicker Scripts",[256,262,274,279,291],"Because the A\u002FB testing script modifies the page after it has started to load, users often see the original page for a moment before it changes to the test variation. This is known as the \"flicker\" effect or Flash of Original Content (FOOC), which creates a jarring user experience. To prevent this, A\u002FB testing tools employ an \"anti-flicker\" script. This script's sole purpose is to hide the entire page (or parts of it) until the variation is ready to be displayed. Often, these scripts have a default timeout of 3-4 seconds. If the A\u002FB test script fails or is slow to load, the user is left staring at a blank page. This practice is devastating for the Largest Contentful Paint (LCP), making a good user experience nearly impossible to achieve.",6,{"id":301,"title":302,"titles":303,"content":304,"level":299},"\u002Fdocs\u002Fab-testing#javascript-payload-and-execution-time","JavaScript Payload and Execution Time",[256,262,274,279,291],"A\u002FB testing tools rely on JavaScript, which adds to the page's weight and complexity. Payload Size: The testing script itself, along with the logic for all active experiments and variations, increases the amount of data the user must download. The more tests you run, the larger this payload becomes.Request Cascades: A\u002FB testing is rarely a single request. Typically, an initial script loads the experiment configuration, which then triggers more requests to fetch variation-specific logic or assets. This chain of network requests adds latency.Main-Thread Blocking: Once downloaded, this JavaScript must be executed on the browser's main thread. This can block other critical tasks, such as rendering the page or responding to user input, leading to a poor Interaction to Next Paint (INP).",{"id":306,"title":307,"titles":308,"content":309,"level":288},"\u002Fdocs\u002Fab-testing#how-speed-kit-optimizes-client-side-tests","How Speed Kit Optimizes Client-Side Tests",[256,262,274,279],"Speed Kit's approach is twofold: we make your site so fast that the overhead of A\u002FB testing is minimized, and we provide intelligent integrations that directly target the worst performance offenders. Through our integrations with supported A\u002FB testing frameworks, Speed Kit fundamentally changes when client-side tests are applied. Our dynamic fetcher can apply the test variations directly to the cached version of a page before it is even rendered. This means the browser receives the correct test variation from the very first moment, completely eliminating the cause of the \"flicker\" effect. Because the flicker is prevented at its source, the harmful anti-flicker scripts become unnecessary. In most integrations, these scripts can be omitted entirely. This directly solves the devastating LCP problem caused by a hidden page and delivers a significantly better user experience. For supported platforms detailed later in this document, we provide specific integration patterns to ensure tests work correctly. We are also continuously expanding our support for third-party tools. While we do not currently have out-of-the-box integrations for every platform, our team is committed to finding solutions. If a significant number of our customers use a specific system, we are open to developing a custom integration for optimal performance.",{"id":311,"title":312,"titles":313,"content":314,"level":282},"\u002Fdocs\u002Fab-testing#server-side-ab-testing","Server-Side A\u002FB Testing",[256,262,274],"In a server-side setup, the origin server decides which variation a user should see and delivers the final HTML directly to the browser.",{"id":316,"title":285,"titles":317,"content":318,"level":288},"\u002Fdocs\u002Fab-testing#pros-1",[256,262,274,312],"Superior Performance: With no extra client-side JavaScript for rendering variations, this method is significantly faster and better for Core Web Vitals.No \"Flicker\" Effect: The user receives the final test variation from the start, ensuring a stable and seamless experience.Reliability: The test is not dependent on the user's browser or device performance.",{"id":320,"title":321,"titles":322,"content":323,"level":288},"\u002Fdocs\u002Fab-testing#cons","Cons",[256,262,274,312],"Implementation Complexity: Requires backend developer resources to implement and manage tests.Slower Deployment: The process of setting up a new test is typically more involved and time-consuming.Potential for Slower TTFB: Because the server must often communicate with an A\u002FB testing service before rendering the page, this can add processing and network latency, increasing the Time To First Byte (TTFB).Caching Complications: Poses a direct challenge to caching systems, including backend, network, and client caches.",{"id":325,"title":326,"titles":327,"content":328,"level":288},"\u002Fdocs\u002Fab-testing#how-speed-kit-manages-server-side-tests","How Speed Kit Manages Server-Side Tests",[256,262,274,312],"The core challenge for Speed Kit is cache contamination. A server-side test produces multiple HTML versions for the same URL, which conflicts with a cache's goal to store and serve a single version. If Speed Kit were to cache one variation, it would incorrectly serve it to all users, breaking the test. Speed Kit supports two effective strategies to handle this, allowing you to choose between simplicity and maximum performance.",{"id":330,"title":331,"titles":332,"content":333,"level":299},"\u002Fdocs\u002Fab-testing#option-1-strategic-blacklisting-simple-method","Option 1: Strategic Blacklisting (Simple Method)",[256,262,274,312,326],"The most straightforward solution is to add the URLs of pages with active server-side tests to the blacklist in the Speed Kit Dashboard. When a page is blacklisted, Speed Kit bypasses HTML caching for that URL, ensuring users always receive the correct test variation directly from your origin server. While this means the page's HTML is not served instantly from our cache, Speed Kit continues to accelerate all other resources on the page, such as images, CSS, and JavaScript. This creates a reliable testing environment with minimal setup. Once the test concludes, you simply remove the page from the blacklist to restore full, instant-loading HTML caching.",{"id":335,"title":336,"titles":337,"content":338,"level":299},"\u002Fdocs\u002Fab-testing#option-2-pre-rendering-all-variations-advanced-method","Option 2: Pre-Rendering All Variations (Advanced Method)",[256,262,274,312,326],"A more advanced solution that preserves full caching benefits is to have your backend render all test variations directly into the base HTML of the page. A small, lightweight inline script then runs on the client-side to select and display the correct variation for a specific user, hiding the others. Benefits: The major advantage of this approach is that the HTML document is identical for all users, making it fully cacheable by Speed Kit. This allows you to run server-controlled tests while still achieving an instant Time To First Byte (TTFB) and the maximum performance uplift.Considerations: This advanced method requires custom implementation and must be coordinated with our Product Integration Team. The initial HTML payload will be larger, as it contains the markup for all variations. Cumulative Layout Shift (CLS) is generally not an issue, as a small inline script ensures only the relevant test variation is displayed from the start.",{"id":340,"title":341,"titles":342,"content":343,"level":236},"\u002Fdocs\u002Fab-testing#supported-ab-testing-tool-integrations","Supported A\u002FB Testing Tool Integrations",[256,262],"Speed Kit provides seamless, out-of-the-box support for several popular A\u002FB testing platforms. These integrations are designed to ensure the testing scripts work in harmony with Speed Kit's acceleration technologies.",{"id":345,"title":346,"titles":347,"content":348,"level":282},"\u002Fdocs\u002Fab-testing#the-core-challenge-and-speed-kits-solution","The Core Challenge and Speed Kit's Solution",[256,262,341],"The primary challenge is timing. A\u002FB testing tools typically apply changes after the page has fully loaded, causing a jarring \"flicker.\" Our tool integrations solve this by synchronizing the test logic. The test is applied first to the cached version of the page for an instant display, and then again to the live content from the origin before it gets merged. This ensures the user sees the correct test variation from the beginning.",{"id":350,"title":351,"titles":352,"content":353,"level":288},"\u002Fdocs\u002Fab-testing#important-considerations-for-flicker-free-testing","Important Considerations for Flicker-Free Testing",[256,262,341,346],"This advanced, flicker-free approach has specific requirements for tests that are deployed during the initial page rendering: Direct Integration Required: The A\u002FB testing script must be integrated directly into the page's HTML, not loaded asynchronously via a tag manager.JavaScript Dependencies: The approach may not work if the test code has dependencies on your site's main JavaScript files, as those scripts may not be available when the test is applied to the cached version.Avoid Startup Animations: Avoid using startup animations like fade-ins on tested elements. Because the test code is applied twice, these animations can re-run after the final content merge, creating an unwanted visual effect.Risk of Skewed Analytics: If your test variation includes custom tracking code (e.g., analytics beacons), be aware that this code may be executed twice. This double execution can lead to inflated tracking data, potentially skewing the results of your experiment. These limitations do not apply to tests that are triggered by user interaction (e.g., a click) or are activated after the page has fully loaded. Similarly, tests running on pages that are not accelerated by Speed Kit (e.g., a checkout funnel) are not impacted. For tests that have dependencies on your site's scripts, you can trigger your test code on the DOMContentLoaded event. At this point, all necessary scripts are typically available, and this timing does not interfere with Speed Kit's merge logic. Due to these considerations and potential tool-specific limitations, the flicker-free testing approach is not active by default and requires communication with our Product Integration Team to ensure a correct setup.",{"id":355,"title":356,"titles":357,"content":358,"level":282},"\u002Fdocs\u002Fab-testing#dynamic-yield","Dynamic Yield",[256,262,341],"Dynamic Yield is a comprehensive personalization platform that helps businesses deliver individualized customer experiences. It offers a full suite of tools, including both client-side and server-side A\u002FB testing, product recommendations, and targeted messaging. For more information, visit the Dynamic Yield website.",{"id":360,"title":361,"titles":362,"content":363,"level":288},"\u002Fdocs\u002Fab-testing#using-the-graphical-editor-recommended","Using the Graphical Editor (Recommended)",[256,262,341,356],"Tests created using Dynamic Yield's graphical editor will work out-of-the-box with Speed Kit. The editor is designed to create stable tests that are fully compatible with our dynamic content merging.",{"id":365,"title":366,"titles":367,"content":368,"level":288},"\u002Fdocs\u002Fab-testing#using-custom-javascript","Using Custom JavaScript",[256,262,341,356],"While it is possible to use custom JavaScript to run tests, this approach requires careful implementation to avoid issues. If you use custom code, be aware that the general limitations described in the \"Important Considerations for Flicker-Free Testing\" section apply. To ensure compatibility with Speed Kit’s rendering process, avoid using campaign conditions that rely on specific browser lifecycle events or polling mechanisms. onDOMContentLoaded\u002FDOMContentLoaded: These event-based triggers are incompatible because Speed Kit applies tests before the standard DOMContentLoaded event fires.waitForElementAsync: This method, which polls for an element to appear, can lead to unpredictable behavior due to the dynamic content merging process.",{"id":370,"title":371,"titles":372,"content":373,"level":282},"\u002Fdocs\u002Fab-testing#kameleoon","Kameleoon",[256,262,341],"Kameleoon is a comprehensive experimentation and personalization platform that offers a wide range of features, including A\u002FB testing, feature flagging, and AI-driven personalization. It supports both client-side and server-side implementations, giving teams flexibility in how they run their tests. For more information, visit the Kameleoon website.",{"id":375,"title":361,"titles":376,"content":377,"level":288},"\u002Fdocs\u002Fab-testing#using-the-graphical-editor-recommended-1",[256,262,341,371],"Tests created using Kameleoon's graphical editor will work out-of-the-box with Speed Kit. The editor is designed to create stable tests that are fully compatible with our dynamic content merging.",{"id":379,"title":366,"titles":380,"content":381,"level":288},"\u002Fdocs\u002Fab-testing#using-custom-javascript-1",[256,262,341,371],"If you use custom JavaScript code for your tests, we recommend following Kameleoon's best practices, such as using their asynchronous activation methods like runWhenElementPresent and runWhenConditionTrue.",{"id":383,"title":384,"titles":385,"content":386,"level":288},"\u002Fdocs\u002Fab-testing#unsupported-methods","Unsupported Methods",[256,262,341,371],"Implementation methods that are not recommended by Kameleoon, such as using interval polling or MutationObserver, are only partially supported by Speed Kit. Complex, nested activation logic can also cause issues. Specifically, avoid: Nesting Activation Methods: Using runWhenConditionTrue within runWhenElementPresent creates complex timing dependencies that may not resolve correctly during Speed Kit's two-step application process.Polling with setInterval: Using setInterval within runWhenElementPresent or other activation methods is a form of polling that can interfere with the content merge and is not a recommended practice.",{"id":388,"title":389,"titles":390,"content":391,"level":282},"\u002Fdocs\u002Fab-testing#vwo-visual-website-optimizer","VWO (Visual Website Optimizer)",[256,262,341],"VWO (Visual Website Optimizer) is a leading A\u002FB testing and conversion rate optimization platform used by businesses worldwide. While best known for its user-friendly visual editor for client-side testing, VWO also provides robust capabilities for server-side testing, making it a versatile solution for any optimization strategy. For more information, visit the VWO website. The following options detail how to configure VWO's client-side campaigns to work flawlessly with Speed Kit.",{"id":393,"title":394,"titles":395,"content":230,"level":288},"\u002Fdocs\u002Fab-testing#compatible-by-default","Compatible by Default",[256,262,341,389],{"id":397,"title":398,"titles":399,"content":400,"level":299},"\u002Fdocs\u002Fab-testing#variations-only-using-visual-editor-blocks","Variations only using Visual Editor Blocks",[256,262,341,389,394],"If a test variation is created via the visual editor and contains no added code blocks, it is automatically compatible with Speed Kit. No changes are required. Please note: if you use custom code in a variation created via the visual editor, you must use an additional code block and follow the guidance below.",{"id":402,"title":403,"titles":404,"content":405,"level":299},"\u002Fdocs\u002Fab-testing#variations-only-using-css-in-code-blocks","Variations only using CSS in code blocks",[256,262,341,389,394],"If a test variation only adds custom CSS to the page but does not change DOM nodes, it is automatically compatible with Speed Kit. No changes are required. These kinds of tests are ideal because they prevent flickering very well.",{"id":407,"title":408,"titles":409,"content":230,"level":288},"\u002Fdocs\u002Fab-testing#compatible-with-specific-settings","Compatible with Specific Settings",[256,262,341,389],{"id":411,"title":412,"titles":413,"content":414,"level":299},"\u002Fdocs\u002Fab-testing#variations-changing-dom-nodes-above-the-fold","Variations changing DOM nodes above the fold",[256,262,341,389,408],"If a test variation uses code blocks with custom JavaScript to change DOM nodes \"above the fold\" (in the initial viewport), these settings will ensure compatibility with Speed Kit: Use “Element loaded” as the trigger for the code block and use a selector for the element you want to change.Check the “Keep applying changes” checkbox. Note that this can result in the JS code being executed multiple times. These settings are a good practice in general as they help prevent flicker, even without Speed Kit.",{"id":416,"title":417,"titles":418,"content":419,"level":299},"\u002Fdocs\u002Fab-testing#variations-changing-dom-nodes-below-the-fold","Variations changing DOM nodes below the fold",[256,262,341,389,408],"If a test variation uses code blocks with custom JavaScript to change DOM nodes \"below the fold\" (only visible after scrolling or interaction), the settings are even simpler. Just use “DOM ready” as the trigger for the code block. This will make sure the variation is applied after Speed Kit has finished its execution. For below-the-fold content, there is no risk of flicker, which makes this option safe and simple. The same can be used if the changes target a popup or any other content that is not visible immediately after rendering the page.",{"id":421,"title":422,"titles":423,"content":424,"level":236},"\u002Fdocs\u002Fab-testing#best-practices-for-high-performance-ab-testing","Best Practices for High-Performance A\u002FB Testing",[256,262],"Beyond Speed Kit's automated solutions, how you plan and execute your A\u002FB tests has a major impact on performance. We recommend the following best practices to all customers.",{"id":426,"title":427,"titles":428,"content":230,"level":282},"\u002Fdocs\u002Fab-testing#strategic-test-management","Strategic Test Management",[256,262,422],{"id":430,"title":431,"titles":432,"content":433,"level":288},"\u002Fdocs\u002Fab-testing#acknowledge-the-strategic-trade-off","Acknowledge the Strategic Trade-Off",[256,262,422,427],"Every A\u002FB test represents a trade-off. It introduces a performance cost that can negatively impact user experience and conversions, which must be weighed against the potential conversion lift from a successful experiment. It is critical to recognize that running a test is not free; it comes with a real performance cost. Therefore, every test should be a deliberate business decision.",{"id":435,"title":436,"titles":437,"content":438,"level":288},"\u002Fdocs\u002Fab-testing#focus-on-high-impact-opportunities","Focus on High-Impact Opportunities",[256,262,422,427],"To maximize your return on this \"performance investment,\" use your analytics data to identify the biggest drop-off points in your customer funnel. Concentrate your testing efforts on these high-impact areas where improvements can lead to the most significant business gains. Before launching a test, critically evaluate its potential. You can even discuss your hypothesis with an AI model to gauge the potential uplift. If the projected gain is not substantial, the performance cost of running the test may outweigh the potential benefits.",{"id":440,"title":441,"titles":442,"content":443,"level":288},"\u002Fdocs\u002Fab-testing#consider-traffic-and-test-duration","Consider Traffic and Test Duration",[256,262,422,427],"Be cautious when planning tests for pages with low traffic. To achieve a statistically significant result, a test on a low-traffic page may need to run for weeks or even months. This means accepting a performance degradation for a prolonged period for a potentially minor uplift. Prioritize tests on pages where you can get clear results quickly.",{"id":445,"title":446,"titles":447,"content":448,"level":288},"\u002Fdocs\u002Fab-testing#limit-concurrent-tests","Limit Concurrent Tests",[256,262,422,427],"Avoid running too many experiments at once. Beyond the performance impact of increased JavaScript payload and complexity, running multiple tests on the same page can make it difficult to get a clear result. The tests can influence each other, which skews the data and makes it hard to isolate the true impact of any single change. Prioritize your tests based on potential impact and run fewer, more meaningful experiments.",{"id":450,"title":451,"titles":452,"content":453,"level":288},"\u002Fdocs\u002Fab-testing#conduct-quarterly-audits","Conduct Quarterly Audits",[256,262,422,427],"Schedule a regular review (e.g., quarterly) of all third-party scripts, including A\u002FB testing tools. Remove any tools or scripts that are no longer in use to prevent performance degradation from \"ghost scripts.\"",{"id":455,"title":456,"titles":457,"content":230,"level":282},"\u002Fdocs\u002Fab-testing#performance-aware-test-design","Performance-Aware Test Design",[256,262,422],{"id":459,"title":460,"titles":461,"content":462,"level":288},"\u002Fdocs\u002Fab-testing#do-not-test-the-lcp-element","Do Not Test the LCP Element",[256,262,422,456],"This is a critical rule. Using a client-side A\u002FB test to modify your Largest Contentful Paint element (e.g., the main hero banner or product image) will almost certainly harm your LCP score. Any changes to this critical element should be tested server-side if possible.",{"id":464,"title":465,"titles":466,"content":467,"level":288},"\u002Fdocs\u002Fab-testing#favor-server-side-testing-when-possible","Favor Server-Side Testing When Possible",[256,262,422,456],"For long-running tests or experiments on critical user flows (like checkout), we strongly recommend using a server-side A\u002FB testing approach. While it requires more initial setup, it completely bypasses the client-side performance penalties and provides a faster, more stable experience for your users.",{"id":469,"title":470,"titles":471,"content":472,"level":259},"\u002Fdocs\u002Fakamai-bot-manager","Akamai Bot Manager",[],"How to verify Akamai Bot Manager compatibility with Speed Kit and manually configure Speed Kit as a custom bot when strict security policies require it.",{"id":474,"title":475,"titles":476,"content":230,"level":231},"\u002Fdocs\u002Fakamai-bot-manager#akamai-bot-manager-configuration-for-speed-kit","Akamai Bot Manager Configuration for Speed Kit",[470],{"id":478,"title":18,"titles":479,"content":480,"level":236},"\u002Fdocs\u002Fakamai-bot-manager#key-takeaways",[470,475],"Speed Kit works out of the box in most standard Akamai setups, as our traffic is natively recognized and categorized under \"Site Monitoring and Web Development Bots\".If your active security policy sets this default category to \"Allow\" or \"Monitor\", no manual configuration or whitelisting is required.For highly restrictive security policies that block this category, you can easily guarantee uninterrupted acceleration by manually adding Speed Kit as a Custom Bot using our specific IP ranges and User-Agent.",{"id":482,"title":45,"titles":483,"content":484,"level":236},"\u002Fdocs\u002Fakamai-bot-manager#introduction",[470,475],"To deliver instant page loads and accelerate your e-commerce shop, Speed Kit's backend infrastructure must regularly fetch and cache your dynamic content. For websites protected by Akamai Bot Manager, it is crucial that this automated backend traffic is correctly identified and permitted to access your origin server. Fortunately, Speed Kit is natively recognized by Akamai's bot directory. Because of this, Speed Kit functions perfectly out of the box in the vast majority of standard setups without requiring any manual whitelisting or configuration from your IT team. This guide explains how to quickly verify your current Akamai Bot Manager settings to ensure out-of-the-box compatibility, and provides step-by-step instructions on how to manually configure Speed Kit as a custom bot only if your strict security rules require it.",{"id":486,"title":487,"titles":488,"content":489,"level":236},"\u002Fdocs\u002Fakamai-bot-manager#why-speed-kit-usually-works-out-of-the-box","Why Speed Kit Usually Works Out of the Box",[470,475],"Akamai actively maintains a directory of known bots. Speed Kit is permanently included in the Akamai system under the category \"Site Monitoring and Web Development Bots\". In a typical Akamai Bot Manager configuration, the default action for this category is already set to \"Allow\" or \"Monitor\". If your security policy uses these default settings, Speed Kit traffic will automatically pass through without any issue. You will not need to make any changes to your Akamai setup to achieve maximum acceleration. We highly recommend checking your active Akamai Security Policy first to verify the action assigned to \"Site Monitoring and Web Development Bots\". If it is set to \"Allow\" or \"Monitor\", your setup is complete and you can skip the rest of this guide.",{"id":491,"title":492,"titles":493,"content":494,"level":236},"\u002Fdocs\u002Fakamai-bot-manager#adding-speed-kit-as-a-custom-bot","Adding Speed Kit as a Custom Bot",[470,475],"If your organization's security policy requires you to block or heavily rate-limit the \"Site Monitoring and Web Development Bots\" category, you must manually add Speed Kit as a Custom Bot. This ensures our services can continue to accelerate your loading times without triggering false positives.",{"id":496,"title":497,"titles":498,"content":499,"level":282},"\u002Fdocs\u002Fakamai-bot-manager#step-1-create-a-custom-bot-category","Step 1: Create a Custom Bot Category",[470,475,492],"First, you need a designated category that is allowed to bypass your bot protections. Many organizations already have an existing category configured for trusted third-party services (e.g., \"Allow bots\" or \"Whitelisted Bots\"). If you already have an appropriate category, you can use it and skip to Step 2. If you do not have one, you must create it: Navigate to your Akamai Shared Resources and select Custom Bot Categories.Create a new bot category and name it (e.g., \"Allow bots\").Add a description to clarify its purpose.Save the category.Crucially, ensure that this new (or existing) category is set to Allow or Monitor within your active Security Policy.",{"id":501,"title":502,"titles":503,"content":504,"level":282},"\u002Fdocs\u002Fakamai-bot-manager#step-2-define-the-speed-kit-bot","Step 2: Define the Speed Kit Bot",[470,475,492],"Next, you will define the specific characteristics of the Speed Kit backend so Akamai can identify it. Switch to the Bot View tab under your Custom Bot settings and click to add a new bot.Enter \"Speedkit\" as the Bot name.Set the Bot type to \"Custom-defined\".Assign this bot to the Custom bot category you created in Step 1 (e.g., \"Allow bots\").",{"id":506,"title":507,"titles":508,"content":509,"level":282},"\u002Fdocs\u002Fakamai-bot-manager#step-3-configure-bot-conditions","Step 3: Configure Bot Conditions",[470,475,492],"To ensure Akamai accurately targets only Speed Kit traffic, you must define the bot using specific IP ranges and headers. Under the Bot conditions section, identify the bot by requests matching all of the following conditions:",{"id":511,"title":512,"titles":513,"content":514,"level":288},"\u002Fdocs\u002Fakamai-bot-manager#ipcidr-network-ranges","IP\u002FCIDR Network Ranges",[470,475,492,507],"Set the IP\u002FCIDR dropdown to matches and input the following Speed Kit infrastructure IP ranges: 45.140.152.0\u002F2218.177.175.144\u002F323.115.152.200\u002F3235.79.128.255\u002F32",{"id":516,"title":517,"titles":518,"content":519,"level":288},"\u002Fdocs\u002Fakamai-bot-manager#request-header","Request Header",[470,475,492,507],"Set the Request Header definition to identify our specific User-Agent: Input User-Agent in the header name field.Set the condition to matches.Input *SpeedKit\u002F1.0* in the value field.Ensure the Wildcards ( and ?)* checkbox is enabled so the pattern is recognized correctly.",{"id":521,"title":522,"titles":523,"content":524,"level":282},"\u002Fdocs\u002Fakamai-bot-manager#step-4-save-and-deploy","Step 4: Save and Deploy",[470,475,492],"Once all information and conditions are entered, click Save. Finally, deploy your updated Web Security Configuration to push the changes live to the edge network. Speed Kit will now be successfully recognized and permitted by your Akamai Bot Manager.",{"id":526,"title":527,"titles":528,"content":529,"level":236},"\u002Fdocs\u002Fakamai-bot-manager#additional-information","Additional Information",[470,475],"For more comprehensive details regarding our bot's behavior, technical characteristics, and how it interacts with your site, please refer to our official Speed Kit Bot documentation.",{"id":531,"title":532,"titles":533,"content":534,"level":259},"\u002Fdocs\u002Fbusiness-impact","Business Impact",[],"How Speed Kit drives e-commerce success by boosting conversions, traffic, engagement, and customer lifetime value while lowering acquisition costs.",{"id":536,"title":537,"titles":538,"content":230,"level":231},"\u002Fdocs\u002Fbusiness-impact#speed-kits-business-impact","Speed Kit's Business Impact",[532],{"id":540,"title":18,"titles":541,"content":542,"level":236},"\u002Fdocs\u002Fbusiness-impact#key-takeaways",[532,537],"Business Growth: Speed Kit positively impacts every component of the e-commerce success formula by increasing visitors, boosting conversion rates, and growing customer lifetime value.Rapid & Low-Risk Implementation: The solution delivers measurable performance gains in days with an effortless setup that requires no infrastructure changes and can be deactivated instantly.Cost Effect: By improving SEO rankings, reducing Google Ad costs, and enhancing user engagement, Speed Kit offers a highly efficient investment to maximize your marketing budget and overall profitability.",{"id":544,"title":45,"titles":545,"content":546,"level":236},"\u002Fdocs\u002Fbusiness-impact#introduction",[532,537],"Web performance is a critical driver of success in the digital marketplace, directly influencing key business metrics. While the exact impact of page speed can vary between businesses, Speed Kit is engineered to deliver tailored enhancements by leveraging real user monitoring (RUM) data. This document outlines how Speed Kit systematically improves performance to generate tangible business value, using the standard e-commerce success formula as a framework.",{"id":548,"title":549,"titles":550,"content":551,"level":236},"\u002Fdocs\u002Fbusiness-impact#how-speed-kit-drives-e-commerce-success","How Speed Kit Drives E-Commerce Success",[532,537],"Numerous studies show the powerful business impact of web performance, a fact you can explore in the comprehensive SpeedHub E-Commerce & Retail Performance Study Database. To see how we translate this industry knowledge into real-world success, you can also review our own published customer case studies. But the critical question is: how does web performance impact your business? Speed Kit is designed to make this transparent, so you can make an informed decision about whether an investment in page speed is beneficial for your company. The following sections break down how Speed Kit positively influences each variable in the standard e-commerce success formula.",{"id":553,"title":554,"titles":555,"content":556,"level":282},"\u002Fdocs\u002Fbusiness-impact#turn-clicks-into-customers-boosting-the-conversion-rate","Turn Clicks into Customers: Boosting the Conversion Rate",[532,537,549],"Speed Kit’s real user monitoring tools consistently show a direct relationship between loading times and conversion rates. The chart below, taken from a real, anonymized Speed Kit customer, visualizes this relationship. It groups user sessions into four buckets based on their average Largest Contentful Paint (LCP). While the bars represent the number of sessions in each speed bucket, the blue line shows the corresponding conversion rate for each group. The data clearly shows that faster sessions convert better. Sessions with an LCP between 2.5 and 4 seconds have a conversion rate of 2.2%, while those under 2.5 seconds improve to 2.8%. However, the biggest lever for business success is achieving sub-second speeds: sessions loading in under 1 second have a conversion rate of 4.1%—a dramatic increase. Speed Kit is specifically designed to push as many users as possible into this 'Fast' (\u003C1s) bucket by instantly serving cached or preloaded pages. While a good LCP (under 2.5s) is beneficial for SEO, this data demonstrates that further optimization to achieve near-instant speeds is required to maximize conversions, which is what Speed Kit provides.",{"id":558,"title":559,"titles":560,"content":561,"level":288},"\u002Fdocs\u002Fbusiness-impact#every-millisecond-affects-your-conversions","Every Millisecond Affects Your Conversions",[532,537,549,554],"Real customer example of how Speed Kit shifts users into faster loading speeds with higher conversion rates: Data from an anonymized customer website. Specific data will be provided during\u002Fafter the rollout of Speed Kit. This strong correlation between speed and conversions is not unique to our data. Our findings are validated by extensive third-party research across all industries, with numerous public case studies demonstrating the direct impact of performance on conversion rates.",{"id":563,"title":564,"titles":565,"content":566,"level":282},"\u002Fdocs\u002Fbusiness-impact#the-impact-of-performance-on-conversion-rates","The Impact of Performance on Conversion Rates",[532,537,549],"Study conducted byCVR increase per 100 msSummaryReferenceZalando0.70%Europe’s leading online fashion platform found that every 100 ms improvement in page loading time increased revenue per session by ~0.7%.LinkAmazon1.00%Amazon reported that a 100 ms increase in latency caused about a 1% drop in sales—conversely, making pages 100 ms faster can boost conversions by ~1%.LinkWalmart1.00%Walmart’s analysis showed ~1% higher conversion for every 100 ms of improvement in page load speed. As load times increased from ~1s to ~4s, conversion rates dropped sharply.LinkDeloitte and Google8.00%A joint study found that improving mobile page speed by just 0.1s (100 ms) boosted conversion rates by 8% on average for retail sites.LinkFarfetch1.30%The luxury fashion platform found that for each additional 100 ms of Largest Contentful Paint (LCP), the conversion rate dropped ~1.3%.LinkVodafone1.00%In an A\u002FB test, Vodafone demonstrated that a 31% improvement in LCP yielded an 8% lift in sales, which translates to roughly ~1% higher conversions per 100 ms of LCP improvement.LinkAberdeen Group0.70%A widely cited study found that a 1-second delay in page load time led to a ~7% drop in conversions, equating to about 0.7% per 100 ms.LinkCombination of Studies1.00%Median Outcome Across Studies",{"id":568,"title":569,"titles":570,"content":230,"level":282},"\u002Fdocs\u002Fbusiness-impact#expanding-your-reach-attracting-more-visitors","Expanding Your Reach: Attracting More Visitors",[532,537,549],{"id":572,"title":573,"titles":574,"content":575,"level":288},"\u002Fdocs\u002Fbusiness-impact#better-search-rankings","Better Search Rankings",[532,537,549,569],"Speed Kit boosts your organic search rankings and attracts more free traffic in several key ways: Improves Core Web Vitals (CWV): A fast site gives you a foundational advantage, as Google uses Core Web Vitals as a direct ranking signal. Speed Kit is engineered to significantly improve these metrics.Enhances User Engagement: A seamless experience reduces user abandonment and encourages positive engagement. These are strong indicators to search engines that your site is a high-quality result.Provides Data-Driven Proof: We can conduct a niche-specific SEO analysis for your market, correlating competitor rankings with their real-world performance to illustrate the tangible advantage of speed.Enables Proactive Monitoring: Our optional Real User Monitoring (RUM) tool allows you to track your Core Web Vitals in real-time. This lets you identify and fix performance regressions long before they can negatively impact the public data Google uses for ranking. For a complete overview of our SEO strategy and how Speed Kit interacts with crawlers, please read Speed Kit and SEO: Boosting Your Search Rankings.",{"id":577,"title":578,"titles":579,"content":580,"level":288},"\u002Fdocs\u002Fbusiness-impact#reduced-google-ad-costs","Reduced Google Ad Costs",[532,537,549,569],"Web performance is a key component of the \"Landing page experience\" in Google Ads. According to Google's official documentation, your landing page experience is one of the three primary factors that determine your Quality Score. A higher Quality Score is a crucial part of the Ad Rank formula, which can lead to a lower cost-per-click (CPC) and better ad placement. This creates a \"quality discount\" for advertisers with fast, high-quality sites.",{"id":582,"title":583,"titles":584,"content":585,"level":288},"\u002Fdocs\u002Fbusiness-impact#how-the-google-ads-auction-sets-your-price","How the Google Ads Auction Sets Your Price",[532,537,549,569],"To understand the discount, it's important to know how Google sets ad prices. It's not based on just your bid. Ad Rank Determines Position: Your ad's position is determined by its Ad Rank, calculated as: Ad Rank = Your Max Bid × Your Quality Score. The higher the Ad Rank, the better the position.Price is Based on Your Competitor: You don't pay your maximum bid. Instead, you pay just enough to beat the Ad Rank of the advertiser directly below you. The formula for your actual CPC is:\nYour Actual CPC = (Ad Rank of the ad below you \u002F Your Quality Score) + $0.01 This formula calculates the exact bid you would have needed to achieve an Ad Rank just slightly higher than your competitor's. Your high Quality Score effectively lowers this required bid, giving you a discount.",{"id":587,"title":588,"titles":589,"content":590,"level":288},"\u002Fdocs\u002Fbusiness-impact#the-quality-discount-in-action","The \"Quality Discount\" in Action",[532,537,549,569],"Let's use an example to see how a high Quality Score, driven by a fast landing page, drastically reduces your ad costs. AdvertiserMax BidQuality ScoreAd RankFast Shop$2.0010\u002F1020Slow Shop$3.004\u002F1012 Analysis: Fast Shop wins the top spot with an Ad Rank of 20, even though its bid is lower.Slow Shop takes the second spot with an Ad Rank of 12. Now, let's calculate what Fast Shop actually pays: They need to beat Slow Shop's Ad Rank of 12.Using the formula: (Ad Rank of Slow Shop \u002F Fast Shop's Quality Score) + $0.01Calculation: (12 \u002F 10) + $0.01 = $1.20 + $0.01 = $1.21 Even with a max bid of $2.00, Fast Shop only pays $1.21 per click. This is their quality discount in action. What about Slow Shop? If there was another advertiser below them with an Ad Rank of 8, Slow Shop would pay: Calculation: (8 \u002F 4) + $0.01 = $2.00 + $0.01 = $2.01 Slow Shop pays a much higher price ($2.01) for a lower ad position because its poor Quality Score offers no discount. By optimizing your site with Speed Kit, you enhance your Landing page experience—one of the most important factors that determine your Quality Score. This gives you a competitive advantage, helping to stretch your advertising budget further. You can review this mechanism on Google's official page for Ad Rank.",{"id":592,"title":593,"titles":594,"content":595,"level":282},"\u002Fdocs\u002Fbusiness-impact#enhanced-user-engagement","Enhanced User Engagement",[532,537,549],"A fast, responsive website creates a more pleasant and effective user experience, which directly encourages deeper engagement. When pages load instantly and interactions are seamless, users are more likely to move beyond passive viewing and take valuable actions. This boosts key metrics that signal a healthy, growing business.",{"id":597,"title":598,"titles":599,"content":600,"level":288},"\u002Fdocs\u002Fbusiness-impact#deeper-site-exploration","Deeper Site Exploration",[532,537,549,593],"Near-instant page loads reduce the friction of browsing. Users are more willing to click on additional products, read more articles, or compare different services, which significantly increases the average number of pages viewed per session.",{"id":602,"title":603,"titles":604,"content":605,"level":288},"\u002Fdocs\u002Fbusiness-impact#increased-social-proof-and-advocacy","Increased Social Proof and Advocacy",[532,537,549,593],"Users who have a positive and seamless experience are more likely to become brand advocates. This includes leaving positive product reviews, which builds social proof for other customers, and sharing content or products on social media, which generates high-quality organic traffic and brand reach.",{"id":607,"title":608,"titles":609,"content":610,"level":282},"\u002Fdocs\u002Fbusiness-impact#foster-loyalty-increasing-customer-lifetime-value","Foster Loyalty: Increasing Customer Lifetime Value",[532,537,549],"A fast and seamless website experience increases customer satisfaction, making users more likely to complete a purchase and return in the future. This positive engagement builds customer loyalty and directly contributes to a higher customer lifetime value (LTV).",{"id":612,"title":613,"titles":614,"content":615,"level":282},"\u002Fdocs\u002Fbusiness-impact#acquire-customers-for-less-reducing-acquisition-costs","Acquire Customers for Less: Reducing Acquisition Costs",[532,537,549],"Excellent web performance lowers your customer acquisition cost (CAC) by boosting the efficiency of your marketing spend. The primary driver for this is a higher conversion rate (CVR). Speed Kit ensures a seamless user experience, which means a larger percentage of the visitors you attract—especially those from expensive paid campaigns—will convert into customers. When this expensively acquired traffic converts better, your effective cost per acquisition naturally declines. This enhanced efficiency, combined with lower bounce rates and more organic traffic, provides a significant competitive advantage. A business with a lower CAC can acquire more customers for less money, enabling it to outpace and outperform competitors.",{"id":617,"title":618,"titles":619,"content":620,"level":236},"\u002Fdocs\u002Fbusiness-impact#your-key-benefits","Your Key Benefits",[532,537],"To maximize value, Speed Kit focuses on delivering the following core benefits:",{"id":622,"title":623,"titles":624,"content":625,"level":282},"\u002Fdocs\u002Fbusiness-impact#optimal-business-impact","Optimal Business Impact",[532,537,618],"Browser-Level Optimization: Speed Kit enhances performance directly in the user's browser, providing a distinct advantage over solutions that operate only at the CDN Edge.Data-Driven Proof: We provide customers with performance data and business impact charts to clearly demonstrate Speed Kit's value during the decision-making process.",{"id":627,"title":628,"titles":629,"content":630,"level":282},"\u002Fdocs\u002Fbusiness-impact#fast-time-to-success","Fast Time to Success",[532,537,618],"Speed Kit delivers significant improvements to Time To First Byte (TTFB) by serving pre-fetched, anonymous HTML directly from our edge network or the browser’s cache. This immediate impact on key metrics occurs within just a few days, in clear contrast to alternative methods that often require months of development and costly changes to site architecture and infrastructure.",{"id":632,"title":633,"titles":634,"content":635,"level":282},"\u002Fdocs\u002Fbusiness-impact#effortless-implementation","Effortless Implementation",[532,537,618],"Simple Integration: Speed Kit can be integrated in a matter of hours. The only requirements are to place our service worker on your website and whitelist Speed Kit’s IP range.No Infrastructure Changes: No complex backend or infrastructure modifications are needed. If results ever fall short of expectations, Speed Kit can be uninstalled in minutes by simply removing the service worker.Universal Compatibility: Speed Kit is technology-agnostic and designed to work seamlessly with all common e-commerce platforms as well as custom-built online shops.",{"id":637,"title":638,"titles":639,"content":640,"level":282},"\u002Fdocs\u002Fbusiness-impact#low-risk","Low Risk",[532,537,618],"Proactive Monitoring: To guarantee stability and performance, Speed Kit’s services are monitored in real-time. Our in-house experts are automatically alerted if any anomalies are detected.Instant Control: Unlike many other performance solutions, Speed Kit provides a dashboard that allows customers to deactivate the service instantly with a single click, providing complete control and peace of mind.",{"id":642,"title":643,"titles":644,"content":230,"level":282},"\u002Fdocs\u002Fbusiness-impact#transparent-pricing","Transparent Pricing",[532,537,618],{"id":646,"title":647,"titles":648,"content":649,"level":288},"\u002Fdocs\u002Fbusiness-impact#easy-simple","Easy & Simple",[532,537,618,643],"Our pricing is based on a single, straightforward metric: your average monthly page views. This eliminates the need for complex calculations based on requests, CPU usage, or other variable factors. The model also includes volume discounts, so your cost per page view decreases as your traffic grows.",{"id":651,"title":652,"titles":653,"content":654,"level":288},"\u002Fdocs\u002Fbusiness-impact#predictable-planable","Predictable & Planable",[532,537,618,643],"Because our model is so simple, it provides you with predictable monthly costs. This allows you to forecast your expenses with confidence and build a reliable budget around your performance investment.",{"id":656,"title":657,"titles":658,"content":659,"level":288},"\u002Fdocs\u002Fbusiness-impact#fair-flexible","Fair & Flexible",[532,537,618,643],"A fair pricing model means no hidden fees and no budget surprises. Our approach is designed to adapt to the natural fluctuations of your business. For unexpected, one-time traffic peaks from an event like a marketing campaign, you can simply pay for the overage. For sustained, long-term growth, we make it easy to adjust your contract at any time to a new tier that better suits your needs. Furthermore, our measurement methodology is designed for fairness and predictability. A page view is billable when the Speed Kit Service Worker is activated, as this is the core technology that enables both content acceleration and performance monitoring. This means: Fair Bot Handling: Our pricing model is designed to charge for traffic that actively uses Speed Kit's technology. Well-behaving crawlers, like the Google Bot, do not activate the Service Worker and are therefore naturally excluded from your billable page views. Any other traffic that does reach our infrastructure and activates the Service Worker is considered billable. You have full control over this—by using a firewall to block unwanted bot traffic, you prevent it from ever reaching our system and ensure it is not billed.Fair Billing for Predictive Preloading: To enable instant page loads, Speed Kit proactively preloads content in the background. However, you are only billed for a page view when a visitor actually navigates to it. The cost of any unused preloaded content is on us.Asset Acceleration at No Extra Cost: To provide a comprehensive performance uplift, our service also includes the acceleration of assets like JavaScript, CSS, and images. During the integration phase, our product integration team evaluates if activating this feature will provide a significant additional benefit for your specific site. If so, we enable full asset acceleration for you, and this powerful enhancement is included in your plan at no extra charge.",{"id":661,"title":662,"titles":663,"content":664,"level":282},"\u002Fdocs\u002Fbusiness-impact#expertise-and-partnership","Expertise and Partnership",[532,537,618],"We believe that exceptional performance comes from combining powerful technology with expert guidance. When you choose Speed Kit, you get more than a software solution; you gain a long-term partner dedicated to your website's success. Proactive Strategic Reviews: To ensure continuous alignment and success, our Customer Success Team conducts quarterly partnership calls. These sessions cover your current performance status, planned changes on your side, relevant Speed Kit product enhancements, and key updates from the web performance industry. For deeper technical discussions or to address your most complex challenges, your Customer Success Manager will involve our in-house web performance specialists to provide expert guidance on topics like strategic audits or migration planning.Expertise That Delivers Results: Our team's passion for web performance drives us to find the most effective and robust solutions for your business. We go beyond surface-level metrics to analyze data at the deepest level, allowing us to solve complex performance challenges that others can't. This expertise is why our team includes Google Developer Experts (GDEs) and maintains a direct feedback loop with Google's development teams. This deep involvement allows us to adopt new technologies before they are widely available. For example, we actively participate in origin trials for cutting-edge browser features like the Speculation Rules API and Compression Dictionaries, giving us hands-on experience and allowing us to provide Google with valuable real-world feedback. For you, this translates into a future-proof performance strategy that ensures you benefit from the newest technologies and stay ahead of your competitors.Customer Network: We are happy to connect customers who are facing similar challenges, fostering a community where insights and solutions can be shared (with the consent of all parties).",{"id":666,"title":667,"titles":668,"content":669,"level":236},"\u002Fdocs\u002Fbusiness-impact#proving-the-return-on-investment-roi","Proving the Return on Investment (ROI)",[532,537],"Speed Kit has a long history of delivering a strong, positive return on investment for our clients. You can see the real-world impact for yourself in our numerous published customer case studies. To demonstrate this value for your specific business, we offer the following transparent, data-driven process: Statistically Sound Performance Measurement: We measure the precise performance uplift using our integrated Real User Monitoring (RUM) on your live website traffic. RUM provides deep, real-time insights into your website’s performance as experienced by your actual users, capturing an authentic picture of the user experience that synthetic lab tests cannot replicate. This data provides a statistically sound foundation for the analysis.Business Impact Strength: We then link this performance data to your business data to generate a Business Impact Chart. This powerful methodology directly quantifies the impact of performance improvements on key business indicators, showing exactly how speed translates to revenue and conversions.Guided ROI Calculation: Finally, we translate these findings into a comprehensive business case. Using our ROI Template, which contains industry benchmarks and best practices, your dedicated Account Manager will guide you through calculating the total projected return on investment. If desired, you can refine this template privately with your company-internal numbers (e.g., for revenue and cost of sales) for the most accurate results. This process provides a clear, data-driven view of the potential ROI, allowing you to make a confident and informed decision.",{"id":671,"title":672,"titles":673,"content":674,"level":236},"\u002Fdocs\u002Fbusiness-impact#summary","Summary",[532,537],"Investing in web performance with Speed Kit improves individual KPIs and enhances overall e-commerce success in days. It integrates seamlessly with all common e-commerce platforms and custom-built technology stacks, providing a swift and effective way to boost performance. To prove its value, Speed Kit offers a uniquely transparent process. It leverages integrated Real User Monitoring (RUM) to generate a detailed Business Impact Chart, which directly correlates performance with your business KPIs. This powerful analysis, combined with a guided ROI calculation, is the most reliable method for quantifying the real-world return on your investment. Unlike marketing investments that might affect only one aspect of the success formula, Speed Kit enhances multiple factors simultaneously—driving more traffic, increasing conversions, and lowering customer acquisition costs. This makes it a uniquely cost-effective strategy to increase your business success. Prioritize optimizing your web performance with Speed Kit to maximize the effectiveness of your marketing budget and gain a significant competitive advantage.",{"id":248,"title":5,"titles":676,"content":242,"level":259},[],{"id":678,"title":13,"titles":679,"content":230,"level":231},"\u002Fdocs\u002Fclient-side-rendering#achieving-instant-lcp-on-client-side-rendered-websites-with-speed-kit",[5],{"id":681,"title":18,"titles":682,"content":683,"level":236},"\u002Fdocs\u002Fclient-side-rendering#key-takeaways",[5,13],"Server-Side Rendering Layer: Speed Kit uses a Chromium-based rendering layer to create a fully rendered HTML snapshot of a client-side rendered page, which can then be cached.Intelligent Caching: By executing JavaScript and fetching necessary resources on the server, Speed Kit ensures that the cached version is a complete and accurate representation of the page.Seamless User Experience: Users receive an instant, fully-rendered page from the cache while the original interactive application rehydrates in the background, ensuring a fast initial load without sacrificing dynamic functionality.",{"id":685,"title":45,"titles":686,"content":687,"level":236},"\u002Fdocs\u002Fclient-side-rendering#introduction",[5,13],"Client-Side Rendering (CSR) is a popular approach for building modern, interactive web applications. In a CSR model, the browser receives a minimal HTML document and then uses JavaScript to render the page content, which often involves fetching additional data. While this can create a fluid, app-like user experience, it often comes at a cost: initial load times can be slow, as the browser must download, parse, and execute JavaScript before the user sees any meaningful content. For e-commerce sites, this delay can lead to lost conversions and revenue. Speed Kit addresses this challenge by introducing a server-side rendering layer that makes client-side rendered pages cacheable. By pre-rendering the page on the server, Speed Kit can deliver a fully formed HTML document to the user's browser, dramatically reducing the Time to First Byte (TTFB) and ensuring that users see content almost instantly. This document explains the architecture and processes that allow Speed Kit to accelerate even the most dynamic client-side rendered e-commerce shops.",{"id":689,"title":63,"titles":690,"content":66,"level":236},"\u002Fdocs\u002Fclient-side-rendering#client-side-rendering-csr",[5,13],{"id":692,"title":71,"titles":693,"content":694,"level":282},"\u002Fdocs\u002Fclient-side-rendering#performance-and-user-experience",[5,13,63],"This approach presents significant performance challenges and is inherently less resilient than server-side rendering (SSR). The user often sees a blank screen or a loading animation until the browser downloads, parses, and executes large JavaScript bundles, leading to a poor Largest Contentful Paint (LCP). Unlike with SSR, the rendering environment is entirely out of the development team's control; it depends on the user's device, browser, and even battery status, making it difficult to test and predict the actual user experience. On less powerful mobile devices, this client-side processing can be slow, and other JavaScript tasks can block the main thread, further delaying rendering. This heavy reliance on client-side execution also means that CSR is vulnerable to JavaScript errors, which can prevent the page from displaying correctly or at all. This delay is compounded by how browsers handle different resources. While traditional HTML can be streamed, parsed, and even begin to be rendered and painted as it downloads—allowing the browser's preload scanner to discover and fetch critical sub-resources like Javascript, CSS and images early—this mechanism is ineffective with CSR. The initial HTML contains no meaningful content, so the browser must wait for JavaScript to execute before it can discover the actual content of the page, creating a significant bottleneck.",{"id":696,"title":81,"titles":697,"content":698,"level":282},"\u002Fdocs\u002Fclient-side-rendering#the-seo-challenges-of-client-side-rendering",[5,13,63],"Client-Side Rendering (CSR) creates significant technical hurdles for search engine crawlers, which can directly impact search rankings and visibility. The primary challenges stem from how content is delivered and rendered. Empty Initial HTML: The server first delivers an HTML file that is essentially an empty shell. It lacks any meaningful, indexable content and instead contains links to JavaScript files that must be executed to build the page.Intensive Crawler Rendering: This forces search engines like Googlebot into a resource-intensive, two-step process. The crawler cannot simply index the HTML; it must download, parse, and execute the JavaScript to see the final content. This requires significant computational resources from the crawler.Crawl Budget Depletion: Every website is allocated a finite \"crawl budget\" by search engines. The resource-intensive nature of rendering JavaScript can quickly exhaust this budget, especially for large e-commerce sites. As a result, crawlers may not have the capacity to discover and index all pages on the site.Risk of Rendering Errors: The entire indexing process hinges on the flawless execution of JavaScript. If there are any code errors or incompatibilities with the crawler's rendering engine, the content may fail to appear, leaving the page effectively blank and invisible to the search engine. These issues stand in stark contrast to server-rendered pages, where crawlers receive a complete and immediately indexable HTML document, ensuring a much more efficient and reliable indexing process.",{"id":700,"title":117,"titles":701,"content":120,"level":236},"\u002Fdocs\u002Fclient-side-rendering#server-side-rendering-ssr",[5,13],{"id":703,"title":124,"titles":704,"content":127,"level":282},"\u002Fdocs\u002Fclient-side-rendering#performance-characteristics",[5,13,117],{"id":706,"title":131,"titles":707,"content":134,"level":282},"\u002Fdocs\u002Fclient-side-rendering#navigational-experience",[5,13,117],{"id":709,"title":138,"titles":710,"content":141,"level":236},"\u002Fdocs\u002Fclient-side-rendering#how-speed-kit-accelerates-client-side-rendered-pages",[5,13],{"id":712,"title":145,"titles":713,"content":714,"level":282},"\u002Fdocs\u002Fclient-side-rendering#backend-pre-rendering-process",[5,13,138],"Our backend system utilizes a headless browser to perform the rendering process on the server side, just as a client's browser would. Execution: The headless browser loads your page and executes all necessary JavaScript to fetch data and build the Document Object Model (DOM).Snapshot: We intelligently wait until the page is fully constructed, using configurable \"guards\" (specific page elements) to determine when rendering is complete, and then take a snapshot of the fully-rendered HTML.Caching: This HTML snapshot is captured and stored in Speed Kit's multi-layered cache. Read our Dynamic Caching documentation for more information.",{"id":716,"title":178,"titles":717,"content":718,"level":282},"\u002Fdocs\u002Fclient-side-rendering#instant-previews-with-the-shadow-dom",[5,13,138],"When a user visits a page, the cached HTML snapshot is delivered instantly and displayed within a Shadow DOM, a browser feature that isolates this content from the main page. Immediate Display: Displaying the cached HTML within a Shadow DOM dramatically improves the Largest Contentful Paint (LCP) because the user sees a complete page immediately.Seamless Hydration: While the user views this static preview, your JavaScript application loads in the background to become interactive, a process known as \"hydration.\"Live Transition: Speed Kit uses the same configurable 'guards' to detect when the JavaScript application is fully hydrated. At that moment, the Shadow DOM is seamlessly removed, transitioning the user to the live application. This transition time is closely monitored to ensure a high-quality user experience. This approach combines the instant load times of a static site with the rich interactivity of a modern frontend application while guaranteeing that the user always sees the correct, up-to-date content from your origin at the end of the interaction.",{"id":720,"title":208,"titles":721,"content":722,"level":282},"\u002Fdocs\u002Fclient-side-rendering#change-detection-for-csr-pages",[5,13,138],"Speed Kit’s crowd-sourced change detection works seamlessly with client-side rendered pages. The core principle remains the same: using real-time user traffic to identify stale content. For a detailed explanation of the underlying mechanisms, please see the Dynamic Caching documentation. Content Comparison: After the live application has fully hydrated, our script compares key elements of the content rendered by the frontend application against the static HTML that was initially served from the cache.Triggering Updates: If a discrepancy is found (e.g., a price or stock level has changed), the browser sends a signal to our backend. This triggers an immediate revalidation and refresh of that page across our entire infrastructure, ensuring all subsequent visitors receive the fresh version.",{"id":724,"title":725,"titles":726,"content":727,"level":259},"\u002Fdocs\u002Fconfiguration","Configuration",[],"A developer reference for the Speed Kit configuration object, covering basic properties, the rule-based matcher system, and advanced options like image optimization and query-parameter stripping.",{"id":729,"title":730,"titles":731,"content":230,"level":231},"\u002Fdocs\u002Fconfiguration#speed-kit-configuration","Speed Kit Configuration",[725],{"id":733,"title":18,"titles":734,"content":735,"level":236},"\u002Fdocs\u002Fconfiguration#key-takeaways",[725,730],"Centralized Centralized configuration: The Speed Kit configuration file is a powerful, flexible tool for managing the behavior of the Speed Kit service. It allows for granular control over which pages and resources are accelerated to ensure optimal performance.Granular, rule-based control: The core of the Speed Kit configuration is its comprehensive rule system. It allows you to define precise rules using matchers for hostnames, pathnames, URLs, and content types, giving you fine-grained control over caching and optimization behaviors.Safe and progressive optimization: Speed Kit's default configuration is built for safety and reliability. By using distinct rules for enabled sites and whitelisting critical resources, the system ensures that acceleration is only applied where it is intended, preventing unwanted side effects while maximizing performance.",{"id":737,"title":45,"titles":738,"content":739,"level":236},"\u002Fdocs\u002Fconfiguration#introduction",[725,730],"The Speed Kit configuration is the central control hub for the Speed Kit acceleration service. This JavaScript-based configuration defines exactly how Speed Kit should behave on your website, from which pages to accelerate to which resources to optimize. It works in conjunction with the core service worker logic (typically found in wrapper-sw.js). This document serves as a comprehensive guide for developers and technical stakeholders. It breaks down the core components of the configuration, explains the logic behind its rule-based system, and provides practical examples to help you understand and modify your site's performance settings.",{"id":741,"title":742,"titles":743,"content":744,"level":236},"\u002Fdocs\u002Fconfiguration#the-core-configuration","The Core Configuration",[725,730],"The Speed Kit configuration, housed in a configuration script that is included in the installation resource (typically placed in the \u003Chead> of your HTML), is the central control hub for the Speed Kit acceleration service. This configuration works in conjunction with the wrapper-sw.js file, which contains the core service worker logic. This configuration defines exactly how Speed Kit should behave on your website, from which pages to accelerate to which resources to optimize. This configuration object is generated dynamically by Speed Kit, using rules and settings from different sources. You can influence and update these settings through multiple channels: Speed Kit Dashboard: The primary interface for business and project managers to manage and test configurations.Speed Kit Product Integration Team: For complex or fundamental changes, our team manages the updates directly in the configuration code.",{"id":746,"title":747,"titles":748,"content":749,"level":231},"\u002Fdocs\u002Fconfiguration#basic-configuration-properties","Basic Configuration Properties",[725],"The following properties are typically found in every Speed Kit configuration. appName: A unique identifier for your application within the Speed Kit ecosystem. This value is managed internally and does not need to be changed by the customer.sw: This property specifies the path to your Speed Kit service worker file (e.g., \u002Fwrapper-sw.js). This value should only be updated if your e-commerce platform requires the file to be located at a different path or file name.preloadDynamicBlocks: A boolean that enables or disables Speed Kit's core \"race\" feature. When set to true (the default), the system races a request to the Speed Kit cache against a request to your origin server. For purely static sites, where no dynamic content needs to be merged, this can be set to false.rumTracking: A boolean that controls whether Real User Monitoring (RUM) data is sent to the Speed Kit backend. When set to false, no RUM data will be collected.split: A value between 0.0 and 1.0 that determines the percentage of users for whom Speed Kit will be active. This is primarily used for A\u002FB testing during the onboarding and proof-of-concept (POC) phase.splitTestId: A unique string identifier for your A\u002FB test. This is used to distinguish between different test iterations and is used in conjunction with the split property for segmenting user data in performance reports.disabled: This property allows you to completely disable Speed Kit for a specific user segment. It is primarily used for troubleshooting, for example, if an issue is identified in a particular browser version. When this condition is met, the service worker will not be installed, and no acceleration will occur for that segment. window.speedKit = {\n  appName: APP,\n  sw: \"\u002Fwrapper-sw.js\",\n  preloadDynamicBlocks: true,\n  rumTracking: true,\n  split: 0.5,\n  splitTestId: \"50vs50-test-id\",\n  \u002F\u002F Example: Disable Speed Kit for a specific version of Microsoft Edge\n  disabled: \u002FEdge\\\u002F18\\.17763\u002F.test(navigator.userAgent),\n};",{"id":751,"title":752,"titles":753,"content":754,"level":236},"\u002Fdocs\u002Fconfiguration#the-rule-based-system","The Rule-Based System",[725,747],"Most of Speed Kit's functionality is governed by a powerful, rule-based system. This system provides a flexible way to define and apply specific behaviors to different parts of your website, such as accelerating or excluding pages and resources, optimizing images, and stripping query parameters.",{"id":756,"title":757,"titles":758,"content":759,"level":282},"\u002Fdocs\u002Fconfiguration#understanding-the-rule-structure","Understanding the Rule Structure",[725,747,752],"At its core, the rule system uses an array of objects. Each object in the array represents a rule, and all rules are linked by an OR operator. This means if a request matches any of the rules in the array, the rule set is considered to have a match. Within each rule object, the properties are linked by an AND operator. This means for a rule to be considered a match, a request must satisfy all the conditions within that rule object.",{"id":761,"title":762,"titles":763,"content":764,"level":288},"\u002Fdocs\u002Fconfiguration#example","Example:",[725,747,752,757],"[\n  {\n    pathname: [\n      \u002F\\\u002Fcart\u002Fi,\n      \u002F\\\u002Fmy-account\u002Fi,\n    ],\n   host: [\"example.com\",\"imagesrv.com\",\"connect.social.com\"],\n  },\n  {\n    pathname: \"\u002Fcontact\u002F\"\n  },\n]; In this example, a request will be accelerated if it matches (one of the pathnames AND one of the hosts) OR (\u002Fcontact\u002F and all its sub-resources). This shows how rules can be combined to accelerate specific resources on a variety of different hosts, while also enabling acceleration for a simple pathname on any host where the install-resource is integrated and enabled.",{"id":766,"title":767,"titles":768,"content":769,"level":282},"\u002Fdocs\u002Fconfiguration#rule-matchers","Rule Matchers",[725,747,752],"All rule-based properties support the following matchers. Each matcher can accept a string, a regular expression (regex), or an array of strings and regexes. A single rule can also combine different matcher types.",{"id":771,"title":772,"titles":773,"content":774,"level":288},"\u002Fdocs\u002Fconfiguration#string-and-regex-matchers","String and Regex Matchers",[725,747,752,767],"String Matchers: For host, pathname, and url, string matchers perform a prefix match after converting both the input and the matcher to lowercase. This is useful for automatically including sub-resources (in the case of a path) or query parameters (in the case of a URL). String Matchers: For host, pathname, and url, string matchers perform a prefix match after converting both the input and the matcher to lowercase. This is useful for automatically including sub-resources in the case of a path.Regex Matchers: Regexes provide more control and are typically used for more complex patterns. It is recommended to use the \u002Fi flag to ensure the regex is case-insensitive.",{"id":776,"title":777,"titles":778,"content":779,"level":288},"\u002Fdocs\u002Fconfiguration#matcher-types","Matcher Types",[725,747,752,767],"Here are concrete examples for each matcher type to demonstrate how to use them in a configuration. host: Matches the hostname of the URL. This is a crucial rule for whitelisting both your own domain and any third-party hosts you want to accelerate. It is often an array to include multiple hosts. \u002F\u002F A host rule matching an array of domains\nhost: \"www.example.com\" pathname: Matches the path of the URL. A rule for \u002Fabout\u002F would also match \u002FAbout\u002Fteam and \u002Fabout\u002Fcompany. \u002F\u002F A pathname rule matching the home page and all blog posts\npathname: [\u002F^\\\u002F$\u002F, \"\u002Fblog\u002F\"] url: Matches the full URL, ignoring the protocol part. The match must start with the domain name and can be combined with a path and query parameters (e.g., www.example.com\u002Fmy-path). \u002F\u002F Matches www.example. URLs with 4 or more path segments.\nurl: \u002F^www\\.example\\.[\\w.]+(\\\u002F[\\w_-]+){4,}$\u002F,\n\n\u002F\u002F Matches a specific URL prefix, including its path components (prefix match).\nurl:\"www.example.com\u002Fproducts\u002Fview\",\n\n\u002F\u002F Excludes pages containing a specific query parameter from being accelerated (regex).\nurl: \u002F[?&]exclude_cache=true\u002Fi, contentType: Matches the resource's content type (e.g., navigate, script, style, image, font). A rule with contentType: [\"navigate\"] will only match the top-level HTML document and will not apply to any sub-resource requests, like xhr\u002Ffetch requests, scripts, styles, fonts, and images. \u002F\u002F A contentType rule matching only images and fonts\ncontentType: [\"image\", \"font\"], cookie: Matches a cookie's presence or value. This is useful for segmenting users based on login status or a\u002Fb test groups. \u002F\u002F A cookie rule checking for a specific session cookie\ncookie: \"session_id\",\ncookie: \"logged_in=1\",",{"id":781,"title":782,"titles":783,"content":784,"level":282},"\u002Fdocs\u002Fconfiguration#the-two-layers-of-rules","The Two Layers of Rules",[725,747,752],"The Speed Kit rule system is applied in two distinct layers: Navigation-level rules: enabledSites and disabledSites determine if a given page navigation is eligible for acceleration.Resource-level rules: whitelist and blacklist determine which specific resources on that page will be accelerated. A page must first be deemed eligible for acceleration at the navigation level before the resource-level rules can take effect.",{"id":786,"title":787,"titles":788,"content":789,"level":288},"\u002Fdocs\u002Fconfiguration#enabledsites-vs-disabledsites-navigation-level-control","enabledSites vs. disabledSites: Navigation-Level Control",[725,747,752,782],"These rules determine if a page navigation is eligible for acceleration by Speed Kit. They are the first layer of control that operates on a page-by-page basis. If enabledSites is not defined, all pages are considered enabled by default. Similarly, if disabledSites is not defined, no pages are disabled by default. A page must match an enabledSite rule and must not match a disabledSite rule to be considered for acceleration. enabledSites: This property defines which pages and sections of your site are eligible to be accelerated. It's often used as an explicit allowlist for acceleration.disabledSites: This property defines pages that should be explicitly excluded from acceleration. A page on the disabledSites list will not be accelerated, even if it also matches an enabledSites rule.",{"id":791,"title":792,"titles":793,"content":794,"level":299},"\u002Fdocs\u002Fconfiguration#example-combining-enabledsites-and-disabledsites","Example: Combining enabledSites and disabledSites",[725,747,752,782,787],"This configuration ensures that Speed Kit's core logic is only active on the homepage, category pages, and product detail pages. A specific sub-page within the category section is then explicitly excluded. window.speedKit = {\n  \u002F\u002F... other properties\n  enabledSites: [\n    {\n      pathname: [\n        \u002F^\\\u002F$\u002F, \u002F\u002F Home\n        \u002F^\\\u002Fen\\\u002F$\u002F, \u002F\u002F Home\n        \u002F\\\u002Fcategory\u002Fi, \u002F\u002F Category & PLP\n        \u002F\\\u002Fproduct\u002Fi, \u002F\u002F PDP\n      ],\n    },\n  ],\n  disabledSites: [\n    {\n      pathname: \u002F\\\u002Fcategory\\\u002Fspecific-page-to-exclude\u002Fi,\n    },\n  ],\n};",{"id":796,"title":797,"titles":798,"content":799,"level":282},"\u002Fdocs\u002Fconfiguration#whitelist-vs-blacklist-resource-level-control","Whitelist vs. Blacklist: Resource-Level Control",[725,747,752],"The whitelist and blacklist are a granular layer of control that operates on pages already enabled for acceleration. They are used to define which specific resources (e.g., images, scripts, fonts) should be accelerated. A resource is accelerated only if it is on the whitelist and is not on the blacklist. The blacklist always takes precedence. Whitelist: Used to explicitly enable acceleration for specific first- and third-party resources and content types (e.g., HTML, images, CSS, or scripts from a third-party CDN).Blacklist: Used to explicitly prevent acceleration for specific resources or content types that are problematic, such as those with non-deterministic query parameters or sensitive data (e.g., certain third-party scripts, video files, or PDFs). These rules are a more granular layer of control that operates only on pages that are already confirmed as an enabled site. They are used to define which specific resources on those pages should be accelerated. A navigation or resource will only be accelerated if it is explicitly whitelisted and is not on the blacklist. The blacklist always takes precedence over the whitelist.",{"id":801,"title":802,"titles":803,"content":804,"level":288},"\u002Fdocs\u002Fconfiguration#example-a-typical-whitelist-configuration","Example: A typical whitelist configuration",[725,747,752,797],"window.speedKit = {\n  \u002F\u002F... other properties\n  whitelist: [\n    {\n      host: \"www.example.com\",\n      contentType: [\"navigate\"],\n    },\n    {\n      host: [\"fonts.googleapis.com\", \"fonts.gstatic.com\"],\n      contentType: [\"script\", \"style\", \"font\"],\n    },\n  ],\n}; The first rule whitelists all navigable content (i.e., HTML pages) for the enabled hosts.The second rule whitelists all script, style, and font files from Google's content delivery network (CDN). This is a common practice to accelerate third-party assets like Google Fonts.",{"id":806,"title":807,"titles":808,"content":809,"level":288},"\u002Fdocs\u002Fconfiguration#example-a-typical-blacklist-configuration","Example: A typical blacklist configuration",[725,747,752,797],"window.speedKit = {\n  \u002F\u002F... other properties\n  blacklist: [ \n    {\n      \u002F\u002F Exclude specific content types\n      contentType: [\"audio\", \"video\", \"pdf\"],\n     }, \n     {\n       \u002F\u002F Exclude specific third-party domains\n      host: [\"adition.com\", \"imagesrv.adition.com\",\n      \"connect.facebook.net\"],\n     },\n     {\n       \u002F\u002F Exclude resources with specific query parameters\n       url: [\u002F[?&]nocache\u002Fi, \u002F\\?time=\\d+\u002Fi],\n    },\n    {\n      \u002F\u002F Exclude all resources from a specific path\n       pathname: [\u002F\\\u002Fbackend\u002Fi],\n      },\n    },\n  ],\n}; This blacklist ensures that any request matching these paths or URLs will not be accelerated, providing a safety net for business-critical and security-sensitive sections of your site.",{"id":811,"title":812,"titles":813,"content":814,"level":288},"\u002Fdocs\u002Fconfiguration#example-optimize-images-on-the-cart-page","Example: Optimize images on the cart page",[725,747,752,797],"Despite the cart page not being cached or accelerated, we still aim to optimize its images. window.speedKit = {\n  \u002F\u002F... other properties\n  enableSites: [\n    {\n      pathname: [\"\u002Fproduct\", \"\u002Fcart\"]\n    },\n  ],\n  blacklist: [ \n    {\n      \u002F\u002F Cart navigation is not accelerated\n      pathname: \"\u002Fcart\",\n    }, \n  ],\n  whitelist: [\n    {\n  \u002F\u002F Images on the cart page are accelerated        \n  host: \"images.example.com\",\n    },\n  ],\n};",{"id":816,"title":817,"titles":818,"content":230,"level":236},"\u002Fdocs\u002Fconfiguration#advanced-configuration","Advanced Configuration",[725,747],{"id":820,"title":821,"titles":822,"content":823,"level":282},"\u002Fdocs\u002Fconfiguration#image-optimization","Image Optimization",[725,747,817],"Speed Kit provides powerful, browser-aware image optimization. Since most customers already use an existing image optimization solution, this feature is optional and should only be enabled when no other solution is in place to avoid technical conflicts. We offer this feature for clients that currently do not have a dedicated image optimization solution. For more detailed information on available settings, refer to the ImageOptions interface specification. image: This property allows you to fine-tune the image optimization settings. quality: You can set the compression quality (high, medium, or low), which corresponds to the level of visual fidelity.webp: A boolean flag to enable or disable WEBP delivery. Default is true.avif: A boolean flag to enable or disable AVIF delivery. Default is false. Note on AVIF & WEBP: Do not activate AVIF if your origin server delivers WEBP images, as converting an already compressed image to AVIF can introduce visible artifacts. AVIF is delivered only when enabled and supported by the browser; otherwise, the system automatically delivers WEBP as a fallback.",{"id":825,"title":762,"titles":826,"content":827,"level":288},"\u002Fdocs\u002Fconfiguration#example-1",[725,747,817,821],"window.speedKit = {\n  \u002F\u002F... other properties\n  image: {\n    quality: \"high\", \u002F\u002F Default is \"medium\"\n    webp: true, \u002F\u002F Default is \"true\"\n    avif: true, \u002F\u002F Default is \"false\"\n  },\n  whitelist: [\n    {\n      host: \"images.example.com\",\n      contentType: [\"image\"],\n    },\n  ],\n};",{"id":829,"title":830,"titles":831,"content":832,"level":282},"\u002Fdocs\u002Fconfiguration#stripping-query-parameters","Stripping Query Parameters",[725,747,817],"To improve your cache hit ratio, Speed Kit can be configured to strip query parameters that are used for tracking or analytics but do not change the page's content. A unique URL with a different query parameter would otherwise be treated as a separate page, leading to a cache miss. This configuration only affects the URL used to load the resource from Speed Kit's cache. The URL visible in the user's browser is not changed. Additionally, the original URL with all of its parameters is still used for the request to your origin server, ensuring that all backend logic, tracking, and analytics function correctly.",{"id":834,"title":762,"titles":835,"content":836,"level":288},"\u002Fdocs\u002Fconfiguration#example-2",[725,747,817,830],"window.speedKit = {\n  stripQueryParams: [\n    {\n      params: [\n        \u002F\u002F Analytics and Tracking:\n        \"_ga\",\n        \"_gl\",\n        \"fbclid\",\n        \"utm_campaign\",\n        \"utm_medium\",\n        \"utm_source\",\n        \"msclkid\",\n        \"gclid\",\n        \"srsltid\",\n      ],\n    },\n  ],\n}; As with other rules, you can also add a rule set to a specific parameter, allowing you to only strip that parameter on a specific page or URL pattern. For example, stripping a search query parameter on a page where it's not relevant. window.speedKit = {\n  stripQueryParams: [\n     { \n       pathname: \u002F^\\\u002Fsearch-results\u002F,\n  params: [\"q\"],\n},\n  ],\n};",{"id":838,"title":839,"titles":840,"content":841,"level":282},"\u002Fdocs\u002Fconfiguration#user-agent-device-detection","User Agent & Device Detection",[725,747,817],"For websites with separate mobile and desktop versions, Speed Kit can replicate your server-side logic to serve the correct cached version to the user. userAgentDetection: A boolean that, when set to true, enables an internal User Agent detection. This feature uses a standard set of rules to determine whether a user is on a desktop or mobile device.detectDevice: This advanced property takes a function that accepts the document's HTML as an argument. Its primary purpose is to extract the device type directly from the origin HTML response, ensuring Speed Kit's device detection logic is perfectly aligned with your backend. You should use this function to check for a specific indicator that your server-side code adds, such as a CSS class or a meta tag that is only present on the mobile or desktop version of the page. This guarantees that Speed Kit serves the correct, device-specific cached content to the user.",{"id":843,"title":762,"titles":844,"content":845,"level":288},"\u002Fdocs\u002Fconfiguration#example-3",[725,747,817,839],"window.speedKit = {\n  \u002F\u002F... other properties\n  userAgentDetection: true,\n  detectDevice: (doc) => {\n    \u002F\u002F Check for a specific CSS class to determine the device type\n    return doc.querySelector(\".mobile,.is-mobile\") ? \"mobile\" : \"desktop\";\n  },\n};",{"id":847,"title":848,"titles":849,"content":230,"level":236},"\u002Fdocs\u002Fconfiguration#documenting-and-maintaining-your-configuration","Documenting and Maintaining Your Configuration",[725,747],{"id":851,"title":852,"titles":853,"content":854,"level":282},"\u002Fdocs\u002Fconfiguration#the-configuration-dashboard","The Configuration Dashboard",[725,747,848],"The Speed Kit Dashboard provides a central location for you to manage, view, and test your configuration. The Speed Kit Dashboard provides a central location for you to manage, view, and test your configuration. You can create and test multiple configurations before deploying them to your live site. For more detailed information on this process, refer to the \"Quality Assurance: How to Test Speed Kit\" documentation.",{"id":856,"title":857,"titles":858,"content":859,"level":282},"\u002Fdocs\u002Fconfiguration#best-practices","Best Practices",[725,747,848],"Keep it clean: Avoid overly complex configurations. Start with simple rules and add complexity only when a specific use case requires it.Prioritize the blacklist: When in doubt, it is safer to blacklist a page or resource to prevent unwanted side effects.Communicate planned changes: Inform Speed Kit about any planned changes that require a configuration update: Website Changes Requiring Speed Kit Configuration Updates for Optimal Performance.Leverage our experts: Our Product Integration team and web performance specialists are trained to build and maintain these configurations. They can help you with complex scenarios and ensure your configuration is always optimized for your specific needs. html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":861,"title":862,"titles":863,"content":864,"level":259},"\u002Fdocs\u002Fcontent-delivery-networks","Content Delivery Networks (CDN)",[],"How Speed Kit complements any CDN by accelerating the dynamic, personalized HTML that CDNs cannot cache, forming a complete two-pillar performance architecture.",{"id":866,"title":867,"titles":868,"content":230,"level":231},"\u002Fdocs\u002Fcontent-delivery-networks#how-speed-kit-complements-your-cdn","How Speed Kit Complements Your CDN",[862],{"id":870,"title":18,"titles":871,"content":872,"level":236},"\u002Fdocs\u002Fcontent-delivery-networks#key-takeaways",[862,867],"Distinct Roles for Complete Performance: Content Delivery Networks (CDNs) master static content delivery, while Speed Kit specializes in accelerating the dynamic and personalized HTML that CDNs cannot cache, solving the main bottleneck for e-commerce sites.Browser-Side Power for Instant Speed: Speed Kit's unique value comes from its Service Worker, which operates in the browser to cache dynamic HTML and predictively preload navigations, making an instant user experience possible.A Symbiotic Partnership: Speed Kit integrates seamlessly with any CDN without DNS changes, creating a robust, multi-layered architecture where each system handles the tasks it excels at, ensuring maximum performance and reliability. In fact, the vast majority of Speed Kit customers run it on top of leading CDNs such as Akamai, Cloudflare, Fastly, and CloudFront.",{"id":874,"title":45,"titles":875,"content":876,"level":236},"\u002Fdocs\u002Fcontent-delivery-networks#introduction",[862,867],"For modern e-commerce websites, achieving true \"instant\" speed requires solving two fundamentally different performance challenges. The first is the global delivery of static assets like images, CSS, and JavaScript files. The second challenge is the rapid delivery of dynamic, often personalized, HTML documents that form the core of the user experience. A Content Delivery Network (CDN) is the industry-standard solution for delivering static content. However, it cannot effectively accelerate dynamic HTML. Because e-commerce HTML is dynamic and unique to a user or session, it's typically uncacheable for a CDN, forcing slow and costly requests back to the origin server for every page view. The rapid delivery of dynamic, often personalized, HTML documents that form the core of the user experience is the critical performance gap that Speed Kit is engineered to fill. Speed Kit is not a feature that enhances a CDN; it is a powerful, distinct technology that provides the missing solution for dynamic content acceleration. By creating a symbiotic partnership between your CDN and Speed Kit, you establish a complete, two-pillar performance architecture that addresses both static and dynamic content, transforming fast-loading pages into a truly instant experience.",{"id":878,"title":879,"titles":880,"content":881,"level":236},"\u002Fdocs\u002Fcontent-delivery-networks#the-two-pillars-of-web-acceleration","The Two Pillars of Web Acceleration",[862,867],"A complete performance strategy requires two specialized technologies working in tandem. Each pillar addresses a different part of the performance equation.",{"id":883,"title":884,"titles":885,"content":886,"level":282},"\u002Fdocs\u002Fcontent-delivery-networks#pillar-1-the-cdn-for-global-static-asset-delivery","Pillar 1: The CDN for Global Static Asset Delivery",[862,867,879],"A CDN is a standard component of modern web infrastructure. Its primary role is to create a globally distributed network for static files. Static File Acceleration: CDNs cache and deliver static assets (images, CSS, JS, web fonts) from edge servers close to the user, which reduces loading times.Security & Reliability: They provide security features like DDoS mitigation and a Web Application Firewall (WAF), improved uptime, and load balancing.Network Optimizations: They can leverage features like Early Hints and Zero Round-Trip Resumption (RTT-0) to speed up the initial page load.The Inherent Limitation: The functionality of a CDN is limited to static, cacheable content. It cannot cache HTML that is personalized or changes frequently (e.g., with prices or stock levels), which is the standard for e-commerce. This leaves the performance bottleneck of HTML delivery unsolved.",{"id":888,"title":889,"titles":890,"content":891,"level":282},"\u002Fdocs\u002Fcontent-delivery-networks#pillar-2-speed-kit-for-dynamic-and-instant-experiences","Pillar 2: Speed Kit for Dynamic and Instant Experiences",[862,867,879],"Speed Kit is the specialized solution for the dynamic content problem, delivering the fastest experience technically possible. This is achieved by predicting a user's next move and, in Chromium-based browsers, pre-rendering the entire page before they even click. This powerful predictive prerendering is made possible by Speed Kit's foundational enabling technology: dynamic caching.",{"id":893,"title":894,"titles":895,"content":896,"level":288},"\u002Fdocs\u002Fcontent-delivery-networks#predictive-prerendering-for-instant-navigations","Predictive Prerendering for Instant Navigations",[862,867,879,889],"Speed Kit's core advantage is its ability to make navigations feel truly instant by loading and rendering pages before they are requested. Data-Driven Predictions: The system uses Real User Monitoring (RUM) data to collect anonymous navigation patterns from your traffic.Client-side AI Model: This data is used to train a sophisticated but lightweight prediction model that runs directly in the user’s browser. With an accuracy higher than 85%, it anticipates the next page a user is likely to visit.Instant Navigation: Based on this prediction, Speed Kit pre-fetches and pre-renders the required page in the background. When the user clicks the link, the page is already prepared and can be displayed instantly. To learn more, see our Predictive Preloading Documentation.",{"id":898,"title":899,"titles":900,"content":901,"level":288},"\u002Fdocs\u002Fcontent-delivery-networks#dynamic-html-caching-the-enabling-technology","Dynamic HTML Caching: The Enabling Technology",[862,867,879,889],"This predictive power would be useless without a safe and reliable way to store dynamic pages in the browser. Speed Kit’s foundational innovation is its ability to do just that. To safely preload content, we first had to solve the challenge of caching dynamic HTML and keeping it perfectly synchronized with your server. This is achieved with a multi-layered system where content is held in a backend cache, distributed globally via an Edge Cache (CDN), and finally stored in a Service Worker cache in the browser. Furthermore, Speed Kit enhances the Edge Cache layer with a feature traditional CDNs typically lack: data-driven pre-warming. By analyzing RUM data, our system learns which content is most popular in specific geographic regions. It then automatically pre-warms the cache on the corresponding CDN edge nodes, ensuring that assets for over 95% of user traffic are already waiting at the closest location. This intelligent pre-warming leads to a cache-hit ratio that far exceeds standard CDNs and is a critical foundation for predictive prerendering. To keep the final layer—the powerful browser cache—up-to-date, Speed Kit uses several automated methods, including crowd-sourced change detection, where real user traffic helps identify stale content and trigger updates across the entire system. For a detailed explanation, see our Dynamic Caching Documentation.",{"id":903,"title":904,"titles":905,"content":906,"level":236},"\u002Fdocs\u002Fcontent-delivery-networks#why-both-pillars-are-essential","Why Both Pillars Are Essential",[862,867],"Relying on only one of these pillars leaves a significant performance opportunity on the table. A CDN Alone is Not Enough: Without Speed Kit, your site's HTML is forced to make a slow round trip to your origin server for every page view. This negatively impacts key metrics like Time to First Byte (TTFB), Largest Contentful Paint (LCP), and ultimately, conversion rates. Your static assets may load quickly, but the core user experience remains slow.A Complete, Optimized System: By combining both, you create a comprehensive solution. The CDN handles the heavy lifting for static assets and security, while Speed Kit focuses on delivering the instant HTML experience that directly drives user engagement and business KPIs.",{"id":908,"title":909,"titles":910,"content":911,"level":236},"\u002Fdocs\u002Fcontent-delivery-networks#a-symbiotic-architecture-how-they-work-together","A Symbiotic Architecture: How They Work Together",[862,867],"ntegrating Speed Kit and a CDN creates a powerful architecture where each system operates independently but collaboratively. This integration is designed to be seamless and safe. Independent Operation: Speed Kit's integration via a JavaScript tag and a Service Worker means it requires no DNS changes and operates independently of your CDN and hosting infrastructure.Collaborative Flow: When a user navigates your site, the two systems work in parallel. The browser requests assets; the CDN intercepts and serves all static files from its edge cache, while the Speed Kit Service Worker intercepts the HTML request and serves it instantly from its browser-side cache.Built-in Reliability: The architecture is inherently robust. In the rare event of a failure, Speed Kit's Service Worker is designed to deactivate automatically, allowing your site to load normally through your CDN and origin, ensuring your website is always available. You retain full control to deactivate the system at any time via the dashboard.",{"id":913,"title":914,"titles":915,"content":916,"level":236},"\u002Fdocs\u002Fcontent-delivery-networks#addressing-single-page-applications-spas","Addressing Single-Page Applications (SPAs)",[862,867],"This two-pillar approach is equally critical for modern Single-Page Applications (SPAs). While a CDN still handles the initial load of the static application shell and its assets, Speed Kit specializes in accelerating the dynamic \"soft navigations\" that happen within the app. It achieves this by caching API calls and transforming slow client-side rendering into instant hard navigations, solving a performance blind spot that is invisible to traditional tools. For a detailed explanation of these specialized techniques, please refer to our documentation on Accelerating Single-Page Applications (SPAs) with Speed Kit.",{"id":918,"title":919,"titles":920,"content":921,"level":259},"\u002Fdocs\u002Fdata-compliance","Data Compliance",[],"An overview of Speed Kit's GDPR compliance, data processing, cookie consent classification, privacy-preserving AI, and verified security measures.",{"id":923,"title":924,"titles":925,"content":230,"level":231},"\u002Fdocs\u002Fdata-compliance#speed-kit-and-data-compliance-an-overview-of-gdpr-security-and-consent","Speed Kit and Data Compliance: An Overview of GDPR, Security, and Consent",[919],{"id":927,"title":18,"titles":928,"content":929,"level":236},"\u002Fdocs\u002Fdata-compliance#key-takeaways",[919,924],"Privacy-Centric by Design: Speed Kit is engineered for full GDPR compliance, from its core architecture to its privacy-preserving AI models for predictive preloading, all governed by a default Data Processing Addendum (DPA).Simplified Consent Management: Speed Kit's core functions and associated cookies are classified as \"technically necessary\" under the German TDDDG (§ 25) and GDPR, meaning they typically do not require explicit user consent via a cookie banner.Independently Verified Security: Our comprehensive security posture is validated through regular external audits, including a review of our Technical and Organizational Measures (TOMs) and continuous penetration testing, giving you documented assurance.",{"id":931,"title":45,"titles":932,"content":933,"level":236},"\u002Fdocs\u002Fdata-compliance#introduction",[919,924],"In today's e-commerce landscape, data protection isn't just a legal requirement—it's a cornerstone of customer trust. For business and technical leaders, ensuring that every tool in your stack meets rigorous standards like the GDPR is paramount. Speed Kit was built from the ground up with a security-first and privacy-by-design philosophy. Our platform is engineered to deliver maximum website performance while upholding the strictest data protection principles. This document provides a comprehensive overview of our approach to data security, GDPR compliance, and cookie consent. We detail our legal framework, technical safeguards, and the practical steps for integrating Speed Kit into your privacy strategy. Our commitment to transparency and security is trusted by leading enterprises with stringent data protection requirements, including OBI, O2\u002FTelefónica, and BMW.",{"id":935,"title":936,"titles":937,"content":938,"level":236},"\u002Fdocs\u002Fdata-compliance#our-commitment-to-gdpr-and-data-protection","Our Commitment to GDPR and Data Protection",[919,924],"We provide a clear, robust, and transparent legal framework to ensure our partnership is built on a foundation of trust and compliance.",{"id":940,"title":941,"titles":942,"content":943,"level":282},"\u002Fdocs\u002Fdata-compliance#the-data-processing-addendum-dpa","The Data Processing Addendum (DPA)",[919,924,936],"The central document governing our data processing relationship is the Speed Kit Data Processing Addendum (DPA). Standardized and Compliant: Our DPA is based on the EU Commission's standard contractual clauses (SCCs) for processors (Implementing Decision 2021\u002F915), ensuring it meets the requirements of Art. 28 GDPR without needing extensive legal review.Integrated by Default: The DPA is automatically incorporated into every service agreement via our General Terms and Conditions (T&Cs), ensuring this critical legal safeguard is always in place.Easily Accessible: For your records, a pre-signed version of the DPA is always available for download from our legal page at www.speedkit.com\u002Flegal.",{"id":945,"title":946,"titles":947,"content":948,"level":282},"\u002Fdocs\u002Fdata-compliance#data-processing-and-storage","Data Processing and Storage",[919,924,936],"We believe in data minimization and transparency. Here’s a clear breakdown of what data we process, why, and where it is stored.",{"id":950,"title":951,"titles":952,"content":953,"level":288},"\u002Fdocs\u002Fdata-compliance#data-flow-overview","Data Flow Overview",[919,924,936,946],"Speed Kit processes a minimal amount of data required to accelerate your website and monitor performance. The data flow is designed for security and efficiency: Browser: A user's browser sends requests for your site's content. The Speed Kit Service Worker intercepts these requests, acting as a client-side proxy. It instantly delivers the cached page from the Speed Kit infrastructure while simultaneously fetching live, dynamic data from your origin server to merge in the browser.Network (CDN): Cached, static content is delivered instantly from Fastly's globally distributed Content Delivery Network (CDN).Backend (Speed Kit Service): The Speed Kit backend, hosted on AWS in Frankfurt, Germany, anonymizes data, fetches content from your origin, and manages the caches.Analytics & Storage: Anonymized performance data is processed and stored in our AWS infrastructure for analysis.",{"id":955,"title":956,"titles":957,"content":958,"level":288},"\u002Fdocs\u002Fdata-compliance#what-we-process","What We Process",[919,924,936,946],"Data Subjects: Visitors to the customer's website.Categories of Data:IP Addresses: Anonymized immediately upon receipt. For storage, IP addresses are both truncated (the last 8 bits for IPv4 and the last 80 bits for IPv6 are removed) and stored as an HMAC hash with a daily rotating key to prevent re-identification.Anonymous Identifiers: Randomly generated user and session IDs for performance analysis and bot detection. These IDs contain no personal information.Website Interactions: Performance metrics (e.g., page load times) and accessed URLs (without personal components) are collected to ensure service quality.Purpose of Processing: To accelerate website delivery, ensure system security (e.g., bot and DDoS protection), and analyze performance for continuous improvement. No personal profiles are created, and no data is used for marketing or retargeting.",{"id":960,"title":961,"titles":962,"content":963,"level":288},"\u002Fdocs\u002Fdata-compliance#sub-processors-and-data-locations","Sub-processors and Data Locations",[919,924,936,946],"We partner with leading infrastructure providers to deliver our service. All sub-processors are vetted for their security and compliance standards. Primary Backend Location: Our core application servers and primary data storage are located within the European Union at Amazon Web Services (AWS) data centers in Frankfurt, Germany.Content Delivery Network (CDN): Fastly, Inc. provides a globally distributed CDN to deliver cached content from the edge server closest to the user. Data transfer is protected by Standard Contractual Clauses and Fastly's certification under the EU-U.S. Data Privacy Framework. Customers can optionally limit data transfer to Fastly's EU infrastructure.Data Analytics: Hex Technologies, Inc. provides a platform for data science and analysis, hosted in AWS EU data centers. Access from the USA for support is safeguarded by SCCs and Hex's DPF certification.",{"id":965,"title":966,"titles":967,"content":968,"level":236},"\u002Fdocs\u002Fdata-compliance#cookies-consent-and-real-user-monitoring-rum","Cookies, Consent, and Real User Monitoring (RUM)",[919,924],"Speed Kit's use of cookies is limited, purposeful, and designed to comply with privacy regulations, simplifying your consent management obligations.",{"id":970,"title":971,"titles":972,"content":973,"level":282},"\u002Fdocs\u002Fdata-compliance#how-speed-kit-uses-cookies","How Speed Kit Uses Cookies",[919,924,966],"Speed Kit uses two first-party cookies, which are entries in localStorage, to ensure the reliability and security of our service. baqend-speedkit-config: This stores configuration parameters (e.g., { \"group\": \"A\", \"testId\": \"10vs100\" }) to manage phased rollouts and A\u002FB tests. This ensures that any changes are deployed safely without impacting all users at once.baqend-speedkit-user-id: This stores a randomly generated, anonymous visitor ID (e.g., R2fUvr6CsPpO0Hm4RDelAnYEj). It is used to correlate performance data across multiple page views to identify returning user issues, detect anomalous bot behavior, and analyze performance trends.",{"id":975,"title":976,"titles":977,"content":978,"level":282},"\u002Fdocs\u002Fdata-compliance#consent-management-why-speed-kit-is-technically-necessary","Consent Management: Why Speed Kit is \"Technically Necessary\"",[919,924,966],"A key advantage of Speed Kit is that its use generally does not require prior consent in a cookie banner. Legal Basis (ePrivacy): Under Germany's TDDDG (§ 25), which implements the ePrivacy Directive, storing information on a user's device is exempt from consent if it is \"absolutely necessary\" to provide a service \"expressly requested\" by the user.Our Justification:Speed Kit provides core functionalities for website security, stability, and speed, which are considered part of the basic service requested by a visitor.The cookies we set are absolutely necessary for these functions, such as preventing errors during rollouts and detecting security threats like bots.Therefore, setting these cookies falls under the \"technically necessary\" exemption.Legal Basis (GDPR): The subsequent processing of the (anonymized) data is based on Legitimate Interest (Art. 6(1)(f) GDPR). Our legitimate interest is ensuring the secure, stable, and high-performance operation of our customers' websites. This classification means that Speed Kit's acceleration and RUM tracking can be active by default, ensuring maximum performance gains and data coverage even if a user rejects optional cookies.",{"id":980,"title":981,"titles":982,"content":983,"level":236},"\u002Fdocs\u002Fdata-compliance#integrating-speed-kit-with-your-consent-tools-and-policies","Integrating Speed Kit with Your Consent Tools and Policies",[919,924],"For full transparency with your users, you should account for Speed Kit in your consent management platform (CMP) and your website's main privacy policy.",{"id":985,"title":986,"titles":987,"content":988,"level":282},"\u002Fdocs\u002Fdata-compliance#for-your-cookie-banner-cmp","For Your Cookie Banner \u002F CMP",[919,924,981],"The following information can be used as a template to describe Speed Kit within your cookie consent tool. As Speed Kit is classified as \"technically necessary,\" it should be listed under this category and enabled by default. Description and purpose of data processing The use of Speed Kit serves to accelerate the delivery and display of our website. It is technically necessary to transmit the accessed URL and the visitor's IP address to the Speed Kit provider. IP addresses are immediately anonymized. Speed Kit uses cookies for security purposes (e.g., bot detection) and to analyze performance and detect misconfigurations. No personal profiles are created. As part of this process, Speed Kit uses Fastly, a Content Delivery Network (CDN), to deliver content from a server geographically close to the user. Processor Baqend GmbH, Stresemannstraße 23, 22769 Hamburg, Germany, acts as a processor based on a Data Processing Addendum (Art. 28 GDPR). Categories of personal data processed IP address (anonymized), Requested URL, User Agent, Anonymous user & session ID. Legal basis Art. 6(1)(f) GDPR (Legitimate interests in a secure and performant website); § 25(2) No. 2 TDDDG (Technically necessary). Place of processing European Union; worldwide for the Content Delivery Network. Storage period The storage period for cookies is 6 months.",{"id":990,"title":991,"titles":992,"content":993,"level":282},"\u002Fdocs\u002Fdata-compliance#for-your-privacy-policy","For Your Privacy Policy",[919,924,981],"If you need example text for describing Speed Kit's function in your main data privacy policy, we recommend adapting the text from our own policy, which is always kept up-to-date. To ensure your policy remains accurate, we advise against copying a static version of the text. Instead, we recommend you refer to the live version on our website as a reference. Reference Text: You can refer to section 3.2 (\"Speed Kit\") of the Baqend privacy policy https:\u002F\u002Fwww.speedkit.com\u002Fprivacy.",{"id":995,"title":996,"titles":997,"content":998,"level":236},"\u002Fdocs\u002Fdata-compliance#data-processing-and-ai-for-predictive-preloading","Data Processing and AI for Predictive Preloading",[919,924],"Our Predictive Preloading feature uses AI models to anticipate a user's next navigation, enabling pages to be loaded before they are even clicked. This section clarifies the data processing involved in training and operating these models, ensuring full transparency.",{"id":1000,"title":1001,"titles":1002,"content":1003,"level":282},"\u002Fdocs\u002Fdata-compliance#what-data-is-used-for-model-training","What Data is Used for Model Training?",[919,924,996],"The prediction models are trained exclusively using anonymous, aggregated RUM signals collected from pages accelerated by Speed Kit. No personal data is ever used.",{"id":1005,"title":1006,"titles":1007,"content":1008,"level":288},"\u002Fdocs\u002Fdata-compliance#data-from-sensitive-areas-is-excluded","Data from Sensitive Areas is Excluded",[919,924,996,1001],"We do not use training data for links pointing to areas excluded from Speed Kit's acceleration, such as checkout funnels or user account sections.",{"id":1010,"title":1011,"titles":1012,"content":1013,"level":288},"\u002Fdocs\u002Fdata-compliance#anonymous-link-characteristics","Anonymous Link Characteristics",[919,924,996,1001],"The models learn from the characteristics of both clicked and non-clicked links, aggregated across all users, without any personal reference. These characteristics include: The size, area, and position of a link within the viewport.User interactions like scroll speed, scroll position, and the number of visible links.General device information such as screen resolution and device type.",{"id":1015,"title":1016,"titles":1017,"content":1018,"level":282},"\u002Fdocs\u002Fdata-compliance#data-isolation-and-model-training","Data Isolation and Model Training",[919,924,996],"We adhere to a strict data segregation policy to protect the integrity of your data. Customer-Specific Models: Your data is never used to train a generic, global model. The AI model active on your website is trained exclusively with your site's own anonymous, aggregated data.Algorithm Improvement: Improvements to our general prediction algorithms are derived from abstract performance observations and research. We do not use or share customer-specific datasets to enhance our core algorithms.",{"id":1020,"title":1021,"titles":1022,"content":1023,"level":282},"\u002Fdocs\u002Fdata-compliance#model-retraining-and-maintenance","Model Retraining and Maintenance",[919,924,996],"Our AI models are designed to be robust and are continuously maintained to ensure high performance. Training Frequency: Models are retrained at a configurable interval, which is set to weekly by default. They are robust because they learn from stable navigation and link characteristics.Performance-Triggered Retraining: If our RUM metrics detect a significant performance regression in the prediction quality, a retraining of the model is automatically triggered to adapt to any changes.",{"id":1025,"title":1026,"titles":1027,"content":1028,"level":282},"\u002Fdocs\u002Fdata-compliance#policy-on-third-party-ai-services","Policy on Third-Party AI Services",[919,924,996],"We maintain full control over our AI infrastructure and do not share data with external providers. No Data Sharing: We do not share any data with OpenAI, Google, or any similar third-party AI service providers.Internal Models: We exclusively train and operate our own internal models to ensure the highest level of security and data privacy.",{"id":1030,"title":1031,"titles":1032,"content":1033,"level":282},"\u002Fdocs\u002Fdata-compliance#user-controls-and-opt-out-options","User Controls and Opt-Out Options",[919,924,996],"We provide clear mechanisms for both end-user and customer control over the feature. End-User Opt-Out: You can provide an opt-out option for your website visitors within your privacy policy. If a user opts out, no RUM signals related to predictive preloading will be collected from their session.Complete Feature Deactivation: As a Speed Kit customer, you can request to have the predictive preloading models completely deactivated for your site. Doing so will reduce the effectiveness of the feature, leading to lower prediction accuracy and less lead time for the browser to pre-render pages, which in turn diminishes the overall performance benefit.",{"id":1035,"title":1036,"titles":1037,"content":1038,"level":236},"\u002Fdocs\u002Fdata-compliance#verified-security-technical-measures","Verified Security & Technical Measures",[919,924],"Our commitment to security is not just a promise; it's a core part of our architecture, processes, and culture, validated by external experts.",{"id":1040,"title":1041,"titles":1042,"content":1043,"level":282},"\u002Fdocs\u002Fdata-compliance#our-security-first-architecture","Our Security-First Architecture",[919,924,1036],"We build our systems on industry-recognized security principles to create a resilient, multi-layered defense. Zero-Trust: We operate on the assumption that no user or system should be implicitly trusted. Every interaction requires continuous validation.Assume-Breach: Our systems are designed to limit the blast radius of a potential breach, assuming that an adversary will eventually get in.Defense-in-Depth: We layer multiple defensive mechanisms across our entire technology stack—from the network edge to the application code.Least-Privilege & Need-to-Know: Access to data and systems is granted only with the minimum permissions necessary for a specific task and only for the required duration.",{"id":1045,"title":1046,"titles":1047,"content":1048,"level":282},"\u002Fdocs\u002Fdata-compliance#technical-and-organizational-measures-toms","Technical and Organizational Measures (TOMs)",[919,924,1036],"We have implemented robust TOMs to protect customer data, which are detailed in Annex III of our DPA. These measures are regularly audited by an expert from LUCID Compliance GmbH. The audit confirms the appropriateness and effectiveness of our controls across all key areas: Access Control: Preventing unauthorized access to our data centers and systems.Encryption: All data is encrypted in transit (TLS) and at rest (AES-256).Availability Control: Ensuring resilience against data loss or destruction through redundant systems and regular backups.Separation Control: Logically separating customer data in our multi-tenant environment.Input & Transfer Control: Logging all access and ensuring data is protected during any transfer.",{"id":1050,"title":1051,"titles":1052,"content":1053,"level":282},"\u002Fdocs\u002Fdata-compliance#external-security-audits","External Security Audits",[919,924,1036],"We engage third-party security firms to validate our security posture continuously. Company Security Assessment: Baqend underwent a comprehensive \"inside-out\" security assessment by the defense company CISOCON. This deep-dive review of our technology, processes, and strategy ensures our security program is robust from top to bottom.Continuous Penetration Testing: We use Detectify, a leading penetration testing-as-a-service platform, to conduct continuous, crowdsourced security testing on our external attack surface. This allows us to benefit from the latest research from ethical hackers to identify and remediate vulnerabilities proactively.",{"id":1055,"title":1056,"titles":1057,"content":1058,"level":259},"\u002Fdocs\u002Fdebugging-speed-kit","Debugging Speed Kit",[],"A complete guide to testing and debugging a Speed Kit integration using the browser extension, dashboard, URL parameters, bookmarklet, developer tools, and WebPageTest.",{"id":1060,"title":1061,"titles":1062,"content":230,"level":231},"\u002Fdocs\u002Fdebugging-speed-kit#quality-assurance-how-to-test-speed-kit","Quality Assurance: How to Test Speed Kit",[1056],{"id":1064,"title":18,"titles":1065,"content":1066,"level":236},"\u002Fdocs\u002Fdebugging-speed-kit#key-takeaways",[1056,1061],"Comprehensive Toolkit: Speed Kit provides a full suite of debugging tools, including a browser extension, dashboard controls, URL parameters, a bookmarklet, and powerful console commands, enabling thorough testing across all browsers and devices.Isolate Test Sessions: Speed Kit offers multiple ways to test locally without affecting live users, from bypassing global deactivation with a console command to using separate browser profiles for clean A\u002FB comparisons.In-Depth Diagnostics: Advanced browser developer tools allow you to inspect the live DOM, network requests, and console objects to get a precise understanding of how Speed Kit is optimizing your pages.",{"id":1068,"title":45,"titles":1069,"content":1070,"level":236},"\u002Fdocs\u002Fdebugging-speed-kit#introduction",[1056,1061],"While Speed Kit's Quality Assurance (QA) team rigorously tests every integration before it goes live, we empower our customers with a complete set of tools for their own validation, debugging, and ongoing testing. Understanding these tools is crucial for developers to verify functionality, for QA teams to confirm visual and functional correctness, and for project managers to observe the performance impact firsthand. This guide first outlines common testing scenarios and then provides a comprehensive overview of the available debugging utilities to ensure your Speed Kit integration is flawless.",{"id":1072,"title":1073,"titles":1074,"content":1075,"level":236},"\u002Fdocs\u002Fdebugging-speed-kit#common-testing-qa-scenarios","Common Testing & QA Scenarios",[1056,1061],"This chapter outlines common workflows and best practices for testing your Speed Kit integration. The scenarios described here will reference various debugging utilities (like the browser extension, dashboard, and console commands). For a detailed explanation of each tool, please refer to the \"Testing & Debugging Tools\" section that follows this chapter. To ensure a smooth and successful integration, follow these general best practices when testing Speed Kit. Test on Production: It is highly recommended to test on your production environment before a full rollout. While staging systems are supported, production often has unique configurations and traffic patterns that can reveal different behaviors.Test on Real Mobile Devices: For the most accurate view of the real-world user experience, always test on real, average mobile devices, not just desktop emulators.Use a Clean Browser Profile: When using developer tools for testing, it is best to use a clean or new browser profile. This prevents other browser extensions (like ad blockers) from interfering with page rendering or network activity, ensuring your test results are reliable and accurate.",{"id":1077,"title":1078,"titles":1079,"content":1080,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#verifying-a-correct-installation","Verifying a Correct Installation",[1056,1061,1073],"The easiest way to check the installation is with the Speed Kit browser extension. The \"Status\" tab in the extension provides an automated check that will identify any integration problems and offer a step-by-step guide to fix them.",{"id":1082,"title":1083,"titles":1084,"content":1085,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#testing-speed-kit-locally","Testing Speed Kit Locally",[1056,1061,1073],"To test Speed Kit without impacting live users, the correct method depends on Speed Kit's global status.",{"id":1087,"title":1088,"titles":1089,"content":1090,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#scenario-1-speed-kit-is-globally-disabled","Scenario 1: Speed Kit is Globally Disabled",[1056,1061,1073,1083],"If the service is turned off completely in the dashboard's \"Settings\" tab, it is inactive for all users. To test it in your local session, you must bypass this global deactivation. How to Test: Open the developer console and execute the command SpeedKit.bypassDeactivation(true). This will activate Speed Kit only for your browser, allowing you to test its functionality safely while it remains off for everyone else.",{"id":1092,"title":1093,"titles":1094,"content":1095,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#scenario-2-speed-kit-is-active-at-a-0-split","Scenario 2: Speed Kit is Active at a 0% Split",[1056,1061,1073,1083],"This is a common setup where Speed Kit is active, but 100% of traffic is directed to the control group (the origin). This allows you to easily enable Speed Kit for your session to test.",{"id":1097,"title":1098,"titles":1099,"content":1100,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#how-to-test","How to Test:",[1056,1061,1073,1083,1093],"First, enable Speed Kit for your local session by using the bookmarklet or the ?enableSpeedKit=1 URL parameter.For the most stable testing experience, you can then use the \"Force Speed Kit Response\" toggle in the browser extension's \"Settings\" tab.",{"id":1102,"title":1103,"titles":1104,"content":1105,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#comparing-performance-reliable-ab-testing","Comparing Performance (Reliable A\u002FB Testing)",[1056,1061,1073],"For the most effective visual and performance comparison, it is helpful to view the Speed Kit version and the origin version of your site side-by-side. Split-Screen Workflow: Arrange two browser windows next to each other in a split-screen view. This allows you to interact with both versions simultaneously and spot any differences in layout, functionality, or loading behavior.Isolating Test Groups with Chrome Profiles: The most reliable method to avoid any unwanted side effects is to use two separate Chrome profiles. Create one profile for the \"A\" group (Speed Kit enabled) and another for the \"B\" group (origin\u002Fcontrol). This ensures each session is completely isolated. Use the bookmarklet or URL parameters to assign each profile to the correct group.",{"id":1107,"title":1108,"titles":1109,"content":1110,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#testing-a-new-configuration-in-a-live-environment","Testing a New Configuration in a Live Environment",[1056,1061,1073],"Speed Kit allows you to safely test a new or updated configuration on the live site without activating it for all users. 1. Navigate to the \"Configs\" tab in the Speed Kit Dashboard. 2. Activate the new test configuration by toggling its switch to \"on\". This enables it only for browser sessions where it is explicitly activated via a special link. 3. Click the info icon next to the toggle to get a unique link and QR code. Use this link to test the new configuration in your browser or on other devices. 4. Once you have validated that the new configuration works as expected, you can click the \"Activate\" button to roll it out to all users. The previous configuration will be archived, allowing you to roll back instantly if needed.",{"id":1112,"title":1113,"titles":1114,"content":230,"level":236},"\u002Fdocs\u002Fdebugging-speed-kit#testing-debugging-tools","Testing & Debugging Tools",[1056,1061],{"id":1116,"title":1117,"titles":1118,"content":1119,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#speed-kit-browser-extension-chromium","Speed Kit Browser Extension (Chromium)",[1056,1061,1113],"For users of Chrome, Edge, and other Chromium-based browsers, our browser extension is the most powerful tool for local debugging. Note that some features, such as triggering content updates, require you to be signed in to your Speed Kit Dashboard account. The extension icon provides an at-a-glance status indicator: Grey Rocket: Speed Kit is not active on this page.Blue Rocket: Speed Kit is active, but the current page was served from the origin.Blue Rocket with Green Dot: Success! The page was served by Speed Kit.",{"id":1121,"title":1122,"titles":1123,"content":1124,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#status-tab","Status Tab",[1056,1061,1113,1117],"Installation Check: Instantly verifies if Speed Kit is installed correctly. If any issues are found, it provides clear error messages and a step-by-step guide to resolve them. Turn Speed Kit On\u002FOff: This toggle activates or deactivates Speed Kit only for your local browser session. This is the ideal method for testing and A\u002FB comparisons without affecting any other users.Overall Status: Indicates whether Speed Kit is globally activated for the website in the dashboard and shows the current A\u002FB test traffic distribution (e.g., \"Speed Kit 100% \u002F Control Group 0%\" means all traffic is being served by Speed Kit).Content Served: Shows whether the current page was delivered by Speed Kit or the origin server.",{"id":1126,"title":1127,"titles":1128,"content":1129,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#updates-tab","Updates Tab",[1056,1061,1113,1117],"Manually trigger a content refresh for the current page you are viewing. Note: This action requires you to be logged into the Speed Kit Dashboard.",{"id":1131,"title":1132,"titles":1133,"content":1134,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#settings-tab","Settings Tab",[1056,1061,1113,1117],"The \"Force Speed Kit Response\" toggle is the primary debug mode. When enabled, it forces every request in your local browser to be served by the Speed Kit infrastructure. This mode bypasses the real-time race against the origin and the safety passthrough period after a deployment. It is the recommended mode for reliably testing the Speed Kit version of a page. Note: In some rare scenarios, this function might fail to force a Speed Kit response. You can diagnose this by checking the SpeedKit.lastNavigate.responseCause property in the developer console. If this property shows an error code, a problem has occurred. Please get in touch with our support team for assistance in such cases.",{"id":1136,"title":1137,"titles":1138,"content":1139,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#speed-kit-dashboard-all-browsers","Speed Kit Dashboard (All Browsers)",[1056,1061,1113],"The Speed Kit Dashboard is your central hub for managing and monitoring the service. Several of its features are invaluable for debugging and configuration.",{"id":1141,"title":1132,"titles":1142,"content":1143,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#settings-tab-1",[1056,1061,1113,1137],"The Settings tab provides high-level controls for managing Speed Kit's global state and for testing. Global Activation Switch: This is the master switch for the service. You can globally activate or deactivate Speed Kit for all users with a single click. This acts as a primary kill switch to revert all traffic to the origin if a critical issue is suspected, with the change taking effect globally within a few seconds. Force Speed Kit Response: This feature generates special links that force a response from Speed Kit's infrastructure. By clicking the button, you create links for your origins that can be used to test the active Speed Kit configuration in any browser or on any device. This is ideal for quick validation on mobile devices or in browsers where the extension is not available.",{"id":1145,"title":1146,"titles":1147,"content":1148,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#cache-tab","Cache Tab",[1056,1061,1113,1137],"Use the powerful Cache Explorer to view all files currently stored in Speed Kit's caches. You can filter this list to find specific resources. To verify if a page is cached, you can find its unique cache key in the page's HTML source: \u003Cmeta name=\"baqend:asset_url\" content=\"URL\">. This key represents the URL with non-essential query parameters stripped and can be used to look up the asset in the explorer.",{"id":1150,"title":1127,"titles":1151,"content":1152,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#updates-tab-1",[1056,1061,1113,1137],"This tab provides tools to manage and monitor content freshness. Manual Updates: You can manually trigger a content revalidation job for a single page or a list of URLs. This is essential for testing if recent content changes are being picked up correctly. Scheduled Updates: The schedules for all automatic periodic update jobs can be viewed and configured here.Monitoring Job Status: The dashboard includes an advanced view to monitor the status of all running jobs, including those initiated by our automatic systems. This is particularly useful for checking if a deployment is currently in progress and estimating its duration. Monitoring deployments is important for debugging, as a running deployment can temporarily prevent Speed Kit from serving a cached response.",{"id":1154,"title":1155,"titles":1156,"content":1157,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#configs-tab","Configs Tab",[1056,1061,1113,1137],"This powerful section allows for the detailed management of all Speed Kit rules and settings. Managing Configurations: View a list of all available configurations, including the currently active one and any test configurations.Editing Rules: Here you can adjust critical settings like the blacklist, which excludes specific pages or entire sections of your site from being accelerated by Speed Kit.Activating Configurations: Once a test configuration has been validated, you can roll it out to all users from this tab.",{"id":1159,"title":1160,"titles":1161,"content":1162,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#support-form","Support Form",[1056,1061,1113,1137],"The easiest way to ask for help is via our integrated support form, ensuring our team gets all the context they need to assist you.",{"id":1164,"title":1165,"titles":1166,"content":1167,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#developer-tools-chromium","Developer Tools (Chromium)",[1056,1061,1113],"For deep technical analysis, the browser's built-in developer tools are indispensable for users of Chrome, Edge, and other Chromium-based browsers.",{"id":1169,"title":1170,"titles":1171,"content":1172,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#elements-tab","Elements Tab",[1056,1061,1113,1165],"The Elements tab provides a live view of the rendered DOM and is one of the quickest ways to verify if Speed Kit is active on a page. Inspect the \u003Chtml> Tag: Check the \u003Chtml> tag at the top of the DOM tree. If the page was delivered by Speed Kit, it will initially have the class speed-kit-dynamic-loading. If the page was also prerendered, you will see speed-kit-pre-rendered.Verify the Merge: After the live content from the origin has been merged, the speed-kit-dynamic-loading class is replaced with speed-kit-dynamic-loaded. Seeing this final class confirms that the entire Speed Kit process has been completed successfully. Cache Key: A meta tag, \u003Cmeta name=\"baqend:asset_url\" content=\"URL\">, is added to the \u003Chead>. This contains the normalized URL used as the key in our cache.JavaScript Handling: To prevent issues with personalized or dynamic scripts, all inline JavaScript is removed from the initial HTML and executed later from the origin version. All script tags are moved to the end of the \u003Cbody> and their execution is blocked by a synchronous script (speed-kit-dom-ready.js) until the content merge is complete.Dynamic Fetcher: An inline script is added to manage the content merge process.",{"id":1174,"title":1175,"titles":1176,"content":1177,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#application-tab","Application Tab",[1056,1061,1113,1165],"Navigate to the \"Application\" tab and select \"Service Workers\". Checking the \"Bypass for network\" box will instantly disable Speed Kit for that tab. Unchecking it will re-enable it. This method is the quickest way to switch between the Speed Kit and origin experiences, as it doesn't require the service worker to be fully reinstalled or uninstalled. What it does: This option tells the browser to completely ignore the service worker for that tab. All requests will go directly to the network, as if Speed Kit were not installed. This is ideal for quickly comparing the Speed Kit version against the original site without having to fully uninstall the service worker.Cache Behavior: This method specifically bypasses the Speed Kit service worker and its cache. It does not automatically clear the standard browser HTTP cache (for images, CSS, etc.). To bypass both the service worker and the browser's HTTP cache, you must perform a hard reload (e.g., Cmd+Shift+R on Mac or Ctrl+F5 on Windows) or disable the browser cache in the Developer Tools.Pro-Tip for Comparison: For the cleanest and most reliable A\u002FB comparison, use two different browsers (or a regular and an incognito window). Keep Speed Kit enabled in one and disabled in the other (e.g., using the ?disableSpeedKit=1 URL parameter or the bookmarklet). This allows for a true side-by-side view without altering cache states between reloads.",{"id":1179,"title":1180,"titles":1181,"content":1182,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#network-tab","Network Tab",[1056,1061,1113,1165],"By inspecting the network requests for a page, you can verify how Speed Kit delivered the content. There are two key indicators for service worker activity in the network panel: Cog Icon (⚙️): This icon next to a request indicates that the service worker initiated this network request.Size Column: If a request was fulfilled directly from the service worker's cache without a network call, the Size column will show (from service worker). The following numbered list describes the typical network requests you will see when Speed Kit is active, corresponding to the requests labeled in the screenshot. User Navigation (Intercepted): This is the initial document request that was intercepted by the service worker. Its \"Response\" tab in DevTools shows the actual HTML payload from the winner of the race. If this response contains a Baqend-Created-At header, it confirms that Speed Kit won.Speed Kit Infrastructure Request (optional): This request to the Speed Kit infrastructure only appears if the content cannot be served from a local cache (prerendered or service worker). It is used to fetch the anonymized, cached version of the page from the network (e.g., an edge node).Origin Server Request: This is the parallel network request made to your origin server during the race. Its response always contains the live, personalized HTML. The action taken with this response depends on the outcome of the race:\nIf Speed Kit wins: The response is used to merge dynamic and personalized content into the page.If the Origin wins: The response is shown directly to the user, and no merge process is necessary.Dynamic Merge Process (optional): When Speed Kit serves a cached page, it injects an inline JavaScript at the end of the body called the dynamic fetcher. This entry in the network tab represents the work of that script. When Speed Kit wins the race, the dynamic fetcher uses the response from the 'Origin Server Request' (#3) to merge dynamic and personalized content into the page, ensuring the user always sees the correct version.",{"id":1184,"title":1185,"titles":1186,"content":1187,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#source-tab-debugging-the-merge-process-with-breakpoints","Source Tab: Debugging the Merge Process with Breakpoints",[1056,1061,1113,1165],"This advanced technique allows developers to pause the page rendering at critical moments to inspect the state of the DOM. It is particularly useful for debugging visual glitches or understanding exactly how content is being updated.",{"id":1189,"title":1190,"titles":1191,"content":1192,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#key-breakpoint-locations","Key Breakpoint Locations",[1056,1061,1113,1165,1185],"Before the Merge: Set a breakpoint at the very beginning of the inline \"dynamic fetcher\" script. When the page pauses here, you will see the page exactly as it was served from the Speed Kit cache, before any live content has been merged.After the Merge, Before JavaScript Execution: Set a breakpoint inside the speed-kit-dom-ready.js script. Pausing here allows you to inspect the final, merged DOM structure before it is potentially modified by your application's own scripts.",{"id":1194,"title":1195,"titles":1196,"content":1197,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#how-to-set-a-breakpoint","How to Set a Breakpoint",[1056,1061,1113,1165,1185],"Open the Developer Tools and navigate to the Sources tab.Find the main HTML document or the speed-kit-dom-ready.js file in the file navigator.Click on the line number where you want to pause to set a breakpoint.Reload the page. The browser will pause execution at your breakpoint.",{"id":1199,"title":1200,"titles":1201,"content":1202,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#console-all-browsers","Console (All Browsers)",[1056,1061,1113],"The following JavaScript objects are available for advanced debugging in the developer console of any modern browser (including Chrome, Edge, Opera, Firefox, and Safari). SpeedKit.lastNavigate: Provides detailed information about the last navigation. This includes the responseCause, which explains why a certain response was served. For security reasons, the specific meaning of error codes within this property is not publicly documented. If you encounter an error code, please contact our support team for assistance. Other useful properties include whether the page was prerendered (activateStart: 1) and why an asset was revalidated (e.g., assetCause: UrlCacheSketch). SpeedKit.getTrackedData(): Shows all data collected by the Speed Kit RUM tool for the current session. speedKit: Displays the full Speed Kit configuration object. SpeedKit.dynamicBlocks: Shows information about the content merge process. The changes section lists any elements that were different between the cached and origin versions, which is useful for debugging change detection.",{"id":1204,"title":1205,"titles":1206,"content":1207,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#url-parameters-all-browsers","URL Parameters (All Browsers)",[1056,1061,1113],"URL parameters provide a simple way to control Speed Kit's behavior directly in the browser's address bar, which is especially useful in scenarios where the browser extension is not available, for example, on mobile devices. ?disableSpeedKit=1: Add to any URL to disable Speed Kit in your browser.?enableSpeedKit=1: Use this to re-enable it.",{"id":1209,"title":1210,"titles":1211,"content":230,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#speed-kit-bookmarklet-all-browsers","Speed Kit Bookmarklet (All Browsers)",[1056,1061,1113,1205],{"id":1213,"title":1214,"titles":1215,"content":1216,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#installation","Installation",[1056,1061,1113,1205,1210],"1. Open your browser and navigate to https:\u002F\u002Fscripts.baqend.com\u002Fbookmarklet\u002F. 2. Copy the code snippet provided on the page. 3. Create a new bookmark in your browser. 4. Edit the bookmark and paste the copied code into the URL or address field. 5. Save the bookmark. Pro-Tip for Developers: Instead of creating a bookmark, you can copy the script and paste it directly into your browser's developer console. Executing the script will immediately trigger the same pop-up.",{"id":1218,"title":1219,"titles":1220,"content":1221,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#usage","Usage",[1056,1061,1113,1205,1210],"Navigate to the website where Speed Kit is installed.Click the Speed Kit bookmarklet or run the script in the console.A popup will appear, displaying the current status and debug information, such as the responseCause. This is particularly useful for quickly checking Speed Kit's behavior on mobile devices.To change the A\u002FB test group, you can then enter a new value:\nEnable Speed Kit: Type \"A\", click \"OK\", and then reload the page.Disable Speed Kit: Type \"B\", click \"OK\", and then reload the page.",{"id":1223,"title":1224,"titles":1225,"content":1226,"level":282},"\u002Fdocs\u002Fdebugging-speed-kit#automated-performance-testing-with-webpagetest","Automated Performance Testing with WebPageTest",[1056,1061,1113],"WebPageTest is a powerful tool for synthetic performance testing. To accurately measure the uplift from Speed Kit, a multi-step test must be configured. This simulates a user's second page view, which is necessary to see the impact of Speed Kit's service worker and caching mechanisms. Our self-hosted WebPageTest instance is available at: https:\u002F\u002Fwpt.baqend.com\u002F",{"id":1228,"title":1229,"titles":1230,"content":1231,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#step-1-initial-configuration","Step 1: Initial Configuration",[1056,1061,1113,1224],"Navigate to https:\u002F\u002Fwpt.baqend.com\u002F and open the Advanced Configuration section.Set the Test Location (e.g., a German location for German websites) and Browser (e.g., Chrome for Desktop, iPhone X for Mobile).In the Test Settings tab, select an appropriate Connection speed (e.g., FIOS NL for Desktop, LTE for Mobile).",{"id":1233,"title":1234,"titles":1235,"content":1236,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#step-2-advanced-settings","Step 2: Advanced Settings",[1056,1061,1113,1224],"In the Advanced tab, check the \"Preserve original User Agent string\" box.In the Chromium tab, select \"I still don’t care about cookies\" from the \"Enable Extension\" dropdown. This helps eliminate cookie banners from the test's screenshots and video.(Optional) For localized testing, you can add a command like --accept-lang=de in the \"Command-line\" options under the Chromium tab.",{"id":1238,"title":1239,"titles":1240,"content":1241,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#step-3-scripting-the-test","Step 3: Scripting the Test",[1056,1061,1113,1224],"Navigate to the Script tab and paste one of the following scripts. These scripts first visit a page to install the Speed Kit service worker, and then navigate to the page you actually want to measure.",{"id":1243,"title":1244,"titles":1245,"content":1246,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#testing-a-standard-page-load","Testing a Standard Page Load",[1056,1061,1113,1224,1239],"Use this script to measure a standard navigation to a specific page as a repeat visitor. Speed Kit Enabled Run: logData 0\nnavigate      >>URL of Home\u003C\u003C?enableSpeedKit=1\n\u002F\u002F Optional: Hides the first navigation step in the video\nexecAndWait   document.body.style = \"all: initial; background-color: #DE640D; opacity: 0\"\nlogData 1\nexecAndWait   document.body.style.backgroundColor=\"#fff\"; location.href = '>>URL you would like to test\u003C\u003C' Speed Kit Disabled Run: logData 0\nnavigate      >>URL of Home\u003C\u003C?disableSpeedKit=1\n\u002F\u002F Optional: Hides the first navigation step in the video\nexecAndWait   document.body.style = \"all: initial; background-color: #DE640D; opacity: 0\"\nlogData 1\nexecAndWait   document.body.style.backgroundColor=\"#fff\"; location.href = '>>URL you would like to test\u003C\u003C' Replace >>URL of Home\u003C\u003C and >>URL you would like to test\u003C\u003C with your actual URLs.",{"id":1248,"title":1249,"titles":1250,"content":1251,"level":299},"\u002Fdocs\u002Fdebugging-speed-kit#testing-a-soft-navigation","Testing a Soft Navigation",[1056,1061,1113,1224,1239],"Use this script to measure a soft navigation (a click within a Single-Page Application). Script Template: logData 0\nnavigate      >>URL from which the navigation should start\u003C\u003C?enableSpeedKit=1\n\u002F\u002F Optional: Hides the first navigation step in the video\nexecAndWait   document.body.style = \"all: initial; background-color: #DE640D; opacity: 0\"\nlogData 1\nexecAndWait   document.body.style = \"\"; >>Your Click Statement\u003C\u003C To get the >>Your Click Statement\u003C\u003C, you must find a unique selector for the link on the page. You can test this in your browser's console, for example: document.querySelector('a[href=\">>URL of Click Target\u003C\u003C\"]').click().",{"id":1253,"title":1254,"titles":1255,"content":1256,"level":288},"\u002Fdocs\u002Fdebugging-speed-kit#step-4-running-the-test-and-comparing-results","Step 4: Running the Test and Comparing Results",[1056,1061,1113,1224],"Click Start Test to run your scripted test.On the results page, the relevant data will be in the final step (the one logged after\nlogData 1).To create a side-by-side comparison video, run the test for both the enabled and disabled scripts. Then, go to the filmstrip view of one test, copy its test ID from the URL, and append it with a comma to the comparison URL of the other test. html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":172,"title":173,"titles":1258,"content":1259,"level":259},[],"How Speed Kit makes uncacheable HTML cacheable, merges dynamic content in the browser, and keeps all cache layers synchronized with your origin.",{"id":1261,"title":1262,"titles":1263,"content":230,"level":231},"\u002Fdocs\u002Fdynamic-caching#dynamic-caching-content-synchronization-explained","Dynamic Caching & Content Synchronization Explained",[173],{"id":1265,"title":18,"titles":1266,"content":1267,"level":236},"\u002Fdocs\u002Fdynamic-caching#key-takeaways",[173,1262],"Dynamic Content Merging: Speed Kit accelerates traditional websites by racing a cached, anonymous version of a page against the live, personalized version. It instantly displays the cached version and then seamlessly merges dynamic content, guaranteeing a faster experience without ever slowing down the original site.Automated Content Synchronization: The system uses three distinct, automatic triggers—deployment detection, periodic updates, and crowd-sourced change detection—to ensure content is always fresh across the backend, edge, and browser caches.Effortless & Guided Integration: The initial setup is a straightforward process typically taking less than two hours, involving three simple steps: integrating a JavaScript tag, uploading our service worker file, and IP whitelisting, all fully supported by Speed Kit's dedicated onboarding team.",{"id":1269,"title":45,"titles":1270,"content":1271,"level":236},"\u002Fdocs\u002Fdynamic-caching#introduction",[173,1262],"A core challenge for modern websites, especially in e-commerce, is that their HTML documents are typically considered uncacheable. Due to dynamic content like prices, stock levels, and personalized information like user carts, servers send cache-control headers that prevent caching by traditional systems. This forces the user's browser to wait for the origin server to generate a full page on every navigation, creating significant latency and a slow user experience. Speed Kit's primary innovation is making this uncacheable HTML cacheable. Our system is designed to intentionally ignore these prohibitive headers and apply its own proprietary caching rules. By creating a fast, \"neutral\" version of the HTML, Speed Kit directly solves two critical performance bottlenecks: Server Time: We eliminate your server's processing time for generating a page, because the page is already built and waiting in our cache.Network Time: We drastically reduce network latency by serving the cached page from a global edge network, close to your users. With predictive preloading, this network time can often be eliminated entirely. The combined effect is a dramatic optimization of the Time to First Byte (TTFB) and typically a major improvement to the Largest Contentful Paint (LCP) as well. To ensure no personal data is ever stored incorrectly, our backend fetches pages from your origin server in an anonymous, cookie-less context—effectively simulating a brand-new visitor. This document provides a comprehensive overview of Speed Kit's caching architecture for Multi-Page Applications (MPAs). We will also detail the fully automatic mechanisms that keep content perfectly synchronized with your origin server. Note: This document focuses on acceleration for traditional Multi-Page Applications (MPAs). For Single-Page-Applications (SPAs) and sites that do client-side rendering, Speed Kit offers a different set of powerful tools. To learn more, see our guides on Accelerating Single-Page Applications (SPAs) and Solving the Client-Side Rendering (CSR) Problem. Advanced techniques like Predictive Preloading can also be applied to further enhance performance.",{"id":1273,"title":1274,"titles":1275,"content":1276,"level":236},"\u002Fdocs\u002Fdynamic-caching#effortless-expert-guided-integration","Effortless, Expert-Guided Integration",[173,1262],"Speed Kit's integration process is designed to be exceptionally fast and straightforward, typically requiring less than two hours of your technical team's time. We combine a few simple setup steps on your side with a comprehensive, white-glove service from our expert Product Integration team, ensuring a seamless and risk-free launch. The process involves: A Simple Technical Setup: The process begins with a few basic steps, like adding a JavaScript tag to your site, which are outlined in a personalized guide.Custom Configuration by Our Team: Our experts build a configuration tailored specifically to your website's architecture and performance goals.Safe QA and Phased Rollout: You can safely test the integration on your live site using our browser extension. We then proceed with a controlled, phased rollout, starting with A\u002FB testing to measure the impact before a full launch. For a complete walkthrough of all steps, please refer to our comprehensive Installation Guide.",{"id":1278,"title":1279,"titles":1280,"content":1281,"level":282},"\u002Fdocs\u002Fdynamic-caching#a-low-risk-independent-architecture","A Low-Risk, Independent Architecture",[173,1262,1274],"It is important to understand that Speed Kit adds a new architectural layer that operates independently of your existing infrastructure. Unlike a traditional CDN integration that can be complex to reverse, Speed Kit is designed for maximum flexibility and safety. The entire service can be deactivated at any time with a single click in the Speed Kit dashboard. This action triggers an immediate, multi-layered fail-safe to return all traffic to your origin: CDN-Level Deactivation: First, our entire caching and delivery API is instantly disabled at the CDN level.Service Worker Fallback: When the Service Worker in a user's browser next requests a resource, it receives an error message from the API, which it interprets as a deactivation signal.Session-Long Passthrough: Upon receiving this signal, the Service Worker also deactivates its own acceleration logic (like caching and merging) for the remainder of the user's session. It will simply pass all subsequent requests directly to your origin. This deactivation is also communicated via the Bloom filter, which the Service Worker checks periodically. The Service Worker is built to never use its local cache if the Bloom filter is not fresh or signals a deactivation. This ensures that even resources already cached in the browser are not used while Speed Kit is turned off, guaranteeing that all users see live content from your origin. This same periodic check of the Bloom filter is also how the Service Worker recognizes when you have re-activated Speed Kit. Once the filter is fetched and no longer shows a deactivation signal, the Service Worker automatically resumes caching and delivering accelerated content. This makes the entire integration exceptionally low-risk and gives you full control.",{"id":1283,"title":1284,"titles":1285,"content":1286,"level":236},"\u002Fdocs\u002Fdynamic-caching#transforming-dynamic-pages-into-cacheable-assets","Transforming Dynamic Pages into Cacheable Assets",[173,1262],"Before a dynamic page can be cached and accelerated, Speed Kit's backend first creates a fast, universally cacheable version of it. This foundational process transforms a personalized page into a generic, \"anonymized HTML\" document that is safe to serve to any user. The goal is to remove or hide all user-specific content while preserving the page's structure and static elements. This allows for an instant initial render, which is later filled with live data by the client-side merge process. The preparation process involves these automated steps: Anonymous Crawl: Our backend first fetches the page from your origin server in an anonymous context (i.e., without any user cookies) to get a base version of the content. This ensures that we never see or cache private user data from your visitors.Automated Analysis: The fetched HTML is then parsed and analyzed. Our system automatically identifies sections that typically contain personalized content by looking for generic markers and common structural patterns. This process does not require you to add any custom tags to your site.Content Neutralization: Once personalized sections are identified, our \"document handler\" module neutralizes them. This involves several actions:\nComment & Script Removal: All HTML comments and inline scripts are stripped from the document to create the clean, anonymized HTML. This is critical because these scripts can be personalized or contain dynamic logic. After the client-side merge, the browser executes the original, personalized scripts that arrive with the live response from your origin server.Hiding of Personalized Elements: Based on a custom configuration created by our Product Integration team during onboarding, other site-specific dynamic elements are hidden via injected stylesheets. It is also possible to configure custom placeholders or loading spinners for these areas instead of simply hiding them.Caching the Anonymized HTML: The result of this process is a clean, \"anonymized HTML\" document. This is the version that is stored across all layers of our cache, ready to be delivered instantly to any user.",{"id":1288,"title":1289,"titles":1290,"content":1291,"level":282},"\u002Fdocs\u002Fdynamic-caching#managing-loading-states-with-css","Managing Loading States with CSS",[173,1262,1284],"To prevent users from briefly seeing generic content on the static version of the page before it is replaced by personalized data, Speed Kit attaches status classes to the main \u003Chtml> element. You can use these classes to control the visibility of the placeholder content with CSS. Before Replacement: The \u003Chtml> element has the class speed-kit-dynamic-loading.After Replacement: This class is replaced with speed-kit-dynamic-loaded. Example: Hiding the placeholder You can use the status class to hide generic content until it is replaced. The CSS rule will no longer match after the replacement, making the element visible again. .speed-kit-dynamic-loading .my-shopping-cart {\n  visibility: hidden;\n} Example: Adding a loading spinner You can also use these classes to create more advanced transitions, such as displaying a loading spinner within the placeholder. @keyframes speed-kit-loading {\n  0% {\n    box-shadow: 8px 0 #C8C8CD, 20px 0 #DDDDE0, 32px 0 #EDEDEE;\n  }\n  33% {\n    box-shadow: 8px 0 #EDEDEE, 20px 0 #C8C8CD, 32px 0 #DDDDE0;\n  }\n  66% {\n    box-shadow: 8px 0 #DDDDE0, 20px 0 #EDEDEE, 32px 0 #C8C8CD;\n  }\n}\n.speed-kit-dynamic-loading .my-shopping-cart::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 8px;\n  margin: -4px 0 0 -24px;\n  border-radius: 50%;\n  box-shadow: 8px 0 #C8C8CD, 20px 0 #DDDDE0, 32px 0 #EDEDEE;\n  will-change: box-shadow;\n  animation-name: speed-kit-loading;\n  animation-duration: 1.5s;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  visibility: visible !important;\n  z-index: 1000 !important;\n}",{"id":1293,"title":1294,"titles":1295,"content":1296,"level":236},"\u002Fdocs\u002Fdynamic-caching#the-core-caching-synchronization-architecture","The Core Caching & Synchronization Architecture",[173,1262],"To deliver content at maximum speed while ensuring it is always up-to-date, Speed Kit uses a multi-layered architecture. The components work together, with three pillars of change detection feeding into a central sync mechanism.",{"id":1298,"title":1299,"titles":1300,"content":1301,"level":282},"\u002Fdocs\u002Fdynamic-caching#the-three-caches","The Three Caches",[173,1262,1294],"Content is stored in three locations to maximize speed: Backend Cache (AWS): The central cache where anonymous HTML and assets are processed and stored.Edge Cache (Fastly): A globally distributed CDN that serves cached content from locations close to the user for minimal network latency.Service Worker Cache (Browser): A cache directly in the user's browser, enabling truly instant page loads for repeat visits and pre-cached pages.",{"id":1303,"title":1304,"titles":1305,"content":1306,"level":282},"\u002Fdocs\u002Fdynamic-caching#the-principle-of-revalidation","The Principle of Revalidation",[173,1262,1294],"Instead of blindly deleting and re-downloading content, Speed Kit's philosophy is based on efficient, active revalidation. When one of our detection methods signals a potential change, our backend immediately queries your origin server to verify it. This is done using standard HTTP conditional request headers like ETag and last-modified. A cache update is only performed if this revalidation confirms that the content has actually changed. If your server responds with a 304 Not Modified, it means the content is still current. In this case, no data is transferred and no caches on our side are purged, which saves bandwidth and protects your origin from unnecessary load.",{"id":1308,"title":1309,"titles":1310,"content":1311,"level":282},"\u002Fdocs\u002Fdynamic-caching#the-bloom-filter-synchronizing-the-browser-cache","The Bloom Filter: Synchronizing the Browser Cache",[173,1262,1294],"The biggest challenge in keeping content fresh lies with the service worker cache in the user's browser. A server has no direct way to \"push\" an invalidation notice or force the browser to discard a cached file that has become stale on the origin. Our elegant solution to this problem is the Bloom filter, a space-efficient, probabilistic data structure that tests if a URL has recently changed. Before any file is served from the browser cache, the service worker consults the Bloom filter. The service worker keeps its local copy of this filter fresh by updating it at regular intervals (every 5 minutes) and on page reloads. If a URL is present in the filter, the service worker knows it must revalidate that asset before serving it from the cache. The filter can also carry a domain-wide signal to indicate a deployment is in progress, instructing the browser to bypass the cache temporarily.",{"id":1313,"title":1314,"titles":1315,"content":1316,"level":236},"\u002Fdocs\u002Fdynamic-caching#acceleration-for-multi-page-applications-mpas","Acceleration for Multi-Page Applications (MPAs)",[173,1262],"For traditional websites and server-side rendered frameworks, Speed Kit uses a dynamic content merging process orchestrated by the service worker.",{"id":1318,"title":1319,"titles":1320,"content":1321,"level":282},"\u002Fdocs\u002Fdynamic-caching#the-simultaneous-request-race","The Simultaneous Request Race",[173,1262,1314],"When a user navigates to a page, the Speed Kit Service Worker issues two parallel requests: To the Speed Kit Cache: For the fast, anonymous version of the HTML.To the Origin Server: For the fully personalized, live version of the HTML. There are two possible outcomes to this race, both of which prioritize the user experience and site stability.",{"id":1323,"title":1324,"titles":1325,"content":1326,"level":282},"\u002Fdocs\u002Fdynamic-caching#outcome-1-speed-kit-wins-the-race-the-common-case","Outcome 1: Speed Kit Wins the Race (The Common Case)",[173,1262,1314],"In the vast majority of cases, the request to the Speed Kit cache resolves first. The process is as follows:",{"id":1328,"title":1329,"titles":1330,"content":1331,"level":288},"\u002Fdocs\u002Fdynamic-caching#tiered-cache-fetch-process","Tiered Cache Fetch Process",[173,1262,1314,1324],"To serve a page, Speed Kit checks its cache layers sequentially, from fastest to slowest: Prerendered Cache: If the page was predictively prerendered in the background, users experience an almost instant page load, with a Largest Contentful Paint (LCP)typically under 300 ms. This is the fastest possible outcome.Service Worker Cache: For pages already in the browser—either from a previous visit or from predictive preloading—we first consult the Bloom filter to verify freshness. If the content is not marked as stale, it is served directly from the local service worker cache for a near-instant response.Edge Cache: For a first-time visit, the request goes to the nearest global Edge node for fast delivery from our network.Backend Cache: If the page is not found on the edge node, it is fetched from our central backend cache.Origin Server (Discovery): If the page is not in any of our caches, we fetch it from your origin server. This final step is how new pages are discovered. The newly fetched page is then populated across our Edge nodes and stored in the user's Service Worker cache for subsequent visits. During this initial discovery, the origin server often wins the race, triggering the fail-safe described in Outcome 2. Crucially, any page successfully served to the user is automatically stored in the local service worker cache. This ensures that the next time the user visits that page, it will be served directly from the browser for a near-instant response.",{"id":1333,"title":1334,"titles":1335,"content":1336,"level":288},"\u002Fdocs\u002Fdynamic-caching#seamless-merge","Seamless Merge",[173,1262,1314,1324],"Once the personalized HTML response arrives from your origin server moments later, Speed Kit intelligently swaps the \u003Cbody> of the already-rendered page with the \u003Cbody> from the origin. This allows personalized content (like a user's shopping cart) to become visible, merging the speed of a static cache with the dynamism of a live site.",{"id":1338,"title":1339,"titles":1340,"content":1341,"level":288},"\u002Fdocs\u002Fdynamic-caching#javascript-executionensuring-reliability-and-performance","JavaScript Execution:Ensuring Reliability and Performance",[173,1262,1314,1324],"To handle personalised inline scripts as well as external scripts correctly and to ensure DOM changes and listeners reference the personalised HTML, Speed Kit delays JavaScript execution to the point in time, where the personalised HTML is received.",{"id":1343,"title":1344,"titles":1345,"content":1346,"level":299},"\u002Fdocs\u002Fdynamic-caching#how-it-works","How It Works",[173,1262,1314,1324,1339],"First, in the cached HTML, we strip out any inline scripts and move all external scripts to the end of the \u003Cbody>. This prevents render-blocking and, thanks to the much-improved Time To First Byte (TTFB) from Speed Kit, allows the browser's preload scanner to discover and download these files early. To synchronize execution, we then insert an empty synchronous script, speed-kit-dom-ready.js, before all other scripts. The Speed Kit Service Worker intercepts and holds this file until the dynamic content merge is complete. Once the merge is finished, the Service Worker releases the file, which in turn unlocks all subsequent script execution. To perfectly preserve the original execution order and handle dependencies between inline and external scripts, an intelligent script queue executes the original inline scripts at the correct points. For example, you might see a pattern like this in the final HTML, where an inline script processes the queue for a specific external file: \u003Cscript class=\"speed-kit-inserted\">SpeedKit.processScriptQueue(\"\u002Fpath\u002Fto\u002Fmain.js\");\u003C\u002Fscript>\n\n\u003Cscript data-speedkit=\"queued\" type=\"module\" src=\"\u002Fpath\u002Fto\u002Fjs\u002Fmain.js\">\u003C\u002Fscript> This meticulous process also handles dynamic scripts that may only be present in the personalized HTML from the origin. Speed Kit compares the scripts in the cached version with those in the live version to ensure the final execution perfectly matches the personalized HTML.",{"id":1348,"title":1349,"titles":1350,"content":1351,"level":299},"\u002Fdocs\u002Fdynamic-caching#the-performance-impact","The Performance Impact",[173,1262,1314,1324,1339],"While there is a brief delay before script execution begins—typically only the 10ms required for the merge process—the script files themselves are downloaded much earlier. The net result is a significant overall performance gain. The total time until the page is fully interactive is reduced, even if the gap between the page becoming visible (LCP) and becoming interactive (TTI\u002FINP) is slightly longer. The overall user experience is faster and more reliable.",{"id":1353,"title":1354,"titles":1355,"content":1356,"level":299},"\u002Fdocs\u002Fdynamic-caching#preventing-prerendering-side-effects","Preventing Prerendering Side Effects",[173,1262,1314,1324,1339],"This method of delaying execution is also critical for pages delivered from the Prerendered Cache. When a page is fully rendered in the background, executing its JavaScript prematurely can lead to significant side effects. A common issue with naive prerendering implementations is that heavy JavaScript from the hidden, prerendered page can execute in the background, consuming significant CPU resources. This can block the main thread, making the user's active page feel sluggish and unresponsive, which negatively impacts its Interaction to Next Paint (INP). Furthermore, it can corrupt business-critical data. For example, analytics scripts might fire, incorrectly tracking a page view for content the user never sees. Similarly, application logic could run, adding a product to a user's viewing history even if they don't navigate to the page. By ensuring that scripts only run after the page becomes visible and active, Speed Kit completely avoids these issues. This guarantees that the user's current session remains responsive and that analytics data remains accurate, preserving data integrity alongside performance.",{"id":1358,"title":1359,"titles":1360,"content":1361,"level":282},"\u002Fdocs\u002Fdynamic-caching#outcome-2-the-origin-server-wins-the-race-the-fail-safe","Outcome 2: The Origin Server Wins the Race (The Fail-Safe)",[173,1262,1314],"In the rare event that your origin server responds faster than the Speed Kit cache, the system prioritizes showing content immediately: Direct Render: The service worker simply forwards the response from your origin server directly to the browser.No Merge: No merging or content swapping occurs. The user sees the original version of your site, exactly as they would without Speed Kit. This fail-safe mechanism guarantees that Speed Kit will never slow down your website. In the worst-case scenario, your site remains exactly as fast as it was before.",{"id":1363,"title":1364,"titles":1365,"content":1366,"level":236},"\u002Fdocs\u002Fdynamic-caching#automated-content-synchronization-the-three-pillars-of-freshness","Automated Content Synchronization: The Three Pillars of Freshness",[173,1262],"Speed Kit uses three distinct, automated methods to discover when your content has changed. Each method triggers our universal cache synchronization process.",{"id":1368,"title":1369,"titles":1370,"content":1371,"level":282},"\u002Fdocs\u002Fdynamic-caching#method-1-deployment-detection","Method 1: Deployment Detection",[173,1262,1364],"This is the most important mechanism for keeping the cache in sync with your codebase. Speed Kit detects deployments by monitoring asset hashes, checking version numbers in meta tags, or via API triggers from your CI\u002FCD pipeline. When a large-scale deployment is detected, a safety protocol is initiated: a \"deployment in progress\" flag is added to the Bloom filter. This flag instructs all browsers to enter a temporary \"passthrough\" mode (15 minutes by default). The purpose of this mode is to provide a safe time window for your origin servers to complete the deployment across your entire infrastructure. This ensures that when we begin revalidating our caches, we are pulling from a stable and fully updated source.",{"id":1373,"title":1374,"titles":1375,"content":1376,"level":282},"\u002Fdocs\u002Fdynamic-caching#method-2-periodic-updates","Method 2: Periodic Updates",[173,1262,1364],"This scheduled, time-based mechanism is ideal for predictable, site-wide content updates, like a daily price refresh. By systematically revalidating pages, it ensures consistency more effectively than relying on individual user visits. Default, configurable frequencies include: HTML Pages: DailyHigh-Priority Landing Pages: As frequently as every 10 minutesAssets (CSS, JS): Every 10 minutesImages: Every 7 days",{"id":1378,"title":1379,"titles":1380,"content":1381,"level":282},"\u002Fdocs\u002Fdynamic-caching#method-3-crowd-sourced-change-detection","Method 3: Crowd-Sourced Change Detection",[173,1262,1364],"During the page merge process, a script in the user's browser strategically compares key \"above the fold\" content elements between the anonymous HTML from the Speed Kit cache and the live HTML from your origin server. These crucial elements, like the product name or price, are defined during the initial setup. If a discrepancy is found, the browser informs our backend via a RUM beacon. The backend revalidates the page and refreshes all of our caches within a few seconds. This crowd-smart solution guarantees that only one user sees the outdated content. Even for that user, the stale version is only visible for a very short moment before the correct, up-to-date content from your origin server is shown.",{"id":1383,"title":1384,"titles":1385,"content":1386,"level":236},"\u002Fdocs\u002Fdynamic-caching#the-cache-synchronization-process-our-response-to-a-change","The Cache Synchronization Process: Our Response to a Change",[173,1262],"Once a change has been detected by any of the methods above, our backend orchestrates a unified, three-step process to ensure all caches are updated correctly and efficiently.",{"id":1388,"title":1389,"titles":1390,"content":1391,"level":282},"\u002Fdocs\u002Fdynamic-caching#step-1-updating-the-bloom-filter-for-the-browser-cache","Step 1: Updating the Bloom Filter (For the Browser Cache)",[173,1262,1384],"This step details the smart, time-based logic our backend uses to populate the Bloom filter. The following backend process determines which URLs are added to the filter and for how long: Estimated TTL: For every asset the Speed Kit backend caches, it calculates an Estimated Time-to-Live (TTL) based on how frequently that asset has changed in the past.Bloom Filter Entry Lifecycle: If a change is detected before an asset's estimated TTL has expired, its URL is added to the Bloom filter for the remainder of that original TTL. This acts as a \"recall notice\" for the browser. For example: if an asset has an estimated TTL of 4 days and a change is detected after only 2 days, the URL is added to the Bloom filter for this remaining 2-day period. The URL is automatically removed from the filter once this period ends because, at that point, the browser would need to revalidate the asset anyway.",{"id":1393,"title":1394,"titles":1395,"content":1396,"level":282},"\u002Fdocs\u002Fdynamic-caching#step-2-purging-the-edge-cache","Step 2: Purging the Edge Cache",[173,1262,1384],"Simultaneously, the backend sends a purge command to our CDN. This instantly removes the stale version of the asset from all globally distributed edge nodes.",{"id":1398,"title":1399,"titles":1400,"content":1401,"level":282},"\u002Fdocs\u002Fdynamic-caching#step-3-pre-warming-the-edge-cache","Step 3: Pre-warming the Edge Cache",[173,1262,1384],"To ensure performance does not degrade after a purge, our system immediately begins repopulating the edge cache with the new content. This is a crucial step for maintaining low latency to end users. Data-Driven Pre-warming: Our standard process is to intelligently pre-warm the cache using Real User Monitoring (RUM) data. By analyzing traffic patterns, our system learns which content is requested most frequently from which specific geographic CDN edge nodes (PoPs). Based on this, it automatically creates a dynamic pre-warming configuration for your site, designed to ensure that the assets for over 95% of your user traffic are already waiting on the closest edge node. This data-driven approach results in a cache-hit ratio that far exceeds traditional CDNs and is a critical foundation for the success of our Predictive Preloading feature, as it guarantees a high pre-caching rate.User-Driven Revalidation (Post-Deployment): In the specific case where a deployment was detected and we are rebuilding the cache, we supplement proactive pre-warming with user-driven revalidation. As we rebuild, the pages with the most traffic are naturally requested by users first. Each of these initial requests triggers an immediate, \"ad-hoc\" revalidation for that specific page, ensuring your most popular pages are refreshed with the highest priority. This combination ensures that your most important, highest-traffic pages are the very first to be refreshed and available in the edge cache, maximizing performance where it matters most.",{"id":1403,"title":1404,"titles":1405,"content":1406,"level":236},"\u002Fdocs\u002Fdynamic-caching#manual-controls-and-visibility-the-dashboard-api","Manual Controls and Visibility: The Dashboard & API",[173,1262],"While our system is fully automatic, we provide powerful tools for manual control when you need it.",{"id":1408,"title":1409,"titles":1410,"content":1411,"level":282},"\u002Fdocs\u002Fdynamic-caching#the-speed-kit-dashboard","The Speed Kit Dashboard",[173,1262,1404],"The dashboard provides a user-friendly interface for visibility and direct control over your cache. You can: View Cached Assets: See a complete list of all assets in the Speed Kit cache, with powerful filters.Trigger Content Updates: Manually trigger an update job to revalidate and refresh specific assets.Purge Assets: Remove an asset from the cache entirely.Manage Whitelist & Blacklist: Control which resources are included in or excluded from Speed Kit's acceleration.Configure Periodic Updates: View and edit the schedules for all recurring update jobs.",{"id":1413,"title":1414,"titles":1415,"content":1416,"level":282},"\u002Fdocs\u002Fdynamic-caching#the-refresh-api","The Refresh API",[173,1262,1404],"For programmatic control, all manual jobs can be triggered via our Refresh API, which is authenticated using API tokens. Every job returns a unique ID that can be used to monitor its progress. For detailed endpoint descriptions, request\u002Fresponse schemas, and code examples, please see our API Documentation.",{"id":1418,"title":1419,"titles":1420,"content":230,"level":236},"\u002Fdocs\u002Fdynamic-caching#advanced-topics-scalability-origin-protection","Advanced Topics: Scalability & Origin Protection",[173,1262],{"id":1422,"title":1423,"titles":1424,"content":1425,"level":282},"\u002Fdocs\u002Fdynamic-caching#scalability-cache-management","Scalability & Cache Management",[173,1262,1419],"Speed Kit is designed for scale and handles customers with over 500,000 product pages without issue. Cache Eviction Policy: To keep our caches focused and efficient, pages are automatically removed when they are no longer needed. When the calculated Time-to-Live (TTL) for an HTML page expires, we apply a default grace period of 10 days. If the page is not requested by any user during this 10-day grace period, the file is permanently deleted from our edge and backend caches. This ensures that stale content that receives no traffic is cleared efficiently.URL Parameter Handling for Cache Efficiency: To maximize the cache-hit ratio, Speed Kit can be configured to handle URL parameters flexibly. Many URLs can point to the same content but differ only by parameters used for tracking, analytics, or sessions (e.g., ?utm_source=google, ?session_id=xyz). By ignoring a predefined list of these parameters via the Speed Kit configuration, our system can treat multiple URL variations as a single cacheable item. This configuration is fine-tuned for your specific site during the onboarding process and is a key strategy for maintaining a highly efficient cache.",{"id":1427,"title":1428,"titles":1429,"content":1430,"level":282},"\u002Fdocs\u002Fdynamic-caching#origin-server-protection","Origin Server Protection",[173,1262,1419],"Speed Kit is designed to be a good neighbor, with multiple safeguards to protect your infrastructure from being overwhelmed. We understand that whitelisting our servers relaxes your existing bot or rate-limiting rules. Therefore, we have implemented a multi-layered security strategy to mitigate any potential risks. Our entire backend infrastructure runs on AWS, where we strictly adhere to all security best practices, such as the AWS Well-Architected Framework. For content delivery, we rely on the robust and secure Fastly CDN. To protect your origin server, we have implemented the following safeguards:",{"id":1432,"title":1433,"titles":1434,"content":1435,"level":288},"\u002Fdocs\u002Fdynamic-caching#_1-fastly-next-gen-waf-at-the-edge","1. Fastly Next-Gen WAF at the Edge",[173,1262,1419,1428],"We utilize Fastly's Next-Gen Web Application Firewall (WAF) directly at the CDN level. This filters malicious requests before they can reach our servers or yours by using: Up-to-date Open Web Application Security Project (OWASP) Top 10 rule setsKnown bot signaturesGeo- and IP-based blocklists",{"id":1437,"title":1438,"titles":1439,"content":1440,"level":288},"\u002Fdocs\u002Fdynamic-caching#_2-strict-dynamic-rate-limiting","2. Strict & Dynamic Rate-Limiting",[173,1262,1419,1428],"Our system operates with multiple layers of rate-limiting to ensure predictable traffic and prevent overload: Hard Limits: We enforce strict, configurable limits on the number of requests per second our system can send to your origin.Customer-Specific Thresholds: Even if our primary limits were bypassed, we enforce an absolute traffic ceiling for each customer as a final backstop.Dynamic Throttling: As an additional safety layer, we continuously monitor the response time from your origin server. If we detect that answer times are rising, our system automatically throttles its request rate, ensuring we \"back off\" if your server is under stress.",{"id":1442,"title":1443,"titles":1444,"content":1445,"level":288},"\u002Fdocs\u002Fdynamic-caching#_3-secure-request-handling","3. Secure Request Handling",[173,1262,1419,1428],"We ensure that only safe, valid requests are forwarded to your origin:. GET Requests Only: Our service will only ever forward GET requests to your origin. Other HTTP methods like POST, PUT, or DELETE are never passed through, eliminating them as a potential attack vector.Header Sanitization: We do not forward HTTP headers from the end-user's client. Instead, our system uses its own strictly defined set of headers for all requests to your origin, which prevents attacks carried in malicious HTTP headers.",{"id":1447,"title":1448,"titles":1449,"content":1450,"level":288},"\u002Fdocs\u002Fdynamic-caching#_4-data-privacy-by-design","4. Data Privacy by Design",[173,1262,1419,1428],"Protecting your users' data is a fundamental principle of our architecture. To create a cached version of a page, our backend system fetches the content in a completely anonymous context. No Cookies: Our crawlers operate from a neutral, third-party domain and do not receive or use any cookies from your users.Anonymous Fetch: The crawl to create the cached page is performed without any user context, effectively acting as a new, unknown visitor. This is a fundamental privacy measure that ensures our backend systems do not receive any personally identifiable information (PII) or user-specific session data from your origin server.Client-Side Personalization: All personalization and merging of user-specific content happens entirely within the user's own browser, separate from our caching systems.",{"id":1452,"title":1453,"titles":1454,"content":1455,"level":236},"\u002Fdocs\u002Fdynamic-caching#broad-compatibility-proven-value","Broad Compatibility & Proven Value",[173,1262],"Speed Kit is platform-agnostic, working with all major e-commerce platforms and even with custom e-commerce solutions. We provide dedicated solutions for modern architectures, including client-side rendered (CSR) pages and Single-Page Applications (SPAs). Our architecture is also designed to handle personalized content and A\u002FB testing tools. With our customers, we have demonstrated that Speed Kit can achieve a significant performance uplift on all e-commerce platforms to provide a strong return on investment.",{"id":1457,"title":1458,"titles":1459,"content":1460,"level":236},"\u002Fdocs\u002Fdynamic-caching#a-note-on-seo-crawler-compatibility","A Note on SEO & Crawler Compatibility",[173,1262],"Speed Kit is designed to be fully compatible with search engine crawlers like the Googlebot. A key technical detail is that Google's crawler does not support the Service Worker technology that powers Speed Kit's acceleration. As a result, the crawler always bypasses Speed Kit and interacts directly with your origin server, meaning Speed Kit is entirely neutral in its interaction with search engines. This clean separation also guarantees there is no risk of \"cloaking,\" as the crawler and the user both receive the same final content from your origin server. For a comprehensive overview of how Speed Kit boosts your search rankings, please see our full Speed Kit and SEO: Boosting Your Search Rankings.",{"id":1462,"title":1463,"titles":1464,"content":1465,"level":236},"\u002Fdocs\u002Fdynamic-caching#a-note-on-tag-managers-ad-blockers","A Note on Tag Managers & Ad Blockers",[173,1262],"While it is technically possible to load Speed Kit through a tag manager, this approach is highly not recommended. Many ad blockers used by end-users are configured to block tag manager scripts entirely. If a user's ad blocker prevents the tag manager from loading, Speed Kit will also be blocked, and that user will not receive the accelerated page experience. Other types of ad blockers that do not target tag managers do not interfere with Speed Kit's operation. html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"id":1467,"title":1468,"titles":1469,"content":1470,"level":259},"\u002Fdocs\u002Femergency-action-plan","Emergency Action Plan",[],"The emergency protocol for deactivating Speed Kit for all users and reporting an issue if you suspect Speed Kit is causing a problem on your website.",{"id":1472,"title":1468,"titles":1473,"content":1474,"level":231},"\u002Fdocs\u002Femergency-action-plan#emergency-action-plan",[1468],"If you suspect that Speed Kit is causing a problem on your website, follow this emergency protocol. For developers who wish to optionally test locally first to confirm if Speed Kit is the cause, please see our Debugging Speed Kit guide.",{"id":1476,"title":1477,"titles":1478,"content":1479,"level":236},"\u002Fdocs\u002Femergency-action-plan#step-1-deactivate-speed-kit-for-all-users","Step 1: Deactivate Speed Kit for All Users",[1468,1468],"If you believe Speed Kit is the cause of an issue, you can immediately turn it off for all users. After you click the button, the deactivation takes only a few seconds to take effect. This action disables the Speed Kit service worker for all visitors, meaning your website will be delivered directly from your origin server—just as it was before Speed Kit was installed. Go to the Speed Kit DashboardFind Settings in the menu.Click the Deactivate Speed Kit button. If the problem persists after deactivation, Speed Kit was not the cause. In this case, or if you deactivated Speed Kit by mistake, you can re-enable it by clicking the Activate Speed Kit button in the same section.",{"id":1481,"title":1482,"titles":1483,"content":1484,"level":236},"\u002Fdocs\u002Femergency-action-plan#step-2-report-the-issue","Step 2: Report the Issue",[1468,1468],"Next, please report the issue to our support team. You can send an email to help@speedkit.com or use the support form in the dashboard. This action creates a support ticket, and our team will investigate the problem and contact you as soon as possible. To help us resolve the issue quickly, please include the following details in your report: How can we reproduce the problem (e.g., specific URLs, steps to follow)?What browser, operating system, and device did you use?What is the unexpected behavior?What is the expected behavior (e.g., what should it look like)?",{"id":1486,"title":1487,"titles":1488,"content":1489,"level":236},"\u002Fdocs\u002Femergency-action-plan#emergency-support-outside-business-hours","Emergency Support Outside Business Hours",[1468,1468],"If you have a critical emergency and need immediate support outside of our standard business hours (Monday to Friday, 9 AM to 5 PM CET \u002F CEST), please call our emergency hotline. You can find the number in your Speed Kit onboarding documents.",{"id":1491,"title":1492,"titles":1493,"content":1494,"level":259},"\u002Fdocs\u002Fhow-speed-kit-works","How Speed Kit Works",[],"A technical overview of how Speed Kit eliminates server, network, and browser time through dynamic caching, a service worker, and predictive preloading.",{"id":1496,"title":1497,"titles":1498,"content":230,"level":231},"\u002Fdocs\u002Fhow-speed-kit-works#how-speed-kit-works-a-technical-overview","How Speed Kit Works: A Technical Overview",[1492],{"id":1500,"title":18,"titles":1501,"content":1502,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#key-takeaways",[1492,1497],"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.",{"id":1504,"title":45,"titles":1505,"content":1506,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#introduction",[1492,1497],"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.",{"id":1508,"title":1509,"titles":1510,"content":1511,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#the-foundation-dynamic-caching","The Foundation: Dynamic Caching",[1492,1497],"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.",{"id":1513,"title":1514,"titles":1515,"content":1516,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#the-orchestrator-the-speed-kit-service-worker","The Orchestrator: The Speed Kit Service Worker",[1492,1497],"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.",{"id":1518,"title":1519,"titles":1520,"content":1521,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#the-ultimate-goal-predictive-preloading-for-instant-navigations","The Ultimate Goal: Predictive Preloading for Instant Navigations",[1492,1497],"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.",{"id":1523,"title":1524,"titles":1525,"content":1526,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#_1-prediction","1. Prediction",[1492,1497,1519],"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.",{"id":1528,"title":1529,"titles":1530,"content":1531,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#_2-pre-caching","2. Pre-caching",[1492,1497,1519],"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.",{"id":1533,"title":1534,"titles":1535,"content":1536,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#_3-pre-rendering","3. Pre-rendering",[1492,1497,1519],"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.",{"id":1538,"title":1539,"titles":1540,"content":1541,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#adapting-to-modern-architectures","Adapting to Modern Architectures",[1492,1497],"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.",{"id":1543,"title":1544,"titles":1545,"content":1546,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#multi-page-applications-mpas","Multi-Page Applications (MPAs)",[1492,1497,1539],"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.",{"id":1548,"title":1549,"titles":1550,"content":1551,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#single-page-applications-spas","Single-Page Applications (SPAs)",[1492,1497,1539],"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.",{"id":1553,"title":1554,"titles":1555,"content":1556,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#client-side-rendered-csr-sites","Client-Side Rendered (CSR) Sites",[1492,1497,1539],"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.",{"id":1558,"title":1559,"titles":1560,"content":1561,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#integration-and-operation","Integration and Operation",[1492,1497],"Speed Kit is designed as a low-risk, independent layer that enhances your existing infrastructure without requiring deep integration.",{"id":1563,"title":1564,"titles":1565,"content":1566,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#technical-setup","Technical Setup",[1492,1497,1559],"The initial integration is a straightforward process guided by our expert team, typically taking less than two hours. It involves three simple steps: Add the Speed Kit JavaScript tag to your site's HTML.Upload the Service Worker file to the root directory of your domain.Whitelist Speed Kit's IP addresses in your firewall to ensure our backend can fetch content.",{"id":1568,"title":1569,"titles":1570,"content":1571,"level":282},"\u002Fdocs\u002Fhow-speed-kit-works#low-risk-and-safe-by-design","Low-Risk and Safe by Design",[1492,1497,1559],"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.",{"id":1573,"title":1574,"titles":1575,"content":1576,"level":236},"\u002Fdocs\u002Fhow-speed-kit-works#data-privacy-and-gdpr-compliance","Data Privacy and GDPR Compliance",[1492,1497],"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.",{"id":1578,"title":821,"titles":1579,"content":1580,"level":259},"\u002Fdocs\u002Fimage-optimization",[],"How Speed Kit automatically transcodes, resizes, and compresses images at the edge—without client-side JavaScript—to shrink file sizes and improve LCP.",{"id":1582,"title":821,"titles":1583,"content":230,"level":231},"\u002Fdocs\u002Fimage-optimization#image-optimization",[821],{"id":1585,"title":18,"titles":1586,"content":1587,"level":236},"\u002Fdocs\u002Fimage-optimization#key-takeaways",[821,821],"Automated & Intelligent: Speed Kit automatically optimizes images with a full suite of on-demand transformations at the edge, including format transcoding to AVIF\u002FWebP and intelligent resizing, requiring no manual effort.Faster LCP without JavaScript Delays: By using a Service Worker to attach device metadata to requests, Speed Kit delivers near-pixel-perfect images without any client-side JavaScript, avoiding a key performance bottleneck and directly improving the Largest Contentful Paint (LCP).Quality & Control: Advanced compression preserves visual quality, while powerful controls like whitelisting and blacklisting allow the service to be fine-tuned for special use cases without any changes to your website's codebase.",{"id":1589,"title":45,"titles":1590,"content":1591,"level":236},"\u002Fdocs\u002Fimage-optimization#introduction",[821,821],"For modern e-commerce, high-quality images are non-negotiable, but they are also frequently the biggest cause of slow page loads. Large, unoptimized image files consume bandwidth, increase load times, and negatively impact key performance metrics like the Largest Contentful Paint (LCP). Speed Kit’s Image Optimization, powered by Fastly's advanced image optimization technology, is an automated, all-in-one solution designed to solve this fundamental conflict between visual richness and website performance. It moves beyond simple compression by integrating a multi-layered strategy that includes next-generation format conversion, intelligent resizing based on the end user's device, and a suite of on-demand image transformations. This system ensures every user receives a visually flawless image that is delivered in the smallest possible file size, tailored for their specific device and screen resolution. All optimizations are performed on-demand at the edge, meaning there is no need to pre-generate and store multiple versions of each image. The entire process is fully automated, removing the need for manual image editing and complex build processes.",{"id":1593,"title":1594,"titles":1595,"content":1596,"level":236},"\u002Fdocs\u002Fimage-optimization#core-optimization-techniques","Core Optimization Techniques",[821,821],"Speed Kit employs a series of automated techniques that work together to reduce image file sizes while preserving visual quality and ensuring high cache hit rates. Once the Speed Kit service worker is active after a user's initial page view, these processes are applied automatically at the edge to all whitelisted images.",{"id":1598,"title":1599,"titles":1600,"content":1601,"level":282},"\u002Fdocs\u002Fimage-optimization#next-generation-format-transcoding","Next-Generation Format Transcoding",[821,821,1594],"The most significant impact on file size comes from converting images to modern, highly efficient formats. Speed Kit handles this conversion automatically based on browser support and image characteristics.",{"id":1603,"title":1604,"titles":1605,"content":1606,"level":288},"\u002Fdocs\u002Fimage-optimization#supported-formats","Supported Formats",[821,821,1594,1599],"Process: Speed Kit automatically detects if a user's browser supports modern formats like AVIF or WebP. If it does, our service intercepts the original image request (e.g., for a JPEG, PNG, or GIF) and, on-the-fly, transcodes the image to the best-supported format in the backend. This new, much smaller image is then served to the user.Benefit: The AVIF and WebP formats offer superior compression and quality compared to older formats. On average, WebP provides a 30% file size reduction over JPEG, with AVIF offering even greater savings.",{"id":1608,"title":1609,"titles":1610,"content":1611,"level":282},"\u002Fdocs\u002Fimage-optimization#on-demand-image-transformations","On-Demand Image Transformations",[821,821,1594],"Beyond format conversion, Speed Kit can perform a wide range of real-time transformations on a single source image file. This eliminates the need for manual edits and reduces storage costs, as you only need to store one master version of each image.",{"id":1613,"title":1614,"titles":1615,"content":1616,"level":288},"\u002Fdocs\u002Fimage-optimization#intelligent-resizing-without-client-side-javascript","Intelligent Resizing without Client-Side JavaScript",[821,821,1594,1609],"A primary challenge with responsive images is that most solutions require client-side JavaScript to determine the correct image size for the user's viewport. This creates a performance bottleneck: the browser must wait for JS to download and execute before it can even begin to request the most critical images, which significantly delays the Largest Contentful Paint (LCP). Speed Kit's \"Fit-to-Layout\" technology solves this problem by incorporating the client's layout information into the request without any client-side JavaScript dependency.",{"id":1618,"title":1619,"titles":1620,"content":1621,"level":288},"\u002Fdocs\u002Fimage-optimization#how-it-works-smart-bucketing-at-the-edge","How It Works: Smart Bucketing at the Edge",[821,821,1594,1609],"Instead of creating a unique, dynamically sized image for every possible screen resolution (which would destroy cache efficiency), Speed Kit uses an intelligent bucketing strategy. Layout Calculation via Service Worker: Speed Kit leverages its unique position within the browser to solve a key challenge. Normally, device information like screen width and Device Pixel Ratio (DPR)—which is needed for perfect resizing—is only accessible by executing JavaScript. Our Service Worker, however, intercepts image requests as the browser makes them. It intelligently attaches this critical device information to the request on the fly before it leaves the browser. This makes the client's layout context available to our transformation logic at the edge, where it is used to compute the largest possible image size that could be rendered.Bucket Selection: At the edge, our transformation logic compares this required size against a series of predefined image width \"buckets\" (e.g., 360px, 480px, 720px, 1080px, etc.). It then selects the next larger bucket, ensuring the delivered image is near-pixel-perfect with no quality loss from upscaling.Efficient Caching: This bucketing approach guarantees a high cache-hit ratio. To save on the high processing costs of the initial transformation, each image is transformed at most once for each width bucket. That transformed image is then distributed and cached across our entire global edge network.",{"id":1623,"title":1624,"titles":1625,"content":1626,"level":288},"\u002Fdocs\u002Fimage-optimization#the-performance-advantage-no-javascript-delays","The Performance Advantage: No JavaScript Delays",[821,821,1594,1609],"The most significant benefit of this architecture is its impact on render-blocking resources. Native Browser Loading: Because no preliminary JavaScript is needed, the browser can discover and request images using its native, highly optimized parser for \u003Cimg> and \u003Cpicture> tags. This allows native browser features like eager and lazy loading to function perfectly.Faster LCP: Unlike client-based frameworks that delay image requests until after JavaScript execution, Speed Kit's method allows the LCP image request to begin immediately. This directly shortens the LCP time, a critical factor for Core Web Vitals and user experience. Because the image source is not modified by client-side scripts, even native browser optimizations like \u003Clink rel=\"preload\"> tags are fully supported and work seamlessly.",{"id":1628,"title":1629,"titles":1630,"content":1631,"level":282},"\u002Fdocs\u002Fimage-optimization#additional-transformations","Additional Transformations",[821,821,1594],"The following adjustments can also be applied on-demand to fine-tune image appearance and composition: Cropping and Trimming: Automatically remove whitespace or crop images to fit a specific aspect ratio or to a specific focal point.Quality Adjustment: Dynamically adjust the compression level (e.g., a quality level of 85 is often the default) to perfectly balance file size and visual fidelity.",{"id":1633,"title":1634,"titles":1635,"content":1636,"level":282},"\u002Fdocs\u002Fimage-optimization#metadata-management","Metadata Management",[821,821,1594],"By default, to achieve the smallest possible file size, our service automatically strips non-essential metadata from images. This includes information like camera settings (EXIF), descriptive data, and color profiles. Removing this data can significantly reduce the size of an image file without affecting its visual appearance. The color profile information is applied to the image before being removed to ensure colors are rendered correctly.",{"id":1638,"title":1639,"titles":1640,"content":1641,"level":236},"\u002Fdocs\u002Fimage-optimization#activation-integration","Activation & Integration",[821,821],"Speed Kit's Image Optimization is an opt-in feature designed for customers who do not already have a dedicated image optimization solution in place. While powerful, it is not activated by default, ensuring that it provides maximum value without interfering with existing workflows. During the integration phase, our Product Integration team conducts a thorough analysis to determine if activating image optimization will provide a considerable performance benefit for your site. This evaluation considers your existing infrastructure and the potential uplift. If the feature is deemed beneficial, our team will activate it for you.",{"id":1643,"title":1644,"titles":1645,"content":1646,"level":236},"\u002Fdocs\u002Fimage-optimization#advanced-features-control","Advanced Features & Control",[821,821],"While Speed Kit's Image Optimization is designed to be fully automatic, it provides tools for fine-grained control and handles more advanced use cases.",{"id":1648,"title":1649,"titles":1650,"content":1651,"level":282},"\u002Fdocs\u002Fimage-optimization#manual-controls","Manual Controls",[821,821,1644],"Through the Speed Kit Dashboard and Refresh API, you have full control and visibility over the image cache. The dashboard includes a Cache Explorer, which allows you to check exactly which images and other assets are currently held in the cache. If a source image is updated or needs to be removed, you can then trigger updates or purges directly from the dashboard or programmatically via our API, just as you would for HTML or other assets.",{"id":1653,"title":1654,"titles":1655,"content":1656,"level":282},"\u002Fdocs\u002Fimage-optimization#controlling-optimization-with-whitelisting-blacklisting","Controlling Optimization with Whitelisting & Blacklisting",[821,821,1644],"Speed Kit provides granular control over which images are optimized. While the default behavior is to accelerate all images passing through our service, you can use either whitelisting or blacklisting to fine-tune this process. Whitelisting (Opt-In): This approach allows you to specify the only images or URL patterns that Speed Kit should optimize. All other images will be ignored and served directly from your origin. This method is useful when you only want to target a small, specific subset of your site's images for acceleration.Blacklisting (Opt-Out): This is the more common approach. You can add specific image URLs or URL patterns to a blacklist to exclude them from Speed Kit's optimization. This is ideal for preventing modification of sensitive images, such as pixel-perfect tracking images or specific brand assets that must remain untouched.",{"id":1658,"title":1659,"titles":1660,"content":1661,"level":282},"\u002Fdocs\u002Fimage-optimization#scalability-delivery","Scalability & Delivery",[821,821,1644],"The image optimization pipeline is built on the same scalable infrastructure as the rest of Speed Kit, designed to handle massive product catalogs with millions of images. Edge Delivery: All transformations and optimizations are performed and cached at the network edge, close to your users. This reduces latency and origin server load, ensuring the fastest possible delivery.High Availability: Leveraging a global CDN, the service is resilient and ensures high availability, even during traffic spikes.",{"id":1663,"title":1664,"titles":1665,"content":1666,"level":259},"\u002Fdocs\u002Finstallation-guide","Installation Guide",[],"A step-by-step guide to integrating Speed Kit, from the kickoff meeting through technical setup, QA, and go-live.",{"id":1668,"title":1669,"titles":1670,"content":230,"level":231},"\u002Fdocs\u002Finstallation-guide#how-to-integrate-speed-kit-a-step-by-step-guide","How to Integrate Speed Kit: A Step-by-Step Guide",[1664],{"id":1672,"title":18,"titles":1673,"content":1674,"level":236},"\u002Fdocs\u002Finstallation-guide#key-takeaways",[1664,1669],"Effortless Setup: Get started in minutes with our one-click plugins for popular shop systems or by copying a single line of code from your personalized guide.We Do the Hard Work: After the initial setup, our dedicated Product Integration team handles all the configuration for you.Simple & Risk-Free: You can easily verify the setup with our browser extension and just as easily uninstall Speed Kit if you choose not to proceed after testing.",{"id":1676,"title":45,"titles":1677,"content":1678,"level":236},"\u002Fdocs\u002Finstallation-guide#introduction",[1664,1669],"Integrating Speed Kit is designed to be exceptionally fast and simple and require minimal effort from your team. We provide a guided process where our experts handle all the heavy lifting. This guide walks you through the straightforward process to get your website accelerated.",{"id":1680,"title":1681,"titles":1682,"content":1683,"level":236},"\u002Fdocs\u002Finstallation-guide#the-standard-integration-process","The Standard Integration Process",[1664,1669],"If your website does not run on one of the platforms listed above, we have streamlined our onboarding into four simple steps.",{"id":1685,"title":1686,"titles":1687,"content":1688,"level":282},"\u002Fdocs\u002Finstallation-guide#step-1-the-kickoff-meeting","Step 1: The Kickoff Meeting",[1664,1669,1681],"The process begins with a collaborative kickoff meeting where we align on your project timeline and define a rollout plan. To clarify the technical details required to build your custom configuration, we highly recommend that a key technical stakeholder from your team (e.g., a lead developer or solution architect) joins this meeting. This ensures we can efficiently address the following questions: Which page types should be accelerated?What data on your pages is dynamic, such as prices or stock levels?Are you using any third-party tools, like waiting rooms or A\u002FB testing solutions, that Speed Kit needs to integrate with?How can we automatically detect when a new deployment occurs on your site?What is the typical frequency, timing, and scope of your deployments?Do you have a staging or testing environment available that we can use for the initial setup and QA?Are there any rate limits on your backend systems that we should configure Speed Kit to respect?Do you perform regular bulk updates, such as for your product catalog, and what is their schedule?What is your desired rollout strategy?",{"id":1690,"title":1691,"titles":1692,"content":230,"level":282},"\u002Fdocs\u002Finstallation-guide#step-2-your-technical-setup","Step 2: Your Technical Setup",[1664,1669,1681],{"id":1694,"title":1695,"titles":1696,"content":1697,"level":288},"\u002Fdocs\u002Finstallation-guide#for-shopify-stores","For Shopify Stores",[1664,1669,1681,1691],"For Shopify, the technical setup is automated. Simply install the official Speed Kit app from the Shopify App Store. The app will handle the necessary technical steps for you. To allow us to crawl your pages, you also need to generate a crawling token. Please follow the instructions on the Shopify help page to generate the token. After generating the key in your Shopify Admin Panel, follow these steps: Navigate to your Speed Kit Dashboard and select Configs from the sidebar.Under Configure Crawler Access Signature, you will find three fields: ⁠Signature, ⁠Signature-Input, and ⁠Signature-Agent.Copy the data from the key you generated and paste it into the corresponding fields.\u2029Click Save.",{"id":1699,"title":1700,"titles":1701,"content":1702,"level":288},"\u002Fdocs\u002Finstallation-guide#for-all-other-platforms","For All Other Platforms",[1664,1669,1681,1691],"For any other platform, your setup involves three simple actions, which most customers complete in two hours. Speed Kit provides a personalized integration guide with clear copy-and-paste instructions for each step (example: Installation Guide). Integrate the Script Tag: Add a single script tag to your site's HTML to install the Speed Kit Service Worker.Host the Service Worker File: Place the provided Service Worker file in the root path of your domain.Whitelist Our IP Addresses: To ensure flawless communication, update your firewall settings to allow requests from our backend system's fixed IP address range. You can instantly verify that your setup is correct using the Installation Check in the Status dashboard of our Speed Kit Chrome Extension. When all steps are completed correctly, the extension will show blue checkmarks next to each requirement. If any part of the setup is incorrect, the extension will immediately flag the specific issue. It also provides clear, step-by-step instructions on how to resolve the exact problem, allowing you to fix it quickly and easily without guesswork.",{"id":1704,"title":1705,"titles":1706,"content":1707,"level":288},"\u002Fdocs\u002Finstallation-guide#alternative-method-using-a-tag-manager-not-recommended","Alternative Method: Using a Tag Manager (Not Recommended)",[1664,1669,1681,1691],"While technically possible, integrating Speed Kit via a tag manager (e.g., Google Tag Manager) is strongly discouraged. Industry reports show that up to 45% of internet users have ad blockers that block tag managers by default. This leads to several critical issues: Loss of Coverage: A large portion of your audience will not be accelerated, as Speed Kit will fail to load for them.Incomplete RUM Data: Our performance monitoring (RUM) will also be blocked, creating a massive blind spot in your analytics. Technical Conflicts: This method is incompatible if your website already uses its own service worker.",{"id":1709,"title":1710,"titles":1711,"content":1712,"level":282},"\u002Fdocs\u002Finstallation-guide#step-3-we-build-your-configuration","Step 3: We Build Your Configuration",[1664,1669,1681],"Our work begins immediately after the kickoff meeting, running in parallel while you complete your technical setup. The Speed Kit Product Integration team builds the perfect configuration tailored to your site's architecture based on the information from our call. There are no complex forms to fill out or technical settings for you to manage. To ensure the setup is flawless, our team may have a few technical questions, so we just need a designated contact person on your side to support us. While we work in parallel, please note that your technical setup must be complete before we can move on to the QA phase.",{"id":1714,"title":1715,"titles":1716,"content":1717,"level":282},"\u002Fdocs\u002Finstallation-guide#step-4-quality-assurance-qa","Step 4: Quality Assurance (QA)",[1664,1669,1681],"Once your technical setup is complete and our Product Integration team has built the configuration, we move to the quality assurance phase. While our internal QA team conducts a thorough validation of the setup, we encourage your team to perform its own testing. You can easily activate Speed Kit on the live site—visible only to your local browser—without any risk to your users. This can be done using our Chrome browser extension, a special bookmarklet, or a URL parameter, allowing you to test under real-world conditions. For detailed instructions, please refer to our QA documentation.",{"id":1719,"title":1720,"titles":1721,"content":1722,"level":282},"\u002Fdocs\u002Finstallation-guide#step-5-go-live-and-fine-tuning","Step 5: Go-Live and Fine-Tuning",[1664,1669,1681],"Following a successful QA phase, we will schedule a Go-Live meeting to confirm readiness and initiate the rollout. After the call, we will activate Speed Kit for 10% of your users. This initial phase allows us to collect valuable Real User Monitoring (RUM) data to fine-tune the configuration and further optimize performance. Once this is complete, we expand the rollout to a 50\u002F50 A\u002FB test to compare Speed Kit's performance against your original site with statistical accuracy.",{"id":1724,"title":1725,"titles":1726,"content":1727,"level":282},"\u002Fdocs\u002Finstallation-guide#step-6-business-impact-review","Step 6: Business Impact Review",[1664,1669,1681],"Once the A\u002FB test has collected statistically significant data, we schedule a final review meeting. In this session, our Customer Success Manager will present a detailed business impact analysis. This report visualizes how the measured performance uplift translates into key business metrics and potential ROI. This transparent, data-driven overview empowers you to make a final, informed decision about using Speed Kit.",{"id":1729,"title":1730,"titles":1731,"content":1732,"level":236},"\u002Fdocs\u002Finstallation-guide#self-service-integrations-wordpress-plesk","Self-Service Integrations: WordPress & Plesk",[1664,1669],"For WordPress and Plesk, we offer self-service plugins that allow you to get started on your own. Simply install the appropriate extension and follow the on-screen instructions. WordPress: Install the Speed Kit plugin from the WordPress Plugin Directory.Plesk: Install the Speed Kit extension from the Plesk Extensions Catalog. After installation, the plugin will guide you through the setup. Our team will then take over to finalize the configuration.",{"id":1734,"title":1735,"titles":1736,"content":1737,"level":236},"\u002Fdocs\u002Finstallation-guide#support-reversibility","Support & Reversibility",[1664,1669],"That’s all you have to do. Our Product Integration team is happy to support you at every stage. And if you decide Speed Kit isn't for you after testing, uninstalling is as simple as removing the JavaScript snippet or deactivating the plugin. For those who want to dive deeper into our technology, we invite you to read our detailed documentation: Dynamic Caching: Learn how Speed Kit's multi-layer architecture caches dynamic content while ensuring it remains perfectly synchronized with your origin server.Uninterrupted Performance: Discover the architecture, fail-safes, and support systems that guarantee reliability.",{"id":1739,"title":1740,"titles":1741,"content":1742,"level":259},"\u002Fdocs\u002Fmeasuring-web-performance","Measuring Web Performance",[],"A guide to lab vs. field data, Core Web Vitals, and using RUM to connect performance metrics to business KPIs in e-commerce.",{"id":1744,"title":1745,"titles":1746,"content":230,"level":231},"\u002Fdocs\u002Fmeasuring-web-performance#how-to-measure-web-performance","How to Measure Web Performance",[1740],{"id":1748,"title":18,"titles":1749,"content":1750,"level":236},"\u002Fdocs\u002Fmeasuring-web-performance#key-takeaways",[1740,1745],"Prioritize Field Data (RUM): While lab data is useful for debugging, Real User Monitoring (RUM) provides the most accurate picture of true user experience by capturing performance across all devices, networks, and locations. This data is essential for making informed business decisions.Focus on User-Centric Metrics: Modern web performance revolves around Google's Core Web Vitals—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—as they measure the actual user experience of loading, interactivity, and visual stability.Connect Performance to Business KPIs: The ultimate goal of measurement is to drive business success. Use RUM data to correlate performance metrics with key business indicators like conversion rates, bounce rates, and average order value to understand the financial impact of speed and justify optimization efforts.",{"id":1752,"title":45,"titles":1753,"content":1754,"level":236},"\u002Fdocs\u002Fmeasuring-web-performance#introduction",[1740,1745],"In the competitive world of e-commerce, website performance is not just a technical detail—it is a critical driver of business success. A fast, responsive, and stable website directly impacts user satisfaction, search engine rankings, and ultimately, your bottom line. However, to effectively improve performance, you must first be able to accurately measure it. This guide provides a comprehensive overview of web performance measurement, designed for both technical and business stakeholders in e-commerce. Understanding how to measure performance involves distinguishing between two fundamental types of data: lab data from controlled, synthetic tests and field data (also known as Real User Monitoring or RUM) collected from your actual users. We will explore the essential metrics you should be tracking, with a deep dive into Google's Core Web Vitals, which have become the industry standard for user-centric measurement. Finally, we will outline a strategic framework for using this data to set meaningful goals, prevent regressions, and build a culture of performance that drives tangible business value.",{"id":1756,"title":1757,"titles":1758,"content":1759,"level":236},"\u002Fdocs\u002Fmeasuring-web-performance#lab-data-vs-field-data-understanding-your-tools","Lab Data vs. Field Data: Understanding Your Tools",[1740,1745],"To build an effective performance strategy, it's crucial to understand the two primary types of data at your disposal: lab data and field data. They answer different questions and are both vital for a comprehensive measurement plan. A common and costly mistake is relying solely on your own experience; a site that feels fast on a developer's high-end laptop is often frustratingly slow for an average user on an older mobile device with a spotty connection.",{"id":1761,"title":1762,"titles":1763,"content":1764,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#lab-data-synthetic-monitoring","Lab Data (Synthetic Monitoring)",[1740,1745,1757],"Lab data is collected in a controlled, simulated environment. Tools like Google PageSpeed Insights, Google Lighthouse, or WebPageTest load your website on a predefined device with a consistent network speed, creating reproducible results.",{"id":1766,"title":1767,"titles":1768,"content":1769,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#key-characteristics","Key Characteristics",[1740,1745,1757,1762],"Reproducible & Consistent: Because the environment is fixed, you can run tests repeatedly and get very similar results, making it perfect for comparing changes over time.Immediate Feedback: You can run tests on demand and get results quickly, which is ideal for debugging and iterative development.Rich Diagnostics: Lab tools offer detailed information, such as waterfall charts and precise request timings, that are invaluable for pinpointing the root cause of a specific bottleneck.Ideal for Pre-Production: It's the best way to assess the performance impact of new features before they are deployed to your live site and to integrate performance checks into your CI\u002FCD pipeline.",{"id":1771,"title":1772,"titles":1773,"content":1774,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#when-to-use-lab-data","When to Use Lab Data",[1740,1745,1757,1762],"Debugging: To isolate and fix a known performance issue in a controlled setting.Regression Testing: To automatically check if a new code change has negatively impacted performance before it goes live.Validating Fixes: To confirm that an optimization has had the intended technical effect (e.g., reduced bundle size).",{"id":1776,"title":1777,"titles":1778,"content":1779,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#field-data-real-user-monitoring-rum","Field Data (Real User Monitoring - RUM)",[1740,1745,1757],"Field data, or RUM, is performance information collected directly from the real users visiting your website. It captures the true, unfiltered user experience across the entire spectrum of devices, network conditions, browser versions, and geographic locations.",{"id":1781,"title":1767,"titles":1782,"content":1783,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#key-characteristics-1",[1740,1745,1757,1777],"Authentic User Experience: It is the source of truth for how your website actually performs for your audience.Reflects Real-World Variability: It accounts for all the unpredictable variables that lab tests cannot, such as network fluctuations, device throttling due to low battery, or concurrent background tasks.Drives SEO: Google's Core Web Vitals, a direct ranking signal, are measured using field data from the Chrome User Experience Report (CrUX).Correlates to Business Impact: RUM is the only way to directly connect performance metrics to business KPIs, such as conversion rates and user engagement.",{"id":1785,"title":1786,"titles":1787,"content":1788,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#when-to-use-field-data","When to Use Field Data",[1740,1745,1757,1777],"Understanding True User Experience: To see the performance your actual customers are getting.Monitoring Core Web Vitals for SEO: To track the metrics that directly influence your Google search ranking.Prioritizing Optimizations: To identify which issues are impacting the largest or most valuable segments of your user base.Setting Realistic Goals: To establish performance targets based on how speed impacts your specific business outcomes.",{"id":1790,"title":1791,"titles":1792,"content":1793,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#understanding-the-chrome-user-experience-report-crux","Understanding the Chrome User Experience Report (CrUX)",[1740,1745,1757,1777],"A critical source of field data is the Chrome User Experience Report (CrUX), which powers the Core Web Vitals assessments in tools like Google Search Console. It is essential to understand that CrUX data is collected exclusively from real Chrome browser users who have opted into syncing their browsing history and have usage statistic reporting enabled. This means the data represents only a subset of your total user base and does not include users on other browsers like Safari or Firefox. This is a key reason why a dedicated RUM solution, which captures data from all browsers, provides a more complete picture of your actual user performance.",{"id":1795,"title":1796,"titles":1797,"content":1798,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#why-a-dedicated-rum-solution-is-recommended","Why a Dedicated RUM Solution is Recommended",[1740,1745,1757],"While Google's free tools are an excellent entry point, a dedicated Real User Monitoring (RUM) solution offers significant advantages for comprehensive performance optimization. Real-Time Data & Immediate Insights: Get proactive alerts when performance degrades, allowing for rapid response.Granular User Segmentation & Drill-Down: Segment performance data by location, device, browser, network, or custom business tags to find where issues are occurring.Comprehensive Browser Coverage: Unlike CrUX (Chrome-only), RUM solutions collect data from all browsers your users employ.Correlation with Business Metrics: Directly link performance metrics to business outcomes like conversion rates and revenue.Deeper Diagnostics and Debugging: Gain richer context for performance issues, including error tracking integration.Data Ownership and Flexibility: You own the collected data and have full control over how it is analyzed.",{"id":1800,"title":1801,"titles":1802,"content":1803,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#the-proactive-advantage-of-real-time-rum","The Proactive Advantage of Real-Time RUM",[1740,1745,1757],"The primary limitation of free tools is their reliance on CrUX data, which is aggregated over a 28-day rolling period. This significant delay means that by the time a performance problem appears in your Google Search Console, it has already been negatively affecting your users—and potentially your SEO ranking—for weeks. A real-time RUM solution is the only way to get ahead of this lag. Speed Kit's architecture includes an integrated Real User Monitoring system that acts as an early warning system, capturing performance data as it happens. This core capability allows our system to react to changes, but it also provides a rich data source for deeper analysis. For customers who want to harness this powerful, real-time data, we offer dedicated dashboard access as an optional add-on service. This gives you a competitive advantage by providing an authentic, live picture of how users genuinely experience your site. You can segment performance data and correlate it directly with your business KPIs to make data-driven decisions long before lagging indicators would show a problem. To learn more about this service, please refer to our Speed Kit RUM Documentation.",{"id":1805,"title":1806,"titles":1807,"content":1808,"level":236},"\u002Fdocs\u002Fmeasuring-web-performance#what-to-measure-key-performance-metrics","What to Measure: Key Performance Metrics",[1740,1745],"While there are many metrics you can track, modern web performance focuses on a few key indicators that best represent the user's perceptual journey. Speed Kit is engineered to deliver significant improvements across these critical metrics, from server response times to visual stability. To understand the specific impact Speed Kit has on each of these metrics, please see our documentation: Speed Kit's Impact on Web Performance Metrics. These key indicators can be broken down into foundational metrics and the Core Web Vitals.",{"id":1810,"title":1811,"titles":1812,"content":1813,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#foundational-metrics","Foundational Metrics",[1740,1745,1806],"These metrics are the building blocks of page load performance. A slowness in these early stages will inevitably delay everything that follows.",{"id":1815,"title":1816,"titles":1817,"content":1818,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#time-to-first-byte-ttfb","Time To First Byte (TTFB)",[1740,1745,1806,1811],"TTFB measures the time from when a user makes a request to when their browser receives the very first byte of the HTML response. It is a fundamental measure of server and network responsiveness. Good: Under 800 milliseconds (ms)Needs Improvement: 800 ms to 1.8 secondsPoor: Over 1.8 seconds",{"id":1820,"title":1821,"titles":1822,"content":1823,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#why-it-matters","Why it Matters",[1740,1745,1806,1811,1816],"A slow TTFB creates a bottleneck for every subsequent metric. Optimizing it is the critical first step.",{"id":1825,"title":1826,"titles":1827,"content":1828,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#first-contentful-paint-fcp","First Contentful Paint (FCP)",[1740,1745,1806,1811],"FCP marks the point when the browser renders the first piece of content from the DOM (e.g., text, an image, or a logo). It answers the user's initial question: \"Is it happening?\" Good: Under 1.8 secondsNeeds Improvement: 1.8 to 3.0 secondsPoor: Over 3.0 seconds",{"id":1830,"title":1821,"titles":1831,"content":1832,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#why-it-matters-1",[1740,1745,1806,1811,1826],"A fast FCP provides the first visual feedback that the page is loading, reducing the frustrating blank screen experience and lowering bounce rates.",{"id":1834,"title":1835,"titles":1836,"content":1837,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#the-core-web-vitals","The Core Web Vitals",[1740,1745,1806],"As the industry's quasi-standard, Google's Core Web Vitals (CWV) are the most modern set of metrics designed to measure real-world user experience. Because they are direct ranking factors for SEO and can also influence Google Ad prices, they are a critical focus for business success. For a detailed analysis of how performance impacts these outcomes, see our documentation on Speed Kit's Business Impact. However, it is important to note that not all browsers have adopted these metrics, as the table below shows. MetricChromeEdgeFirefoxSafari and iOSLCP✅ Supported✅ Supported✅ Supported✅ SupportedINP✅ Supported✅ Supported✅ Supported✅ SupportedCLS✅ Supported✅ Supported❌ Not supported❌ Not supported",{"id":1839,"title":1840,"titles":1841,"content":1842,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#largest-contentful-paint-lcp","Largest Contentful Paint (LCP)",[1740,1745,1806,1835],"LCP measures when the largest content element (typically a hero image or a large block of text) in the viewport becomes visible. It signals that the main content of the page has loaded, answering the user's question: \"Is it useful?\". While the industry has aligned on Google's standard thresholds, our analysis of business impact and cognitive psychology shows that a more granular approach is necessary to achieve a competitive advantage in e-commerce. Simply aiming for Google's \"good\" baseline is not enough to maximize user engagement and conversion rates.",{"id":1844,"title":1845,"titles":1846,"content":1847,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#googles-standard-thresholds","Google's Standard Thresholds",[1740,1745,1806,1835,1840],"Google defines three primary buckets for LCP performance, which serve as the industry baseline: Good: 2.5 seconds or lessNeeds Improvement: Between 2.5 and 4.0 secondsPoor: Over 4.0 seconds",{"id":1849,"title":1850,"titles":1851,"content":1852,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#the-speed-kit-standard-high-resolution-lcp","The Speed Kit Standard: High-Resolution LCP",[1740,1745,1806,1835,1840],"To provide more actionable goals and reflect the true impact of speed, Speed Kit splits Google's \"Good\" category into three distinct tiers. This high-resolution standard is used across all of our tooling, including our RUM dashboards and reporting, to help you focus on optimizations that deliver a truly superior user experience and drive business success. Instant (\u003C 300 ms): This threshold represents the technical version of instant. It is the tangible goal for a seamless user experience, achievable today using the best available technology: predictive pre-rendering. While cognitive research defines true human instantaneous perception at 100 ms, our sub-300 ms target is based on the pinnacle of what can be delivered in a real-world browser environment.Fast (\u003C 1,000 ms): The user remains in a state of flow, and the interface feels highly responsive. This should be the primary target for any e-commerce site looking to keep users engaged.OK (\u003C 2,500 ms): This represents the original boundary for Google's \"Good\" threshold and is the baseline for SEO. Meeting this target is essential to avoid potential ranking penalties, but since it represents a noticeable delay for users, it should be considered table stakes, not a competitive advantage.Needs Improvement (\u003C 4,000 ms): Aligns with Google's standard. The user is actively waiting, and frustration is likely.Poor (> 4,000 ms): Aligns with Google's standard. High abandonment risk and a significant barrier to business success.",{"id":1854,"title":1855,"titles":1856,"content":1857,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#why-these-thresholds-matter","Why These Thresholds Matter",[1740,1745,1806,1835,1840],"Our extended thresholds are based on three key areas of research: Cognitive Psychology: The foundational principles of response time perception originate from Robert B. Miller's 1968 study on mainframe computer interactions, \"Response Time in Man-Computer Conversational Transactions\". This research was later tested and popularized for the modern web by the Nielsen Norman Group. Their work confirms that 1.0 second is the limit for a user's flow of thought to remain uninterrupted, while interactions under 100 ms feel truly instantaneous. You can read their full analysis in the article, \"Response Times: The 3 Important Limits\".E-commerce Business Impact: Analysis from our RUM data, visualized in our business impact chart, reveals a direct and dramatic correlation between LCP and conversion rates. The financial benefit is not linear; the biggest gains are realized as load times become much faster than the 2.5s baseline. The most significant revenue uplift for e-commerce sites lies in achieving an LCP of under 1.0 second. For a detailed analysis, please refer to our documentation on Speed Kit's Business Impact.Technical Achievability: When Google first defined the LCP thresholds, widespread browser support for effective pre-rendering did not exist. However, the recent introduction of technologies like the Speculation Rules API has changed what is possible. Speed Kit's predictive preloading engine leverages these modern capabilities to pre-render pages in the background before a user even clicks. Based on our real-user measurements, this approach makes LCP values between 20 ms and 300 ms technically achievable, making an \"Instant\" experience a realistic goal today.",{"id":1859,"title":1860,"titles":1861,"content":1862,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#interaction-to-next-paint-inp","Interaction to Next Paint (INP)",[1740,1745,1806,1835],"INP measures a page's overall responsiveness to user interactions like clicks, taps, and key presses. It calculates the time from the user's action until the next visual update is painted on the screen. Good: 200 milliseconds (ms) or lessNeeds Improvement: Between 200 ms and 500 msPoor: Over 500 ms",{"id":1864,"title":1821,"titles":1865,"content":1866,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#why-it-matters-2",[1740,1745,1806,1835,1860],"A low INP ensures the user interface feels fluid and responsive. A high INP leads to a laggy, frustrating experience, especially on interactive pages like checkouts or forms.",{"id":1868,"title":1869,"titles":1870,"content":1871,"level":288},"\u002Fdocs\u002Fmeasuring-web-performance#cumulative-layout-shift-cls","Cumulative Layout Shift (CLS)",[1740,1745,1806,1835],"CLS quantifies the visual stability of a page by measuring how much visible elements move around unexpectedly during loading. Good: A score of 0.1 or lessNeeds Improvement: A score between 0.1 and 0.25Poor: A score over 0.25",{"id":1873,"title":1821,"titles":1874,"content":1875,"level":299},"\u002Fdocs\u002Fmeasuring-web-performance#why-it-matters-3",[1740,1745,1806,1835,1869],"A low CLS prevents frustrating experiences where users click on the wrong thing because a button or link shifted at the last second. It is a key indicator of a professional and trustworthy user interface.",{"id":1877,"title":1878,"titles":1879,"content":1880,"level":236},"\u002Fdocs\u002Fmeasuring-web-performance#from-data-to-action-building-a-performance-strategy","From Data to Action: Building a Performance Strategy",[1740,1745],"Measuring performance is only the first step. The true value comes from using that data to build a sustainable culture of performance that protects user experience and drives business growth.",{"id":1882,"title":1883,"titles":1884,"content":1885,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#set-clear-performance-goals","Set Clear Performance Goals",[1740,1745,1878],"Before starting any project or optimization effort, establish clear, measurable performance goals. This is the most critical step to avoid costly mistakes. Start with Reality: Use your RUM data to understand your current baseline performance.Define Your \"North Star\": Set goals based on the Core Web Vitals (e.g., \"75th percentile of users should have an LCP under 2.5 seconds\").Focus on Key User Journeys: Prioritize the performance of your most critical flows, such as the path from the homepage to a completed purchase.Agree on a Source of Truth: The entire team must agree on a single tool (ideally your RUM solution) to be the official source of truth for tracking progress against goals.",{"id":1887,"title":1888,"titles":1889,"content":1890,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#establish-performance-budgets","Establish Performance Budgets",[1740,1745,1878],"Performance budgets are technical limits integrated into your development process to prevent regressions. They are your primary defense against the natural tendency for sites to slow down over time as new features are added. Budget for User Outcomes: Set budgets on the Core Web Vitals (LCP, INP, CLS), not just on simple metrics like file size. This ensures you are always focused on the actual user experience.Automate Enforcement: Integrate budget checks into your CI\u002FCD pipeline. Automatically trigger a warning or block a deployment if a code change violates a performance budget.Adopt an Incremental Approach: For existing sites, set an initial budget based on your current performance to prevent things from getting worse. After every successful optimization, tighten the budget to \"lock in\" the gains.",{"id":1892,"title":1893,"titles":1894,"content":1895,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#correlate-performance-with-business-kpis","Correlate Performance with Business KPIs",[1740,1745,1878],"To make the business case for performance and understand where to invest, you must connect your metrics to financial outcomes. Analyze Your RUM Data: Use your RUM solution to segment users and analyze how metrics like LCP and INP affect your conversion rate, average order value, and bounce rate.Identify \"How Fast is Fast Enough\": Determine the performance threshold where you see the biggest gains in business metrics. This helps you prioritize efforts that will have the greatest ROI. For many e-commerce sites, our data shows that a load time under 1 second correlates with the highest conversion rates.Justify Investment: Use this data to demonstrate to stakeholders that investing in performance is not a cost center but a direct driver of revenue and profitability.",{"id":1897,"title":1898,"titles":1899,"content":1900,"level":236},"\u002Fdocs\u002Fmeasuring-web-performance#measuring-performance-in-single-page-applications-spas","Measuring Performance in Single-Page Applications (SPAs)",[1740,1745],"Single-Page Applications (SPAs) offer fluid, app-like user experiences by dynamically rewriting content instead of performing full page reloads. However, this modern architecture introduces significant challenges for performance measurement that business and technical owners are often unaware of. Standard performance tools were designed for traditional multi-page websites, and as a result, they often fail to capture the true user experience within an SPA.",{"id":1902,"title":1903,"titles":1904,"content":1905,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#the-measurement-blind-spot","The Measurement Blind Spot",[1740,1745,1898],"The fundamental problem is that for many analytics and RUM tools, only the initial page load is measured accurately. When a user performs a \"soft navigation\" (clicking a link that loads a new view without a full page reload), the Core Web Vitals are often not re-measured. This creates a massive blind spot where significant portions of the user journey are untracked, leading to a distorted view of actual performance. Largest Contentful Paint (LCP): Standard LCP is only measured for the initial, \"hard\" navigation. It completely misses the load time for the main content of subsequent views that appear after a soft navigation, which is a critical perceived performance metric for the user.Interaction to Next Paint (INP) & Cumulative Layout Shift (CLS): While these metrics continue to be measured throughout the user's session, any issues that occur after a soft navigation are incorrectly attributed back to the initial page load. This makes it extremely difficult to identify which specific component or user interaction caused a slow response or a layout shift deep within the application.",{"id":1907,"title":1908,"titles":1909,"content":1910,"level":282},"\u002Fdocs\u002Fmeasuring-web-performance#the-solution-spa-aware-real-user-monitoring","The Solution: SPA-Aware Real User Monitoring",[1740,1745,1898],"Accurately measuring the user experience in Single-Page Applications is a well-known industry challenge. While Google is developing a standardized approach for soft navigations, it is not expected to be released until early 2026. To bridge this measurement gap today, Speed Kit offers a dedicated solution to track the most critical aspects of SPA performance. Our Real User Monitoring (RUM) has been enhanced to specifically measure the Largest Contentful Paint (LCP) for soft navigations. This provides an authentic picture of the perceived load speed when users navigate between views within your application. This ensures that significant performance issues can be identified and optimized now, without waiting for future browser updates. For a detailed technical explanation of this feature, please refer to our blog post: Measuring Largest Contentful Paint in Single-Page Applications.",{"id":1912,"title":1913,"titles":1914,"content":1915,"level":259},"\u002Fdocs\u002Fpredictive-preloading","Predictive Preloading",[],"How Speed Kit predicts, pre-caches, and pre-renders the next page to deliver instant e-commerce navigation without overloading your origin.",{"id":1917,"title":1918,"titles":1919,"content":230,"level":231},"\u002Fdocs\u002Fpredictive-preloading#predictive-preloading-achieving-instant-e-commerce-navigation","Predictive Preloading: Achieving Instant E-commerce Navigation",[1913],{"id":1921,"title":18,"titles":1922,"content":1923,"level":236},"\u002Fdocs\u002Fpredictive-preloading#key-takeaways",[1913,1918],"Instant Navigation & Enhanced User Experience: Achieve sub-300ms page loads and virtually instantaneous navigation by accurately predicting user actions and proactively pre-rendering, significantly boosting user engagement and conversion rates.Intelligent & Secure System Operation: A hyper-accurate prediction engine drives a comprehensive infrastructure that intelligently manages client-side resources, safeguards against unintended side effects, and seamlessly integrates without adding load to your origin servers.Strategic Business Advantage: By leveraging Speed Kit's pre-built solution, businesses can bypass immense engineering challenges and ongoing maintenance costs, freeing internal teams to focus on core product innovation and competitive differentiation.",{"id":1925,"title":45,"titles":1926,"content":1927,"level":236},"\u002Fdocs\u002Fpredictive-preloading#introduction",[1913,1918],"While many website owners focus on achieving 'good' scores for metrics like Core Web Vitals, leading e-commerce businesses understand that significant business value, including increased conversions and user engagement, unlocks when page navigations become truly seamless and instantaneous. Every page load involves a sequence of delays: network latency to fetch data, server time to process requests, and client-side resources to render the page. Traditional optimization methods eventually hit a performance plateau due to these sequential dependencies. To overcome this fundamental barrier and enable the next level of growth, the approach must shift from passively reacting to user clicks to proactively predicting them. Predictive Preloads is Speed Kit's engineering solution to this challenge. It operates through three core phases to deliver an instant user experience: Prediction: Machine learning models identify the user's likely next navigation.Pre-caching: The service worker fetches the HTML for these predicted pages and stores them on the user's device.Pre-rendering: The browser fully renders these predicted pages in the background using speculation rules. This process ensures that when a user clicks a predicted link, the page is already fully rendered in memory. The browser simply swaps it into view, resulting in a virtually instantaneous navigation.",{"id":1929,"title":1930,"titles":1931,"content":1932,"level":236},"\u002Fdocs\u002Fpredictive-preloading#how-it-works-four-foundational-elements","How It Works: Four Foundational Elements",[1913,1918],"Delivering truly instant navigation through prediction is complex. A naive implementation could degrade user experience, overload infrastructure, or even corrupt business-critical data. Speed Kit's Predictive Preloads addresses four distinct and crucial engineering challenges to provide a production-ready and effective solution.",{"id":1934,"title":1935,"titles":1936,"content":1937,"level":282},"\u002Fdocs\u002Fpredictive-preloading#hyper-accurate-prediction","Hyper-Accurate Prediction",[1913,1918,1930],"The efficiency and effectiveness of the entire system depend directly on the quality of its predictions. A prediction that's too late or missed is a lost opportunity, while an incorrect guess wastes resources. The core challenge is to accurately determine which page a user will visit next, and precisely when to start the preload. To achieve precise predictions, Speed Kit uses a sophisticated, multi-layered machine learning architecture. This system is built on extensive Real-User Monitoring (RUM) data. Our general prediction algorithms are refined based on abstract learnings from billions of user journeys, while the prediction models for each customer are trained exclusively on their own site's anonymous data. This allows us to create a highly customized model by learning from link metadata and URL transitions specific to that individual website. To balance computational efficiency with predictive power, Speed Kit combines multiple models for preload decisions. While large-scale models can run on server infrastructure, a significant amount of predictive information is only available directly on the user's device.",{"id":1939,"title":1940,"titles":1941,"content":1942,"level":288},"\u002Fdocs\u002Fpredictive-preloading#on-device-models","On-Device Models",[1913,1918,1930,1935],"These models train on real-time signals captured directly on the user's device, including: Link Characteristics: Such as the position, size, content, and surrounding area of a link.User Behavior: Including scroll velocity and frequency and cursor or touch distance from interactive elements. On-device models also consider the user's specific device and individual page layout. These models load and execute within the user's browser, providing powerful and immediate predictions.",{"id":1944,"title":1945,"titles":1946,"content":1947,"level":288},"\u002Fdocs\u002Fpredictive-preloading#server-side-models","Server-Side Models",[1913,1918,1930,1935],"Server-side models augment on-device predictions via an API, enabling more complex analysis. This includes: Complex Probabilistic Journey Analysis: Understanding likely user paths.Semantic Content Similarity: Using embeddings to identify semantically related pages. These more complex models identify pages with the strongest connections within the current user journey and require server-side execution due to their computational demands and model size.",{"id":1949,"title":1950,"titles":1951,"content":1952,"level":288},"\u002Fdocs\u002Fpredictive-preloading#heat-maps","Heat Maps",[1913,1918,1930,1935],"Heat Maps, specific to the page the user is currently viewing, boost the probabilities of links being clicked based on historical user interaction \"temperature.\" The final prediction is a dynamic synthesis of these multiple layers, constantly evolving as more data goes into the prediction engine.",{"id":1954,"title":1955,"titles":1956,"content":1957,"level":288},"\u002Fdocs\u002Fpredictive-preloading#lead-time-the-decisive-metric","Lead Time - The Decisive Metric",[1913,1918,1930,1935],"Simpler approaches, like pre-rendering on hover or touch, can capture some clicked links. However, a common limitation is their late prediction, which gives minimal \"lead time\" for the browser to pre-render the target page. Lead time, defined as the time a browser has to pre-render a page before actual user navigation, is a primary metric Speed Kit optimizes for, alongside prediction accuracy. Lead time has a strong relationship with metrics like Largest Contentful Paint (LCP).",{"id":1959,"title":1960,"titles":1961,"content":1962,"level":288},"\u002Fdocs\u002Fpredictive-preloading#data-privacy-and-model-training","Data Privacy and Model Training",[1913,1918,1930,1935],"Speed Kit’s prediction engine is trained exclusively on anonymous, aggregated RUM signals from user interactions with links on your website. Data from Sensitive Areas is Excluded: Speed Kit does not collect training data for links pointing to sensitive areas that are excluded from acceleration, such as checkout funnels or user account pages.Anonymous Characteristics: The models learn from non-personal, structural data about links. Examples of these characteristics include:\nThe position, size, and surrounding area of a link.User behavior, such as scroll velocity and the cursor's distance from interactive elements.The user's device type and screen layout.Strict Data Isolation: To ensure the highest level of privacy, each customer's prediction model is trained only with their own site's anonymous data. We do not pool data or use one customer's data to train another's model... For a complete overview of our data processing policies, user opt-out options, and GDPR compliance, please refer to our full Speed Kit and Data Compliance documentation.",{"id":1964,"title":1965,"titles":1966,"content":1967,"level":282},"\u002Fdocs\u002Fpredictive-preloading#optimized-infrastructure-load-handling","Optimized Infrastructure Load Handling",[1913,1918,1930],"A system that predictively preloads pages could significantly multiply traffic to your origin server, leading to overwhelming loads and prohibitive costs. Predictive Preloads is engineered to prevent this by implementing a two-step process that efficiently manages load across your infrastructure. Predictive preloading is built upon our core dynamic caching technology, which serves as the foundation for all preloading activities. You only pay for pre-cached pages that the user actually navigates to and views, ensuring payment solely for delivered performance gains.",{"id":1969,"title":1970,"titles":1971,"content":1972,"level":288},"\u002Fdocs\u002Fpredictive-preloading#pre-caching-eliminating-html-network-latency","Pre-Caching: Eliminating HTML Network Latency",[1913,1918,1930,1965],"Preload requests for HTML are fully managed by the Speed Kit infrastructure. This means our edge caches serve the anonymously cached HTML, ensuring these requests never hit your origin servers and guaranteeing zero additional HTML generation load or cost. To achieve this high cache-hit ratio, our standard process is to intelligently pre-warm the cache using Real User Monitoring (RUM) data. By analyzing traffic patterns, our system learns which content is requested most frequently from which specific geographic CDN edge nodes (PoPs). Based on this, it automatically creates a dynamic pre-warming configuration for your site, designed to ensure that the assets for over 95% of your user traffic are already waiting on the closest edge node. This data-driven approach results in a cache-hit ratio that far exceeds traditional CDNs and is a critical foundation for the success of our Predictive Preloading feature, as it guarantees a high pre-caching rate. A fundamental rule ensures preloading only occurs for pages already in our cache, acting as a safeguard against inaccurate predictions. When a user clicks, the service worker immediately retrieves this pre-cached HTML, providing a huge performance boost through instant document delivery, even before a trip to the origin is initiated for personalized content.",{"id":1974,"title":1975,"titles":1976,"content":1977,"level":288},"\u002Fdocs\u002Fpredictive-preloading#pre-rendering-eliminating-render-time","Pre-Rendering: Eliminating Render Time",[1913,1918,1930,1965],"For a truly instantaneous experience, the browser fully renders predicted pages in the background using the modern Speculation Rules API. This powerful feature is only triggered if the page's HTML has already been successfully pre-cached by Speed Kit. Once initiated, the browser pre-renders the page in a hidden tab, loading necessary assets like CSS, JavaScript, and images. The process is highly efficient as it primarily utilizes resources already available in the browser's local cache. While any remaining assets are fetched from your existing CDNs, this typically accounts for a very small portion of the resources, ensuring any potential cost increase is minimal. This proactive preparation reduces navigation times to virtually zero, creating the fastest and smoothest page load experience possible. Upon user click, the browser instantly swaps the pre-rendered page into view. Simultaneously, the Speed Kit Service Worker requests personalized, up-to-date content from your origin. This dynamic data then quickly merges into the preloaded page on the client side, and any necessary JavaScript runs, ensuring data accuracy alongside instant display.",{"id":1979,"title":1980,"titles":1981,"content":1982,"level":288},"\u002Fdocs\u002Fpredictive-preloading#limitations-considerations","Limitations & Considerations",[1913,1918,1930,1965],"While highly effective, the Speculation Rules API and pre-rendering have certain limitations: Browser Support: Currently, the Speculation Rules API for pre-rendering is primarily supported by Chromium-based browsers (e.g., Google Chrome, Microsoft Edge).User Settings: Users can deactivate the pre-rendering feature in their browser settings.Browser Extensions: Users may use browser extensions that prevent pre-rendering.Browser Safeguards: Browsers have built-in safeguards and may automatically deactivate pre-rendering if the user's system cannot cope with the extra load (e.g., on low-memory devices).",{"id":1984,"title":1985,"titles":1986,"content":1987,"level":282},"\u002Fdocs\u002Fpredictive-preloading#intelligent-client-side-resource-management","Intelligent Client-Side Resource Management",[1913,1918,1930],"Predictive pre-caching and pre-rendering pages inherently involve overhead that must be meticulously managed to avoid negatively impacting the user's current experience. Speed Kit minimizes this overhead through two key optimizations: Network Optimization: Speed Kit's serving layer uses delta encoding and compression dictionaries. This ensures that for every loaded page, only the parts different from previously cached pages transmit. This drastically reduces HTML content by 80-90% on top of standard compression, letting Speed Kit pre-cache multiple pages using minimal bandwidth.CPU Protection: To safeguard the browser's main thread and prevent performance bottlenecks, JavaScript is only parsed and compiled during pre-rendering—it is not executed. This critical design choice prevents expensive script evaluation from competing with the user's active tab, significantly reducing background CPU work, preserving battery life, and ensuring the foreground experience remains smooth. During the development and continuous operation of this feature, Speed Kit constantly monitors its own RUM data to validate its real-world impact, making sure the preloading mechanism itself does not introduce any negative performance trade-offs for the user.",{"id":1989,"title":1990,"titles":1991,"content":1992,"level":282},"\u002Fdocs\u002Fpredictive-preloading#eliminating-unwanted-side-effects","Eliminating Unwanted Side-Effects",[1913,1918,1930],"Rendering a page in the background that the user might not ultimately visit carries inherent risks. Predictive Preloads meticulously avoids potential side effects through several mechanisms: Skewed Analytics: Beacons and analytics scripts that fire on unvisited pages can distort data. Predictive Preloads only executes JavaScript once the user actually navigates to the page, preventing premature firing of analytics and other third-party scripts.Altered Server State: Preloading pages could inadvertently change server-side user recommendations or trigger actions like logging out. This is prevented because Speed Kit's pre-caching fetches are always performed in an anonymous context, without user cookies or specific headers, ensuring they cannot impact the original server's state or trigger unintended actions.Unintended Actions\u002FStale Data: Preloading links like \u002Flogout or displaying stale information on a \u002Fcart page are critical concerns. Predictive Preloads avoids these issues by merging the personalized, up-to-date page content into the pre-rendered shell only at the moment the user navigates to it. This ensures data is always current and actions are only triggered upon explicit user interaction.",{"id":1994,"title":1995,"titles":1996,"content":1997,"level":236},"\u002Fdocs\u002Fpredictive-preloading#impact-of-predictive-preloads-tested-at-scale","Impact Of Predictive Preloads Tested at Scale",[1913,1918],"The tangible value of this technology consistently shows through rigorous A\u002FB testing across diverse e-commerce platforms. The results consistently show: Performance Metrics: Pre-cached Navigations: Between 85-95% of all user navigations are successfully pre-cached on the device.Pre-rendered Navigations: For Chromium-based browsers, between 60-70% of pre-cached navigations are fully pre-rendered in the background.Instant Navigations: Up to 70% of user navigations are served instantly, achieving an LCP (Largest Contentful Paint) below 300ms—faster than the blink of an eye. Business Metrics: Conversion Rate Lift: Customers consistently measure direct (relative) conversion uplifts ranging from 1.5% to 5%.User Engagement: Significant increases in pages per session and average session duration are observed as site exploration becomes frictionless and more enjoyable for users.",{"id":1999,"title":2000,"titles":2001,"content":2002,"level":236},"\u002Fdocs\u002Fpredictive-preloading#the-build-vs-buy-argument-why-predictive-preloading-is-hard","The Build vs. Buy Argument: Why Predictive Preloading Is Hard",[1913,1918],"Implementing a robust predictive preloading system is a significant engineering challenge, requiring expertise across multiple complex domains. To ensure it works effectively and safely, four crucial components must be meticulously developed and integrated. The Prediction Challenge: Achieving accurate and fast predictions is fundamental. Developing a reliable prediction system with high accuracy for a single e-commerce site from scratch would demand years of research and development and analysis of massive real-user datasets. Without Real-User Monitoring (RUM) data, building useful prediction models is not possible. This makes it economically unsustainable for most businesses.The Caching & Infrastructure Challenge: Serving pre-renderable pages without overwhelming origin servers is a major hurdle. Without a powerful caching layer like Speed Kit's, your infrastructure would need to handle a substantial increase in load from predictive fetches (potentially 10-20 times normal traffic), requiring considerable scaling and incurring significant costs and outage risks. Speed Kit's architecture absorbs this load.The Side-Effect Challenge (Client & Server): Predictive preloading can trigger unwanted side-effects on both the client and the server. On the server-side, preloading with a user's normal request headers could inadvertently trigger actions (e.g., \u002Flogout). On the client-side, JavaScript typically executing on a pre-rendered page while it's still invisible can cause inaccurate analytics or unintended state changes. Addressing these requires sophisticated mechanisms to prevent data corruption or skewed metrics.The Client-Side Resource Challenge (Bandwidth & CPU): Aggressively preloading pages can quickly consume a user's bandwidth and CPU resources, degrading their experience. Providing an instant experience without draining the user's data plan or battery requires advanced compression techniques and intelligent script execution management to minimize background resource consumption. Leveraging Speed Kit enables businesses to bypass these immense engineering challenges and associated maintenance costs. Speed Kit has already made the multi-million dollar, multi-year investment in research and development to provide this managed feature. By partnering with Speed Kit, companies can immediately give their customers a seamless, instant experience that demonstrably drives higher conversion rates and enhanced user engagement, freeing their internal teams to focus on core business innovation.",{"id":2004,"title":2005,"titles":2006,"content":2007,"level":259},"\u002Fdocs\u002Freal-user-monitoring","Real-User Monitoring",[],"How Speed Kit's RUM captures authentic user performance data, ties it to business outcomes, and fuels the predictive preloading engine.",{"id":2009,"title":2010,"titles":2011,"content":230,"level":231},"\u002Fdocs\u002Freal-user-monitoring#speed-kit-real-user-monitoring-rum","Speed Kit Real-User Monitoring (RUM)",[2005],{"id":2013,"title":18,"titles":2014,"content":2015,"level":236},"\u002Fdocs\u002Freal-user-monitoring#key-takeaways",[2005,2010],"Authentic User Insights: RUM captures performance data from real users on actual devices and networks, providing an authentic picture of the user experience that synthetic lab tests cannot replicate.Business Impact Correlation: The tool moves beyond technical metrics by directly linking website performance (like LCP and INP) to key business indicators such as conversion rates, bounce rates, and average order value.Engine for Optimization & Analysis: RUM serves a dual purpose: it provides deep insights—from building the initial business case to ongoing analysis—while also feeding live data into Speed Kit's core engine to continuously improve performance.",{"id":2017,"title":2018,"titles":2019,"content":2020,"level":236},"\u002Fdocs\u002Freal-user-monitoring#introduction-understanding-real-world-performance","Introduction: Understanding Real-World Performance",[2005,2010],"Speed Kit's Real-User Monitoring (RUM) is an integral part of its all-in-one solution, designed to provide deep, real-time insights into your website's performance as experienced by your actual users. Unlike synthetic testing, which operates in controlled lab environments, RUM captures the authentic user experience across a wide array of devices, network conditions, and geographical locations.",{"id":2022,"title":2023,"titles":2024,"content":2025,"level":236},"\u002Fdocs\u002Freal-user-monitoring#core-capabilities-from-metrics-to-business-impact","Core Capabilities: From Metrics to Business Impact",[2005,2010],"Speed Kit's RUM solution serves as the eyes and ears on your live website traffic, continuously gathering data to understand and enhance the user experience. It moves beyond simple metrics, providing actionable insights that directly tie performance to business outcomes across the entire customer lifecycle.",{"id":2027,"title":2028,"titles":2029,"content":2030,"level":282},"\u002Fdocs\u002Freal-user-monitoring#business-case-roi-projection","Business Case & ROI Projection",[2005,2010,2023],"To help customers make a confident and informed decision, the RUM data plays a crucial part in the evaluation process. Before a final commitment is made, we can correlate your real-world performance data with your business data to generate a business impact analysis. This report shows the projected performance uplift Speed Kit can provide and quantifies how your current web performance impacts metrics like conversion rate. This provides a clear, data-driven view of the potential ROI. This unique, transparent approach is a cornerstone of our partnership philosophy.",{"id":2032,"title":2033,"titles":2034,"content":2035,"level":282},"\u002Fdocs\u002Freal-user-monitoring#speed-guard-proactive-anomaly-monitoring","Speed Guard: Proactive Anomaly Monitoring",[2005,2010,2023],"Our RUM data feeds a sophisticated monitoring system designed to detect anomalies that indicate a performance regression on your website. If such an anomaly is detected, an alert is immediately sent to our dedicated Web Performance Intelligence team. These experts can react quickly to diagnose the issue. If the regression appears to be caused by a recent code or content change from your side, our team will proactively contact you to provide insights and help resolve the problem.",{"id":2037,"title":2038,"titles":2039,"content":2040,"level":282},"\u002Fdocs\u002Freal-user-monitoring#immediate-visibility-during-onboarding","Immediate Visibility During Onboarding",[2005,2010,2023],"The RUM data is a critical resource from day one. During the onboarding and configuration process, it provides an immediate baseline of your website's real-world performance. Any existing problems or bottlenecks become visible right away, allowing for a more effective and data-driven setup.",{"id":2042,"title":2043,"titles":2044,"content":2045,"level":282},"\u002Fdocs\u002Freal-user-monitoring#live-ab-testing-performance-validation","Live A\u002FB Testing & Performance Validation",[2005,2010,2023],"Once Speed Kit is running, it leverages its integrated RUM for live A\u002FB testing. This allows customers to directly measure the performance uplift provided by Speed Kit against the original site on real production traffic, accurately validating the initial ROI projections.",{"id":2047,"title":2048,"titles":2049,"content":2050,"level":282},"\u002Fdocs\u002Freal-user-monitoring#predictive-preloading-engine","Predictive Preloading Engine",[2005,2010,2023],"Perhaps the most powerful application of our RUM data is as the fuel for Speed Kit's predictive preloading engine. We use the navigation patterns collected from all users to train a sophisticated prediction model in our backend. This lightweight model then runs directly in the user's browser, allowing it to predict the next page a user is likely to visit with an accuracy higher than 85%. This prediction enables a powerful optimization: Speed Kit can begin loading and pre-rendering the predicted page in the background before the user even clicks the link. When the user does navigate, the page is already prepared and can be displayed instantly. This delivers the ultimate performance goal: a truly instant experience. Websites can't load faster than this.",{"id":2052,"title":2053,"titles":2054,"content":2055,"level":282},"\u002Fdocs\u002Freal-user-monitoring#speed-analytics-dashboard","Speed Analytics Dashboard",[2005,2010,2023],"If requested, customers get access to their RUM data via our \"Speed Analytics\" dashboard. This provides a comprehensive overview of all Google Core Web Vitals and includes detailed subpart data to help identify the root cause of issues. This allows your team to spot and fix problems proactively—often before Google detects them and search rankings are impacted. For deeper analysis, Speed Kit also has a team of Google Developer Experts available to support customers with performance audits.",{"id":2057,"title":2058,"titles":2059,"content":2060,"level":236},"\u002Fdocs\u002Freal-user-monitoring#key-features-functionality","Key Features & Functionality",[2005,2010],"Speed Kit's RUM provides a comprehensive suite of functionalities to ensure continuous performance optimization:",{"id":2062,"title":2063,"titles":2064,"content":2065,"level":282},"\u002Fdocs\u002Freal-user-monitoring#advanced-spa-soft-navigation-tracking","Advanced SPA & Soft Navigation Tracking",[2005,2010,2058],"Modern Single-Page Applications (SPAs) create a unique measurement challenge. While the initial page load is easy to track, the \"soft navigations\" a user performs within the app are often a blind spot for standard performance tools. To solve this, Speed Kit's RUM includes a sophisticated, custom-built algorithm designed specifically to measure the Core Web Vitals for these soft navigations. This provides a complete and accurate picture of the entire user journey. For a technical deep-dive, you can read our full article: Measuring Largest Contentful Paint in Single-Page Applications.",{"id":2067,"title":2068,"titles":2069,"content":2070,"level":282},"\u002Fdocs\u002Freal-user-monitoring#modular-extensible-design","Modular & Extensible Design",[2005,2010,2058],"The RUM tool is not a one-size-fits-all solution. It is built on a modular architecture that can be extended and updated to meet specific customer requirements. Whether this involves tracking unique business events or integrating with a complex site architecture, our team can adapt the tool accordingly.",{"id":2072,"title":2073,"titles":2074,"content":2075,"level":282},"\u002Fdocs\u002Freal-user-monitoring#detailed-metric-collection","Detailed Metric Collection",[2005,2010,2058],"The tool tracks essential metrics like Time To First Byte (TTFB), First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).",{"id":2077,"title":2078,"titles":2079,"content":2080,"level":282},"\u002Fdocs\u002Freal-user-monitoring#custom-event-tracking","Custom Event Tracking",[2005,2010,2058],"You can configure Speed Analytics to collect custom tracking events, such as \"Adds-to-Cart\" or \"Conversions.\" This allows for granular correlation between specific business goals and site performance.",{"id":2082,"title":2083,"titles":2084,"content":2085,"level":282},"\u002Fdocs\u002Freal-user-monitoring#data-segmentation","Data Segmentation",[2005,2010,2058],"The RUM solution allows for segmentation of performance data by various factors such as location, device type, browser, network speed, and A\u002FB test groups, providing granular insights.",{"id":2087,"title":2088,"titles":2089,"content":2090,"level":236},"\u002Fdocs\u002Freal-user-monitoring#data-collection-a-transparent-overview","Data Collection: A Transparent Overview",[2005,2010],"Speed Kit's RUM collects a range of data points to provide a comprehensive picture of user experience and site performance:",{"id":2092,"title":2093,"titles":2094,"content":2095,"level":282},"\u002Fdocs\u002Freal-user-monitoring#performance-metrics","Performance Metrics",[2005,2010,2088],"Largest Contentful Paint (LCP)First Contentful Paint (FCP)Time To First Byte (TTFB)Cumulative Layout Shift (CLS)Interaction to Next Paint (INP)Other key indicators related to page load and rendering.",{"id":2097,"title":2098,"titles":2099,"content":2100,"level":282},"\u002Fdocs\u002Freal-user-monitoring#client-and-request-details","Client and Request Details",[2005,2010,2088],"Anonymized IP addressUser agentGeo-location (extracted from the anonymized IP address)Request URL and HTTP-MethodTransferred Bytes and Content-TypeCDN POP name, TLS information, and ASN information",{"id":2102,"title":2103,"titles":2104,"content":2105,"level":282},"\u002Fdocs\u002Freal-user-monitoring#user-and-session-identifiers","User and Session Identifiers",[2005,2010,2088],"User and session IDs are stored locally to group measurements. These IDs are randomly generated and do not depend on personal information from the origin. A \"performance-only\" tracking option can be enabled to prevent the storage of these IDs entirely.",{"id":2107,"title":2108,"titles":2109,"content":2110,"level":236},"\u002Fdocs\u002Freal-user-monitoring#implementation-overview","Implementation Overview",[2005,2010],"This section covers the key technical details for integrating the Speed Kit RUM script onto your website.",{"id":2112,"title":2113,"titles":2114,"content":2115,"level":282},"\u002Fdocs\u002Freal-user-monitoring#integration-method","Integration Method",[2005,2010,2108],"The RUM script can be integrated in two ways: by adding a JavaScript tag directly to your site's HTML, which is the recommended method for an optimal setup, or by deploying it via a tag manager.",{"id":2117,"title":2118,"titles":2119,"content":2120,"level":282},"\u002Fdocs\u002Freal-user-monitoring#script-loading-performance","Script Loading & Performance",[2005,2010,2108],"Our script is designed to load asynchronously, ensuring it will not interfere with your page's initial load time or user experience.",{"id":2122,"title":2123,"titles":2124,"content":2125,"level":282},"\u002Fdocs\u002Freal-user-monitoring#data-transmission","Data Transmission",[2005,2010,2108],"To send performance data back to our servers without impacting user navigation, the RUM tool uses the modern Beacon API. The tool sends multiple small beacons throughout the page's lifetime. This approach ensures that individual data payloads are not too large and allows for the accurate measurement of metrics like CLS and INP, which can change as the user interacts with the page.",{"id":2127,"title":2128,"titles":2129,"content":2130,"level":236},"\u002Fdocs\u002Freal-user-monitoring#gdpr-compliance-data-privacy-by-design","GDPR Compliance & Data Privacy by Design",[2005,2010],"Speed Kit prioritizes data privacy and is designed to be fully compliant with GDPR regulations.",{"id":2132,"title":2133,"titles":2134,"content":2135,"level":282},"\u002Fdocs\u002Freal-user-monitoring#a-note-on-user-consent","A Note on User Consent",[2005,2010,2128],"From a technical standpoint, Speed Kit's RUM is designed to be a necessary tool for monitoring and ensuring the functionality and performance of the service. It operates on anonymous and aggregated data and does not require separate user consent for this purpose. However, Speed Kit cannot provide legal consultation. To empower you to make your own informed decision, we provide all necessary technical and data processing information alongside our terms, conditions, and contract. The final decision on whether to require user consent rests with you, the customer, as the data controller. The RUM tool is designed to work flexibly in both setups and can be integrated with your consent management framework.",{"id":2137,"title":2138,"titles":2139,"content":2140,"level":282},"\u002Fdocs\u002Freal-user-monitoring#minimal-performance-overhead","Minimal Performance Overhead",[2005,2010,2128],"We are acutely aware that a monitoring tool must not harm the performance it measures. The Speed Kit RUM script is engineered to be extremely lightweight. Furthermore, we actively monitor the resource impact of our own tool to ensure it never causes any performance problems or negatively affects the user experience.",{"id":2142,"title":2143,"titles":2144,"content":2145,"level":282},"\u002Fdocs\u002Freal-user-monitoring#anonymization-of-ip-addresses","Anonymization of IP Addresses",[2005,2010,2128],"Speed Kit processes user IP addresses but immediately hashes and anonymizes them upon reception. They are never stored in plain text.",{"id":2147,"title":2148,"titles":2149,"content":2150,"level":282},"\u002Fdocs\u002Freal-user-monitoring#data-minimization-by-design","Data Minimization by Design",[2005,2010,2128],"The system is engineered to never see or store any user-specific or private data. As described previously, Speed Kit's backend and service worker operate in a way that prevents the transmission or processing of cookies and other credentials from your website's domain.",{"id":2152,"title":2153,"titles":2154,"content":2155,"level":259},"\u002Fdocs\u002Frefresh-api","Refresh API",[],"A REST API for triggering and monitoring cache refresh jobs across your Speed Kit assets, with filtering, refresh modes, tagging, and status queries.",{"id":2157,"title":2153,"titles":2158,"content":230,"level":231},"\u002Fdocs\u002Frefresh-api#refresh-api",[2153],{"id":2160,"title":2161,"titles":2162,"content":2163,"level":236},"\u002Fdocs\u002Frefresh-api#how-refresh-jobs-work","How Refresh Jobs Work",[2153,2153],"In general, refresh jobs work a bit like search engine crawlers. We request every cached HTML file with an anonymous and fresh session (no cookies etc. will be sent to your origin) from your servers and compare the content. If the content has changed, the whole cache hierarchy is updated. With growing numbers of files, this procedure takes a bit more time (also because we do not want to overwhelm your server with requests). To speed up the process, you can use a type: \"INSTANT\" Refresh Job. This means the very first request to an HTML file that has not been refreshed yet, will return the currently cached version and trigger an immediate update in the background. All requests and users after that will get the fresh content from the cache. This ensures that popular sites are updated instantly while maintaining an optimal cache hit rate. With type: \"DEPLOYMENT\" you can even force the CDN to be purged hard so no cached content is served afterwards.",{"id":2165,"title":2166,"titles":2167,"content":2168,"level":236},"\u002Fdocs\u002Frefresh-api#generate-apitoken","Generate APIToken",[2153,2153],"Log in to the Dashboard, go to settings and generate your token under “Refresh API Token”. This token has to be sent with every request. authorization: BAT \u003Cyour-token>",{"id":2170,"title":2171,"titles":2172,"content":2173,"level":236},"\u002Fdocs\u002Frefresh-api#refresh-restendpoint","Refresh RESTEndpoint",[2153,2153],"All refresh requests are issued against the revalidation endpoint: https:\u002F\u002F\u003Cappname>.app.baqend.com\u002Fv1\u002Fasset\u002Frevalidate",{"id":2175,"title":2176,"titles":2177,"content":2178,"level":236},"\u002Fdocs\u002Frefresh-api#initiating-refresh-operations-via-postrequests","Initiating Refresh Operations via POSTRequests",[2153,2153],"With a POST request against the endpoint, you can start a new refresh. The POST body should contain the information on what to refresh. On top of that you can set options on how to carry out the refresh. The body is given as JSON:",{"id":2180,"title":2181,"titles":2182,"content":2183,"level":282},"\u002Fdocs\u002Frefresh-api#syntax-overview","Syntax Overview",[2153,2153,2176],"The body may include the following attributes: filter - Defines the scope of assets to refresh. This can include:origins- Specify origins to target.mediaTypes - Restrict to specific media types.contentTypes - Restrict to specific content types, like [\"script\", \"style\"]. Possible values are:documentstylescriptfeedaudiovideotrackimagefonturls - Match an array of URLs (supports * wildcards). Example: [\"https:\u002F\u002Fexample.com\u002Fhtml\u002Fexample-*\"]prefixes - Match URLs by prefixes.tags - Match assets by tags set via the Baqend-Tags HTTP header.query - Apply a MongoDB query to combine attributes using AND, OR, or regular expressions. Supported fields:urleTaglastModifiedcontentTypemediaTypecontentHashvariationorigintagstriggeredBy - Name of the routine or person initiating the job. Defaults to api.allowDelete - Indicates if unused or gone assets can be deleted. Defaults to true.type - Specifies the refresh mode. Default is \"REFRESH\". Possible values:\"REFRESH\" - A standard refresh job. Updates resources while serving cached versions until refresh completes.\"INSTANT\" - Soft purges the CDN; stale cached content is served initially, with subsequent requests refreshed in the background. This is a good trade off to keep cache hit rates high and still update popular resources very fast. Note: should be used to refresh a large amount of HTML files.\"DEPLOYMENT\" - A deployment refresh purges the cache immediately and rebuilds the cache afterwards. This means cache entries are only served again if they got refreshed. This will cause a performance drop and should only be used if the HTML structure has been changed. (e.g. after a deployment of the origin) Note: only supported for HTML files.\"PURGE\" - Our caches will receive a complete purge for the marked assets. This will drop all resources from our caches. The cache will not be build up again for the purged resources. Note: this will dramatically impact the performance and should only be used to delete unwanted cached resources from Speed Kit caches.forceUpdate - Forces to also update resources that are marked as immutable because they contain a hash and have high caching headers. Default is falsedelay - Defines a wait time between batches of refreshed resources. This option can be used to minimize the traffic to the origin server if necessary but makes the refreshes take much longer. Default is 0scheduleIn - Allows to define a time span in milliseconds the job scheduler will wait until the refresh job is actually scheduled to run. The delivery of cached assets is suspended while the job is scheduled. Default is 0name - Set a name for the refresh job to make it easier identifiable. Default is null Example: {\n  \"filter\": {\n    \"origins\": [\n      \"https:\u002F\u002Fwww.example.com\"\n    },\n    \"mediaTypes\": [\n      \"text\u002Fplain\",\n      \"video\u002Fmpeg\"\n    ],\n    \"contentTypes\": [\n      \"image\",\n      \"video\"\n    ],\n    \"urls\": [\n      \"https:\u002F\u002Fexample.com\u002Fassets\u002Fmain.js\"\n    ],\n    \"prefixes\": [\n      \"https:\u002F\u002Fwww.example.com\u002Fde-de\u002F\"\n    ],\n    \"query\": {\n      \"origin\": \"https:\u002F\u002Fwww.example.com\",\n      \"url\": { \"$regex\": \"https:\u002F\u002Fwww.example.com\u002Fassets\u002F\\\\d+\" }\n    },\n  },\n  \"type\": \"REFRESH\",\n  \"revalidationDelay\": 0\n}",{"id":2185,"title":2186,"titles":2187,"content":2188,"level":282},"\u002Fdocs\u002Frefresh-api#response-syntax","Response Syntax",[2153,2153,2176],"The response of this POST request returns a content-type: application\u002Fjson;charset=utf-8 containing a statusId that can be used to query the status of the refresh via a GET request to the same endpoint. Example Response: { \"statusId\" : \"bc87f0aa-6013-4d2a-bdc2-9e96c8e86118\" }",{"id":2190,"title":2191,"titles":2192,"content":2193,"level":282},"\u002Fdocs\u002Frefresh-api#example-irefreshing-jsand-css","Example I(Refreshing JSand CSS)",[2153,2153,2176],"{\n  \"filter\": {\n    \"contentTypes\": [\"script\", \"style\"],\n    \"origins\": [ \"https:\u002F\u002Fwww.example.com\" ]\n  },\n  \"type\": \"refresh\"\n} Refreshes all scripts and styles on the given domain and purges the CDN.",{"id":2195,"title":2196,"titles":2197,"content":2198,"level":282},"\u002Fdocs\u002Frefresh-api#example-iihtmlrefreshing","Example II(HTMLRefreshing)",[2153,2153,2176],"{\n  \"filter\": {\n    \"contentTypes\": [\"document\"],\n    \"origins\": [ \"https:\u002F\u002Fwww.example.com\" ]\n  },  \n  \"type\": \"instant\"\n} Refreshes all HTML files and performs a soft purge on the CDN. With this approach, the first request to an HTML file that hasn't been refreshed yet will return the current cached version while simultaneously triggering an immediate background update. Subsequent requests will then serve the updated content from the cache. This method ensures that popular sites are refreshed quickly while maintaining a high cache hit rate for optimal performance. Request as CURL: curl -X POST -d '{ \n\"contentTypes\": [\"document\"], \n\"type\": \"instant\", \n\"origins\": [\"https:\u002Fwww.example.com\"] }' -H \n\"authorization: BAT \u003Ctour-token>\" -H \n\"Content-type: application\u002Fjson\" \nhttps:\u002F\u002F\u003Cappname>.app.baqend.com\u002Fv1\u002Fasset\u002Frevalidate",{"id":2200,"title":2201,"titles":2202,"content":2203,"level":282},"\u002Fdocs\u002Frefresh-api#example-iii-deployment-job-for-a-specific-origin","Example III (Deployment Job for a Specific Origin)",[2153,2153,2176],"{\n  \"filter\": {\n    \"contentTypes\": [\"document\"],\n    \"origins\": [ \"https:\u002F\u002Fwww.example.com\" ]\n  },  \n  \"type\": \"deployment\",\n  \"scheduleIn\": 300000\n} Deployment refreshes are ideal for scenarios where your system undergoes a deployment. This type of job immediately purges the Speed Kit caches and halts the delivery of any matching assets until they are refreshed. To accommodate situations where the deployment process requires additional time to complete, you can use the scheduleIn parameter to set a delay in milliseconds (e.g., 5 minutes in the example). During this delay period, Speed Kit suspends the delivery of matching assets. Once the specified delay has elapsed, the refresh process begins, and only the refreshed assets will be delivered again. Request as CURL: curl -X POST -d '{ \n\"type\": \"deployment\", \n\"scheduleIn\": 300000, \n\"contentTypes\": [\"document\"], \n\"origins\": [\"https:\u002Fwww.example.com\"] }' -H \n\"authorization: BAT \u003Ctour-token>\" -H \n\"Content-type: application\u002Fjson\" \nhttps:\u002F\u002F\u003Cappname>.app.baqend.com\u002Fv1\u002Fasset\u002Frevalidate",{"id":2205,"title":2206,"titles":2207,"content":2208,"level":236},"\u002Fdocs\u002Frefresh-api#checking-refresh-status-via-get","Checking Refresh Status via GET",[2153,2153],"If you need to know the progress of a refresh that you started, you can query it via a GET requests including your statusId like this: https:\u002F\u002F\u003Cappname>.app.baqend.com\u002Fv1\u002Fasset\u002Frevalidate\u002F\u003CstatusId>",{"id":2210,"title":2186,"titles":2211,"content":2212,"level":282},"\u002Fdocs\u002Frefresh-api#response-syntax-1",[2153,2153,2206],"The response contains the following attributes: revId - The revalidation ID is equal to the statusId from the requestfilter - Contains all the details of the refresh that was created via POSTassetCount - Contains the number of resource matched by the refreshrefreshedCount - Contains how many resources have been updated so farchangedCount - Contains how many resources have changed during the updatestate - Contains the state of the refresh, value areFINISHED - For refreshes that are completedCREATED - The job was created and assets are being markedRUNNING - The marking finished, the job is passed on to the revalidation loopERROR - An error occurred. The error property will hold more information on the cause.CANCELLED - The job was cancelled either via API or by the job scheduler because another Instant job was runningSCHEDULED - The scheduler moved the job aside and waits the time specified in the scheduleIn propertyDEFERRED - Another job with the same filter is currently active, this job is deferred until the previous job finishes. Subsequent jobs with the same filter as the DEFERRED job are ignoredtime - The current runtime of the refreshdeleteAll -deleteMissing - Example: {\n  \"revId\": \"bc87f0aa-6013-4d2a-bdc2-9e96c8e86118\",\n  \"filter\": {\n    \"mediaTypes\": [\n      \"text\u002Fplain\",\n      \"video\u002Fmpeg\"\n    ],\n    \"contentTypes\": [\n      \"image\",\n      \"video\"\n    ],\n    \"urls\": [\n      \"\u003Chttp:\u002F\u002Flocalhost:8080\u002Fv1\u002Ffile\u002Fwww\u002Fvideo*>\"\n    ],\n    \"prefixes\": [\n      \"\u003Chttp:\u002F\u002Flocalhost:8080\u002Fv1\u002Ffile\u002Fwww\u002Fvi>\"\n    ],\n    \"query\": {\n      \"url\": \"\u003Chttp:\u002F\u002Flocalhost:8080\u002Fv1\u002Ffile\u002Fwww\u002Fvideo>\"\n    }\n  },\n  \"assetCount\": 1,\n  \"refreshedCount\": 1,\n  \"changedCount\": 0,\n  \"final\": true,\n  \"deleteErrors\": false,\n  \"state\": \"FINISHED\",\n  \"error\": null,\n  \"startedAt\": \"2021-03-26T07:17:58.295214311Z\",\n  \"updatedAt\": \"2021-03-26T07:18:25.582033896Z\",\n  \"finishedAt\": \"2021-03-26T07:18:25.582033896Z\",\n  \"triggeredBy\": \"api\",\n  \"forceUpdate\": false,\n  \"allowDelete\": true,\n  \"type\": \"REFRESH\",\n  \"duration\": 27287,\n  \"scheduleIn\": null,\n  \"delay\": 0,\n  \"name\": null\n}",{"id":2214,"title":2215,"titles":2216,"content":2217,"level":236},"\u002Fdocs\u002Frefresh-api#the-baqend-tags-header","The Baqend-Tags Header",[2153,2153],"When content is fetched from the origin, a special Baqend-Tags header can be set as well to tag the to be cached resource with some specific tags. Those tags can be later used in a refresh job, to refresh all resources tagged with a specific value. The tag header should contain tags separated by white spaces, tags can contain any allowed HTTP header chars. Example: Baqend-Tags: some-tag some\u002Fother\u002Ftag ThirdTag That resource can be then refreshed with the following job: {\n  \"filter\": {\n    \"tags\": [\"some-tag\", \"some-other-resource\"]\n  },\n  \"type\": \"refresh\"\n} If you want to use a different header or another separator, then this can be configured by the Baqend staff. html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"id":2219,"title":2220,"titles":2221,"content":2222,"level":259},"\u002Fdocs\u002Freliability-and-support","Reliability & Support",[],"How Speed Kit's redundant infrastructure, automatic fail-safes, manual controls, and expert support team ensure uninterrupted website availability.",{"id":2224,"title":2225,"titles":2226,"content":230,"level":231},"\u002Fdocs\u002Freliability-and-support#uninterrupted-performance-speed-kits-reliability-support","Uninterrupted Performance: Speed Kit's Reliability & Support",[2220],{"id":2228,"title":18,"titles":2229,"content":2230,"level":236},"\u002Fdocs\u002Freliability-and-support#key-takeaways",[2220,2225],"Resilient by Design: Speed Kit is an enhancement tool designed to fail gracefully. Because it operates in the browser, it can automatically bypass its own infrastructure in case of an issue, ensuring your website's availability is always the top priority.You're in Control: Beyond our automatic systems, you have ultimate control with a manual \"emergency button\" on your personal dashboard to deactivate Speed Kit globally within seconds.A Proactive Partnership: Our dedicated Web Performance Intelligence team proactively monitors your site for performance regressions and our system automatically adapts to your server's load, acting as a true partner in maintaining your site's stability.",{"id":2232,"title":2233,"titles":2234,"content":2235,"level":236},"\u002Fdocs\u002Freliability-and-support#introduction-a-commitment-to-business-continuity","Introduction: A Commitment to Business Continuity",[2220,2225],"Speed Kit is designed as a powerful enhancement layer to accelerate your website. We understand that adding any new technology requires a guarantee of reliability. This document outlines the robust infrastructure, fail-safe mechanisms, and support systems we have in place to ensure that Speed Kit operates seamlessly. In the unlikely event of an issue on our side, our system prioritizes your website's availability above all else. If Speed Kit has issues, it is designed to simply get out of the way, and your site will continue to run as it would without us.",{"id":2237,"title":2238,"titles":2239,"content":2240,"level":236},"\u002Fdocs\u002Freliability-and-support#resilient-by-design-infrastructure-fail-safes","Resilient by Design: Infrastructure & Fail-Safes",[2220,2225],"Our infrastructure is architected for maximum resilience and graceful failure, meaning your site's stability always comes first.",{"id":2242,"title":2243,"titles":2244,"content":2245,"level":282},"\u002Fdocs\u002Freliability-and-support#redundant-infrastructure","Redundant Infrastructure",[2220,2225,2238],"Our system utilizes multiple redundant containers spread across physically separate machines. This setup enables us to quickly redistribute load and replace containers as needed, minimizing the risk of downtime and service degradation.",{"id":2247,"title":2248,"titles":2249,"content":2250,"level":282},"\u002Fdocs\u002Freliability-and-support#automatic-fail-safe-measures","Automatic Fail-Safe Measures",[2220,2225,2238],"Speed Kit's primary fail-safe is enabled by its core architecture: the service worker operates directly in the user's browser. This gives it the local intelligence to react instantly to any failures on our side. Even in a disaster scenario where our entire infrastructure—including our backend and edge nodes—is unreachable by the client, the service worker can seamlessly reroute all traffic directly to your origin server. If our systems are non-operational, your webpage will not be accelerated; however, it will remain fully functional, operating exactly as it would without Speed Kit implemented.",{"id":2252,"title":2253,"titles":2254,"content":2255,"level":282},"\u002Fdocs\u002Freliability-and-support#independence-from-your-infrastructure","Independence from Your Infrastructure",[2220,2225,2238],"It is important to understand that Speed Kit is an enhancement layer, not a load balancer for your infrastructure. If your own origin server or CDN has a severe issue and goes down, Speed Kit cannot serve your website. In this case, the user experience will be the same as if Speed Kit were not active—the page will be impacted by your infrastructure's outage.",{"id":2257,"title":2258,"titles":2259,"content":2260,"level":282},"\u002Fdocs\u002Freliability-and-support#adaptive-origin-protection","Adaptive Origin Protection",[2220,2225,2238],"Speed Kit is designed to be a good neighbor. Our backend system constantly monitors the health of your server and automatically throttles its own requests if it detects that your system is under stress. This ensures that our performance-enhancing activities never compromise the stability of your core infrastructure.",{"id":2262,"title":2263,"titles":2264,"content":2265,"level":282},"\u002Fdocs\u002Freliability-and-support#seamless-reactivation","Seamless Reactivation",[2220,2225,2238],"Our systems are continuously monitored. Once an issue is resolved and stability is confirmed, Speed Kit is automatically reactivated to resume accelerating your user experience.",{"id":2267,"title":2268,"titles":2269,"content":2270,"level":236},"\u002Fdocs\u002Freliability-and-support#youre-in-control-manual-deactivation-cache-management","You're in Control: Manual Deactivation & Cache Management",[2220,2225],"For complete peace of mind, we provide you with direct control over the Speed Kit service.",{"id":2272,"title":2273,"titles":2274,"content":2275,"level":282},"\u002Fdocs\u002Freliability-and-support#the-emergency-deactivation-button","The Emergency Deactivation Button",[2220,2225,2268],"You can manually deactivate Speed Kit at any time via your personal dashboard with the click of a button. This deactivation takes effect globally within seconds, giving you immediate and ultimate control. Dashboard Link: https:\u002F\u002Fdashboard.speed-kit.com\u002F",{"id":2277,"title":2278,"titles":2279,"content":2280,"level":282},"\u002Fdocs\u002Freliability-and-support#manual-cache-clearing","Manual Cache Clearing",[2220,2225,2268],"While our automatic change detection reliably identifies code and content updates, the dashboard also provides an option to manually clear the Speed Kit cache. This is available for specific scenarios or for immediate peace of mind after a critical content change. Additionally, a browser extension is available that allows you to refresh the currently visited page in the Speed Kit cache.",{"id":2282,"title":2283,"titles":2284,"content":2285,"level":236},"\u002Fdocs\u002Freliability-and-support#a-partnership-in-performance-monitoring-support","A Partnership in Performance: Monitoring & Support",[2220,2225],"We view our service as a partnership, backed by an expert team dedicated to your success.",{"id":2287,"title":2288,"titles":2289,"content":2290,"level":282},"\u002Fdocs\u002Freliability-and-support#proactive-monitoring-by-our-expert-team","Proactive Monitoring by Our Expert Team",[2220,2225,2283],"Our dedicated Web Performance Intelligence Team utilizes advanced monitoring techniques, including Real User Monitoring (RUM), to proactively detect and address performance issues and functional failures, such as JavaScript errors. Should any significant issues arise, our Customer Success Team will reach out to you proactively, ensuring you are informed and can respond effectively.",{"id":2292,"title":2293,"titles":2294,"content":2295,"level":282},"\u002Fdocs\u002Freliability-and-support#public-status-page","Public Status Page",[2220,2225,2283],"For full transparency into our system's operational status, you can visit our public status page at any time. This page provides real-time and historical data on the availability of all Speed Kit services. Status Page Link: https:\u002F\u002Fstatus.baqend.com\u002F",{"id":2297,"title":2298,"titles":2299,"content":2300,"level":282},"\u002Fdocs\u002Freliability-and-support#dedicated-technical-support","Dedicated Technical Support",[2220,2225,2283],"We offer comprehensive technical support through the following channels: Email: help@speedkit.comSlack: A dedicated channel for direct communication.Hours: Monday to Friday, 9:00 AM to 5:00 PM (CET \u002F CEST).",{"id":2302,"title":2303,"titles":2304,"content":2305,"level":282},"\u002Fdocs\u002Freliability-and-support#_247-emergency-hotline","24\u002F7 Emergency Hotline",[2220,2225,2283],"For major or critical incidents, we provide a 24-hour emergency hotline to ensure you can reach us at any time.",{"id":2307,"title":2308,"titles":2309,"content":2310,"level":236},"\u002Fdocs\u002Freliability-and-support#data-handling-and-backup-policy","Data Handling and Backup Policy",[2220,2225],"To ensure service continuity and protect your settings, we perform regular backups of essential service data. This includes your user account information and all Speed Kit configurations. Conversely, we do not back up operational data like the content cached from your website or the Real User Monitoring (RUM) data we collect. For the cached content, we consider your origin server to be the single source of truth, as this data is constantly changing. In the very unlikely event of a loss within our caches, our system automatically rebuilds the cache by refetching the content directly from your origin, ensuring your website's performance is restored without impacting its availability.",{"id":2312,"title":2313,"titles":2314,"content":2315,"level":259},"\u002Fdocs\u002Fseo-impact","SEO Impact",[],"How Speed Kit improves Core Web Vitals and user experience to boost search rankings, with proof methodology and safe crawler compatibility.",{"id":2317,"title":2318,"titles":2319,"content":230,"level":231},"\u002Fdocs\u002Fseo-impact#speed-kit-and-seo-boosting-your-search-rankings","Speed Kit and SEO: Boosting Your Search Rankings",[2313],{"id":2321,"title":18,"titles":2322,"content":2323,"level":236},"\u002Fdocs\u002Fseo-impact#key-takeaways",[2313,2318],"Direct Ranking Improvement: Speed Kit boosts Core Web Vitals, which Google has officially confirmed is a direct signal for search rankings, providing a foundational advantage for higher visibility.Crawler Compatibility: Speed Kit is designed to be fully compatible with search engine crawlers. The Googlebot always interacts directly with your origin server, ensuring it indexes the canonical version of your site and eliminating any risk of SEO penalties like cloaking.Data-Driven Proof: We can conduct a niche-specific SEO analysis that correlates loading speed with search rankings in your competitive landscape, providing clear, data-driven evidence of the potential ranking uplift.",{"id":2325,"title":45,"titles":2326,"content":2327,"level":236},"\u002Fdocs\u002Fseo-impact#introduction",[2313,2318],"In today's competitive digital landscape, organic search is a critical channel for attracting visitors and driving revenue. A key, and often underestimated, pillar of a successful SEO strategy is website performance. Google has made it clear that site speed and user experience are not just recommendations but are integral to its ranking algorithms. Slow-loading pages lead to user frustration, high abandonment rates (known as \"pogo-sticking\"), and negative signals that can harm your search visibility. Speed Kit provides a strategic advantage by tackling this challenge head-on. It is engineered to deliver instant page loads, significantly improving the Core Web Vitals (CWV) that Google uses as a direct ranking signal. To learn more about the wide-ranging benefits of performance, see our Speed Kit’s Business Impact Guide. This document explains how Speed Kit boosts your SEO, details our methodology for proving this impact in your specific market, and addresses the crucial topic of crawler compatibility to ensure your technical SEO foundation remains secure.",{"id":2329,"title":2330,"titles":2331,"content":2332,"level":236},"\u002Fdocs\u002Fseo-impact#how-speed-kit-boosts-search-rankings","How Speed Kit Boosts Search Rankings",[2313,2318],"Speed Kit provides a strategic advantage in organic search by improving not only technical metrics but also the crucial user behavior signals that increasingly influence rankings.",{"id":2334,"title":2335,"titles":2336,"content":2337,"level":282},"\u002Fdocs\u002Fseo-impact#foundational-performance-core-web-vitals","Foundational Performance: Core Web Vitals",[2313,2318,2330],"Google uses Core Web Vitals as a direct signal in its ranking systems. This makes improving site speed a direct and verifiable way to enhance your foundation for better search visibility. Here is the official statement from Google's public documentation on page experience: \"Core Web Vitals are used by our ranking systems. We recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.\" — Google Search Central, Understanding page experience Speed Kit is engineered to significantly improve key metrics like Largest Contentful Paint (LCP), directly addressing this confirmed ranking factor. Furthermore, for Single-Page Applications (SPAs), which can be disadvantaged by how Core Web Vitals are measured, Speed Kit provides a unique solution. Currently, Google only measures the LCP for the initial page load, which is often the slowest. Speed Kit addresses this measurement problem directly with its \"Soft-to-Hard\" navigation technology, which converts subsequent soft navigations into standard hard navigations. This ensures Core Web Vitals are measured for each page view—not just the slow initial one—which is expected to significantly improve the average LCP score and provide a more favorable performance profile. For more details, see our documentation on Accelerating Single-Page Applications (SPAs) with Speed Kit.",{"id":2339,"title":2340,"titles":2341,"content":2342,"level":282},"\u002Fdocs\u002Fseo-impact#reduced-user-abandonment","Reduced User Abandonment",[2313,2318,2330],"Beyond technical scores, speed directly impacts user behavior. Instant page loads prevent user frustration, reducing \"pogo-sticking\"—where users quickly abandon a slow site and return to the search results. Leaked Google Search documentation confirmed that internal systems track user click behaviors, such as \"good\" and \"bad\" clicks, to help determine result quality. By eliminating the initial loading delay, Speed Kit helps prevent the negative signals associated with user abandonment, leading to longer sessions and more page views. For a detailed analysis of the leaked documents, you can refer to in-depth explanations from industry experts like Rand Fishkin and Mike King.",{"id":2344,"title":2345,"titles":2346,"content":2347,"level":282},"\u002Fdocs\u002Fseo-impact#positive-engagement-signals","Positive Engagement Signals",[2313,2318,2330],"Search engines are designed to reward websites that users find valuable. By delivering a fast and seamless experience, Speed Kit encourages positive engagement signals. This principle is confirmed by Google's official Page Experience documentation, which states that core ranking systems are designed to reward content that provides a good user experience. These engagement signals indicate to search algorithms that your site is a high-quality result, which can indirectly boost rankings.",{"id":2349,"title":2350,"titles":2351,"content":2352,"level":282},"\u002Fdocs\u002Fseo-impact#the-holistic-seo-advantage","The Holistic SEO Advantage",[2313,2318,2330],"Ultimately, a faster site leads to higher organic search rankings and more free traffic because it combines technical optimization (Core Web Vitals) with a superior user experience. This encourages positive engagement signals that search algorithms reward, building long-term SEO resilience. This approach aligns directly with Google's core ranking philosophies, like the Helpful Content system, which aims to better reward content where visitors feel they've had a satisfying experience.",{"id":2354,"title":2355,"titles":2356,"content":2357,"level":282},"\u002Fdocs\u002Fseo-impact#proactive-monitoring-with-real-user-monitoring-rum","Proactive Monitoring with Real User Monitoring (RUM)",[2313,2318,2330],"While Speed Kit provides a foundational performance boost, protecting your search rankings requires continuous, proactive monitoring. Relying solely on Google's public Chrome User Experience (CrUX) report means you're always looking at the past, as its data is aggregated over the previous 28-day period. By the time a performance problem appears in your CrUX data, your search ranking may have already been negatively impacted. To address this, Speed Kit offers a Real User Monitoring (RUM) tool as an optional add-on. Our RUM tool provides real-time insights into your Core Web Vitals, allowing you to stay ahead of the curve. Spot Problems Early: You can identify negative performance trends as they happen and fix them before they affect your public CrUX data and search rankings.Verify Fixes Quickly: When you deploy a change to improve performance, our RUM data allows you to see the impact almost immediately. This rapid feedback loop is crucial for confirming that your fix was successful without waiting weeks for CrUX to update.Automated Anomaly Detection: Our integrated Speed Guards continuously analyze your RUM data in near real-time. If a drop in your Core Web Vitals is detected, our system alerts you so you always know when it's time to take action. For a complete overview of the tool and its features, please see our full Real User Monitoring (RUM) documentation.",{"id":2359,"title":2360,"titles":2361,"content":2362,"level":236},"\u002Fdocs\u002Fseo-impact#proving-the-impact-niche-specific-seo-analysis","Proving the Impact: Niche-Specific SEO Analysis",[2313,2318],"Measuring the precise SEO impact of any single optimization is notoriously difficult. Google’s algorithm considers hundreds of factors—most of which are not disclosed—and the effects of any change can take weeks or even months to become visible. The biggest challenge is that it's nearly impossible to isolate the impact of a single change when so many external factors you don't control are changing independently. For example, a competitor might make their own page faster, acquire new backlinks, or a Google algorithm update could suddenly shift the entire ranking landscape. This \"noise\" makes it extremely difficult to prove causation. This uncertainty makes it critical to focus on known, confirmed ranking signals. Loading speed is one of these few officially confirmed factors, making it a reliable lever for improvement. Unlike many abstract SEO factors, site speed is a tangible element that can be decisively improved, offering a clear, actionable path to gaining a competitive advantage with Speed Kit. To provide concrete evidence of its importance in your market, we conduct a customer- and vertical-specific SEO analysis that illustrates the relationship between speed and search ranking in your direct competitive landscape.",{"id":2364,"title":2365,"titles":2366,"content":2367,"level":282},"\u002Fdocs\u002Fseo-impact#our-data-driven-methodology","Our Data-Driven Methodology",[2313,2318,2360],"The analysis follows a simple, data-driven methodology: Keyword Generation: First, we generate a tailored list of 100 relevant, high-volume search keywords based on your specific domain and vertical.Data Collection & Correlation: For each keyword, we analyze the top Google search engine results. We then correlate each competing domain's search rank with its real-world Largest Contentful Paint (LCP) performance.Performance Data from CrUX: This performance data is sourced from the Chrome User Experience (CrUX) report. CrUX is a public dataset from Google that contains anonymized performance metrics collected from millions of real Chrome users, providing the most accurate picture of how users experience a website's speed in the real world.Aggregate Analysis & Calculation: We aggregate the data from all keywords, group the thousands of search results into \"speed buckets\" based on their LCP, and from this data, we calculate the specific ranking impact of a 100 ms improvement in loading speed. This process delivers a clear chart showing the tangible ranking advantage that faster sites have over slower competitors in your market.",{"id":2369,"title":2370,"titles":2371,"content":2372,"level":282},"\u002Fdocs\u002Fseo-impact#industry-evidence-public-case-studies","Industry Evidence: Public Case Studies",[2313,2318,2360],"The critical link between performance and SEO shown in our analysis is well-documented by numerous public case studies, confirming that a faster user experience is a key component of a successful SEO strategy. Study (year)Summary of findingsImpactSourceSISTRIX Data Study (2021)Domains meeting all Core Web Vitals (CWV) thresholds saw slightly higher search visibility, while sites failing CWV had ~3.7% lower visibility.Passing all CWV vs. failing ≥1 metric → +3.7 % higher Google Visibility IndexLinkAdvanced Web Ranking (2022)Analysis of ~3 million pages found a clear correlation between higher Google rankings and faster LCP times.Pages in Google positions 1–5 load ≈1s faster LCP on averageLinkLink Assistant Case (2021)A website saw a 30% drop in organic traffic after its LCP deteriorated. After optimizations, rankings and traffic recovered.LCP slipping from “green” to “amber” triggered –30 % organic clicksLinkGoogle Case – Nykaa (2022)By improving the Largest Contentful Paint (LCP) by 40%, Nykaa was able to increase organic search traffic by 28%.40% LCP improvement → +28% organic search trafficLinkShopify Case - Carpe (2023)After optimizing load time (improving LCP by 52%), organic traffic increased by 10%.52% faster LCP + 41% lower CLS → +10% organic trafficLinkGoogle Case – Redbus (2022)The travel site reduced its CLS from 1.65 to 0 and saw domain rankings jump ~192% in one market.CLS reduction to 0 → +192% domain ranking upliftLink",{"id":2374,"title":2375,"titles":2376,"content":2377,"level":236},"\u002Fdocs\u002Fseo-impact#technical-seo-crawler-compatibility-safety","Technical SEO: Crawler Compatibility & Safety",[2313,2318],"Speed Kit is engineered to be fully compatible and safe with search engine crawlers like Googlebot, ensuring your technical SEO foundation is never compromised. This is because Google's crawler uses a Web Rendering Service (WRS) to load and render pages, which does not support the Service Worker technology that powers Speed Kit's acceleration. As a result, the Googlebot always bypasses Speed Kit and interacts directly with your origin server, seeing the exact content you intend for it to index. This clean separation provides several key guarantees: No Risk of Cloaking: Because the crawler and the user ultimately see the same content from your origin, there is no risk of \"cloaking\"—showing different content to users and crawlers—which can incur severe SEO penalties.Targeted Optimization: It clarifies our strategy: we focus on improving the real user experience, which Google has confirmed is a direct ranking factor, rather than the crawl speed itself.No Crawler Traffic Costs: As a direct financial benefit, you do not incur any costs for Googlebot traffic through Speed Kit, as our infrastructure is not involved in the crawling process.",{"id":2379,"title":2380,"titles":2381,"content":2382,"level":236},"\u002Fdocs\u002Fseo-impact#a-note-on-client-side-rendering-csr","A Note on Client-Side Rendering (CSR)",[2313,2318],"Client-Side Rendered (CSR) websites present their own hurdles for search engines, including empty initial HTML files and resource-intensive rendering that can deplete a site's crawl budget. While Speed Kit does not alter this fundamental interaction for the crawler, it provides a critical SEO benefit by solving the poor user-facing LCP that often plagues CSR sites. By delivering a fast, seamless experience to visitors, Speed Kit improves the key user-centric ranking signals that Google prioritizes. For a deeper look into this topic, please see our documentation on Achieving Instant LCP on Client-Side Rendered Websites with Speed Kit.",{"id":2384,"title":2385,"titles":2386,"content":2387,"level":259},"\u002Fdocs\u002Fshop-migration","Shop Migration",[],"How to protect web performance during an e-commerce platform migration with Speed Kit's data-driven planning and 3-phase support program.",{"id":2389,"title":2390,"titles":2391,"content":230,"level":231},"\u002Fdocs\u002Fshop-migration#navigating-your-shop-migration-a-guide-to-sustaining-peak-performance","Navigating Your Shop Migration: A Guide to Sustaining Peak Performance",[2385],{"id":2393,"title":18,"titles":2394,"content":2395,"level":236},"\u002Fdocs\u002Fshop-migration#key-takeaways",[2385,2390],"Talk To Us Early: The single most important step for a successful migration is to inform your Customer Success Manager as soon as you start planning. The earlier we are involved, the more value we can provide, from sharing real-world performance data for your target platform to connecting you with other customers who have already made the switch.Proven Uplift on Any Platform: Our data proves that Speed Kit accelerates all common e-commerce platforms, delivering a measurable ROI regardless of the technology you use.Replatform with Confidence: Our 3-phase migration program covers every stage — from pre-migration data and peer connections, through 60 days of intensified monitoring, to a performance guarantee on your new platform.",{"id":2397,"title":2398,"titles":2399,"content":2400,"level":236},"\u002Fdocs\u002Fshop-migration#introduction-protecting-your-future-investment","Introduction: Protecting Your Future Investment",[2385,2390],"For any successful e-commerce business, a platform migration—whether changing your e-commerce system or your cloud provider—is an eventual reality. It’s a major project that presents both a huge opportunity and a significant risk. Getting it right leads to growth; getting it wrong can lead to a slower site and frustrated customers. The key to a successful migration is making performance a core part of the strategy from the very beginning. This guide explains the critical performance factors to consider, and how a partnership with Speed Kit ensures that whenever you decide to migrate, the outcome is a faster, more profitable website.",{"id":2402,"title":2403,"titles":2404,"content":2405,"level":236},"\u002Fdocs\u002Fshop-migration#proven-performance-on-any-platform","Proven Performance on Any Platform",[2385,2390],"No matter which e-commerce platform you use — or plan to migrate to — Speed Kit delivers a significant and measurable performance uplift. This is possible because our acceleration technology operates from the client-side — in the user's browser. While a fast shop system is a valuable foundation, the user experience becomes truly instant only when you eliminate the final bottlenecks of network latency and browser rendering. Speed Kit tackles this directly with advanced methods like predictive preloading. By preparing the next page before the user even clicks, we make navigations feel seamless. Our data from hundreds of clients shows a clear ROI across all major systems, proving that our browser-side approach ensures your site operates at peak performance, complementing any backend technology. A real-world example of this is Titus, Germany's leading retailer for skateboards and streetwear. After migrating to Shopify, they partnered with Speed Kit to ensure their online experience was as fast as their sport. The result was a 31% improvement in LCP, making their site faster than Amazon.de, and a user experience where 80% of navigations were correctly predicted and pre-rendered for an instant feel. You can read the full Titus case study here.",{"id":2407,"title":2408,"titles":2409,"content":2410,"level":236},"\u002Fdocs\u002Fshop-migration#laying-the-foundation-for-a-high-performance-migration","Laying the Foundation for a High-Performance Migration",[2385,2390],"Whenever you plan your migration, you will be faced with critical technical decisions. As a business leader, you don't need to be the expert, but you need to know what to listen for. Whether you are signing a contract with a development agency or briefing your internal team, it is vital to establish a performance budget before committing to a specific architecture. This means setting clear, measurable goals for key metrics. Using our Real User Monitoring (RUM) tool, we analyze how performance currently impacts your business KPIs. This allows us to define data-driven targets for your new platform that are designed to maximize business success. Defining these targets upfront is a business responsibility that ensures all partners and internal stakeholders are aligned on your performance expectations from day one, safeguarding your investment. This leadership is critical because without clear business goals, development teams may prioritize developer experience (using the newest technologies) over customer experience (ensuring the site is unconditionally fast). This can lead to architectural decisions that are exciting to build but difficult to optimize later, locking in poor performance. With these goals in place, you can better evaluate technical proposals. For example, if your project plan includes a Single-Page Application (SPA) or relies heavily on Client-Side Rendering (CSR), your alarm bells should ring. For most e-commerce sites, these architectures can lead to slower page loads, unreliable performance metrics, and potential SEO challenges—problems that are very difficult and expensive to fix after launch. To help you navigate these critical decisions and avoid such pitfalls, we provide data-driven insights to support your technical planning. This includes exclusive access to our powerful benchmarking tool, which uses data from over 300,000 online shops to compare the real-world performance of different technologies and e-commerce platforms. Beyond the data, where possible, we also try to connect you with peers who have already migrated to your target platform, offering firsthand insights you won’t find anywhere else.",{"id":2412,"title":2413,"titles":2414,"content":2415,"level":236},"\u002Fdocs\u002Fshop-migration#planning-a-migration-soon-why-you-should-partner-with-us-now","Planning a Migration Soon? Why You Should Partner With Us Now",[2385,2390],"If your migration is on the horizon, you might be tempted to wait until your new site is live before focusing on performance. This approach often leads to costly delays and unforeseen problems. Engaging with us early in your migration planning provides several key advantages for a smoother transition: Gather Critical Performance Data: By activating Speed Kit on your current site, we collect valuable Real User Monitoring (RUM) data. This provides a data-driven baseline of your key business metrics. When your new site is ready, we can compare its performance against the old system to instantly spot and fix any new bottlenecks.Make Data-Driven Platform Decisions: We provide access to a unique tool that lets you run a side-by-side performance comparison between different shop systems, showing the concrete uplift Speed Kit provides on each. This helps you choose the right platform with confidence.Generate Value Now: You'll get an immediate performance boost on your current platform that improves your business metrics, instead of waiting months for your migration to finish.Ensure a Seamless Partnership: By starting now, we become your dedicated performance partner throughout the entire migration, helping you avoid common pitfalls from day one.",{"id":2417,"title":2418,"titles":2419,"content":2420,"level":236},"\u002Fdocs\u002Fshop-migration#replatform-with-confidence-your-performance-safety-net","Replatform with Confidence: Your Performance Safety Net",[2385,2390],"Planning a replatform? Leverage Predictive Preloading from the start for a snappy UX and seamless conversions. Contact us early, and we will de-risk your migration. As a Speed Kit customer, you get exclusive access to our structured 3-phase support program designed to protect your performance investment at every stage of the migration.",{"id":2422,"title":2423,"titles":2424,"content":2425,"level":282},"\u002Fdocs\u002Fshop-migration#phase-1-pre-migration","Phase 1: Pre-Migration",[2385,2390,2418],"Leverage Our Data: Access our performance database of ~250,000 online shops to compare platforms, technologies, and 3rd parties. Make a data-driven platform decision instead of relying on vendor promises.Connect with Peers: We connect you 1-on-1 with e-commerce peers with relevant experience on your target platform. With the consent of all parties, gain firsthand migration insights you cannot get anywhere else.",{"id":2427,"title":2428,"titles":2429,"content":2430,"level":282},"\u002Fdocs\u002Fshop-migration#phase-2-migration-go-live","Phase 2: Migration & Go-Live",[2385,2390,2418],"Risk Monitoring: 60 days of intensified Speed Guard monitoring: detection of broken add-to-cart flows, checkout failures, and performance regressions. We catch post-launch issues before they impact your revenue.Quick Win Audit: After relaunch, receive immediately actionable performance boosts for Core Web Vitals (INP, CLS, LCP) by certified Google Developer Experts. Common finds include unoptimized images, missing compression, and slow 3rd-party scripts on the new platform.",{"id":2432,"title":2433,"titles":2434,"content":2435,"level":282},"\u002Fdocs\u002Fshop-migration#phase-3-post-migration","Phase 3: Post-Migration",[2385,2390,2418],"Performance Risk Guarantee: Free A\u002FB test of Speed Kit on your new platform. Guaranteed performance uplift — or you walk away. Zero risk.Migration Credit: If the guarantee is met, your next renewal is extended by 3 months at no extra charge.",{"id":2437,"title":2438,"titles":2439,"content":2440,"level":236},"\u002Fdocs\u002Fshop-migration#your-next-step","Your Next Step",[2385,2390],"The takeaway is simple: Tell your customer success manager about a planned migration as soon as possible. Whether you are in the earliest stages of considering a new platform or have a detailed plan, bringing us into the conversation early is the best way to ensure a smooth, successful, and profitable transition. We can provide the most help when we are involved from the start. Contact your customer success manager today to open the conversation.",{"id":2442,"title":2443,"titles":2444,"content":2445,"level":259},"\u002Fdocs\u002Fsingle-page-applications","Single-Page Applications",[],"How Speed Kit accelerates Single-Page Applications by optimizing soft navigations, caching API calls, and accurately measuring SPA performance.",{"id":2447,"title":2448,"titles":2449,"content":230,"level":231},"\u002Fdocs\u002Fsingle-page-applications#accelerating-single-page-applications-spas-with-speed-kit","Accelerating Single-Page Applications (SPAs) With Speed Kit",[2443],{"id":2451,"title":18,"titles":2452,"content":2453,"level":236},"\u002Fdocs\u002Fsingle-page-applications#key-takeaways",[2443,2448],"Solves Core SPA Challenges: Speed Kit is specifically designed to solve the unique performance challenges of Single-Page Applications by optimizing both initial loads and subsequent \"soft navigations\" which are often invisible to standard tools.Intelligent Acceleration: Acceleration is achieved through multiple techniques, including API call caching and transforming slow soft navigations by predictively pre-rendering them in the background.Advanced LCP Measurement: Speed Kit has developed techniques to accurately measure the Largest Contentful Paint (LCP) for soft navigations, providing a true picture of a user's perceived loading performance where standard tools fail.",{"id":2455,"title":45,"titles":2456,"content":2457,"level":236},"\u002Fdocs\u002Fsingle-page-applications#introduction",[2443,2448],"Single-Page Applications (SPAs), often built with popular frameworks like React, Vue, and Angular, have become a cornerstone of the modern web, offering fluid, app-like user experiences. However, this architecture presents unique challenges for performance optimization that traditional methods cannot solve. Unlike multi-page sites, SPAs rely on \"soft navigations\"—dynamically rewriting content with JavaScript instead of full-page loads. This fundamental difference means that standard caching techniques and performance metrics often fail. A user might experience significant slowness when navigating between views, but this lag can be completely invisible to traditional tools. Speed Kit addresses this blind spot with a suite of specialized techniques designed for the SPA lifecycle.",{"id":2459,"title":2460,"titles":2461,"content":2462,"level":236},"\u002Fdocs\u002Fsingle-page-applications#ssr-vs-csr-a-quick-comparison","SSR vs. CSR: A Quick Comparison",[2443,2448],"The performance of an SPA is heavily influenced by its rendering strategy. Server-Side Rendering (SSR): The server sends a fully rendered HTML page to the browser, allowing for a fast initial display of content. While all common SPA frameworks support this capability, it requires additional server infrastructure that must be managed and paid for, making its adoption a customer-specific decision. It is generally the recommended approach for optimal performance, as it mitigates the initial JavaScript initialization overhead.Client-Side Rendering (CSR): The browser receives a minimal HTML shell and uses JavaScript to render the content. This can lead to a slower initial load and a poor Largest Contentful Paint (LCP), as the user must wait for scripts to download and execute. Since the LCP for an SPA is only measured on this first page view, a slow initial load can negatively affect your Core Web Vitals score in the Chrome User Experience Report (CrUX)—a public dataset from Google that collects real user performance data—which may impact search ranking and ad prices. For a detailed analysis of these architectures and how Speed Kit optimizes them, please refer to our full documentation on Rendering Architectures.",{"id":2464,"title":2465,"titles":2466,"content":2467,"level":236},"\u002Fdocs\u002Fsingle-page-applications#solving-spa-performance-bottlenecks","Solving SPA Performance Bottlenecks",[2443,2448],"Speed Kit offers two powerful ways of optimizing soft navigations. The best strategy depends on the client's specific setup, and we use our Real User Monitoring (RUM) data to make a smart, data-driven decision for each application. It is possible to use one or both methods depending on the project's goals. Both methods are compatible with all modern browsers. Both methods only apply to page types that are whitelisted for acceleration by Speed Kit.",{"id":2469,"title":2470,"titles":2471,"content":2472,"level":282},"\u002Fdocs\u002Fsingle-page-applications#method-1-transforming-soft-navigations-into-hard-navigations","Method 1: Transforming Soft Navigations into Hard Navigations",[2443,2448,2465],"A major bottleneck in SPAs is the JavaScript rendering process itself. After the API data is received, the framework must execute code to build the new view and update the DOM (the structural representation of the page). This process can occupy the browser's main thread, leading to significant delays, especially on average mobile devices with limited CPU and memory resources. The \"Soft-to-Hard\" navigation technology is a powerful tool that typically has a greater performance impact than API caching. As this method fundamentally alters the application's default navigation behavior, it is only enabled with explicit customer approval. The underlying logic only transforms the navigation if the destination page has already been pre-cached or pre-rendered, which guarantees that the resulting hard navigation is faster than the original soft navigation. This ensures the user always experiences the fastest possible page transition. An important additional benefit is the positive impact on Core Web Vitals, as this method generates new hard navigations that are correctly measured by Google's Chrome User Experience Report (CrUX). Predictive Preloading & Pre-rendering: Using machine learning on RUM data, Speed Kit predicts the user's next action and either pre-caches or pre-renders (in Chromium browsers) the complete HTML for the destination page in the background. For more details on this process, please refer to our documentation on Predictive Preloading.Navigation Check & Conditional Switch: When the user clicks a link, Speed Kit first checks if the target page has been successfully pre-cached or pre-rendered.\nIf the page is pre-cached or pre-rendered: Speed Kit intercepts the JavaScript event and performs an instant hard navigation. This leverages the browser's highly optimized native renderer, completely bypassing the framework's client-side rendering process.If the page is not pre-cached or pre-rendered: Speed Kit allows the SPA's default soft navigation to proceed. In this scenario, the navigation can still be accelerated using Method 2.Implementation: Speed Kit can automatically intercept navigation events to apply this logic. For a more direct integration, the same logic can also be added to your application's router (the part of the SPA that manages URL changes). This method has shown excellent results across several customer implementations and is the ultimate optimization for SPAs, as it combines the predictive power of Speed Kit with the raw rendering speed of the browser.",{"id":2474,"title":2475,"titles":2476,"content":2477,"level":282},"\u002Fdocs\u002Fsingle-page-applications#method-2-api-call-caching","Method 2: API Call Caching",[2443,2448,2465],"This foundational method accelerates soft navigations by caching the API calls that fetch data for the next view. The time spent waiting for these network requests is a major source of delay. By caching the API responses in the browser, the required data can be served instantly when a user navigates. Furthermore, this method can be wired together with our predictive preloading engine. By analyzing user behavior, Speed Kit can predict which API calls will be needed for the next soft navigation and proactively fetch them before the user even clicks. Important Prerequisite: This method is only effective if your backend architecture separates general, cacheable content (like product data) from personalized, uncacheable content (like user information) into distinct API calls. An API endpoint that returns mixed content cannot be cached. To ensure data from these cached APIs is always up-to-date, the same powerful cache coherence mechanisms used for HTML content are applied. This includes real-time change detection and the ability to trigger refreshes, either manually through the dashboard or automatically on a schedule. You can learn more about how this works in our documentation on Dynamic Caching.",{"id":2479,"title":2480,"titles":2481,"content":2482,"level":282},"\u002Fdocs\u002Fsingle-page-applications#fallback-accelerating-hard-navigations","Fallback: Accelerating Hard Navigations",[2443,2448,2465],"In cases where neither of the above methods for accelerating soft navigations can be implemented, it is important to remember that Speed Kit’s core technology always accelerates hard navigations. This includes the crucial first page a user lands on, which has a significant impact on the overall user experience, especially for returning users and traffic from marketing campaigns like retargeting.",{"id":2484,"title":2485,"titles":2486,"content":2487,"level":236},"\u002Fdocs\u002Fsingle-page-applications#measuring-real-spa-performance","Measuring Real SPA Performance",[2443,2448],"Tracking Core Web Vitals (CWV) in Single-Page Applications is notoriously difficult. Many of our customers were not aware that their data in the Chrome User Experience Report (CrUX)—a public dataset from Google that collects real user performance data—only represents the initial page load correctly. Since the first load is typically the slowest because the entire JavaScript framework must be downloaded first, this creates a skewed picture of the overall user experience. While some clients measure their API response times, the subsequent JavaScript rendering time remains a huge blind spot in their data. This lack of visibility makes it very difficult to make smart, data-driven decisions about performance. The technical problem begins with the fundamental challenge of reliably identifying when a \"soft navigation\" has even occurred. Different frameworks handle this process in unique ways. Some change the URL, while others do not; the timing of this change can also vary. This inconsistency makes it incredibly hard for monitoring tools to pinpoint the precise start and end of a navigation event, including the subsequent rendering process. Many soft navigations render the new view in several iterations—often involving animations or interim loading spinners—making it challenging to measure the correct final paint of the new content.",{"id":2489,"title":2490,"titles":2491,"content":2492,"level":282},"\u002Fdocs\u002Fsingle-page-applications#the-measurement-challenge","The Measurement Challenge",[2443,2448,2485],"Largest Contentful Paint (LCP): Standard LCP only measures the initial load. It does not capture the LCP of a new view that appears after a soft navigation, which is often the most important perceived loading metric for the user.Interaction to Next Paint (INP): The INP for the entire session is defined by the single slowest interaction that occurs. This makes it difficult to trace a poor score back to the specific soft navigation or component that caused the delay.Cumulative Layout Shift (CLS): The measurement method, which finds the worst 5-second window of layout shifts, is the same for all page loads. However, for hard navigations, only the windows on that specific page are considered. In an SPA, windows from the entire session are evaluated, and the worst one becomes the final CLS score. This makes it very difficult to trace a poor score back to the specific soft navigation that caused it. Ultimately, the way INP and CLS are measured across an entire session means the Core Web Vitals scores for an SPA in CrUX are likely to be worse than for a traditional site. The longer a user's session, the higher the likelihood that a single poor interaction or a significant layout shift will occur, which then defines the score for the entire journey.",{"id":2494,"title":2495,"titles":2496,"content":2497,"level":282},"\u002Fdocs\u002Fsingle-page-applications#the-google-solution","The Google Solution",[2443,2448,2485],"The Google team is aware of these challenges and is working to standardize the definition of a soft navigation. Their proposed approach requires a navigation to meet three criteria to be considered valid: it must be initiated by a user action, it must change the URL visible to the user, and it must result in a meaningful manipulation of the DOM. A full solution to enable the tracking of soft navigations in a way that is similar to hard navigations is currently in the making. For more info, read the following article: Experimenting With Measuring Soft Navigations.",{"id":2499,"title":2500,"titles":2501,"content":2502,"level":282},"\u002Fdocs\u002Fsingle-page-applications#the-speed-kit-solution","The Speed Kit Solution",[2443,2448,2485],"To provide our customers with actionable data immediately, Speed Kit has developed its own solution to track the LCP of soft navigations today, rather than waiting for Google's official standard to be finalized. Our integrated RUM includes advanced instrumentation designed to accurately track the LCP for soft navigations. This provides an authentic picture of how users genuinely experience your site, allowing you to segment performance data, correlate it with business metrics, and proactively identify real-world regressions with the help of our Web Performance Intelligence Team. You can find detailed information about our approach in the blog post: Measuring Largest Contentful Paint in Single-Page Applications.",{"id":2504,"title":2505,"titles":2506,"content":2507,"level":259},"\u002Fdocs\u002Fspeed-improvements-and-metrics","Speed Improvements & Metrics",[],"How Speed Kit reduces backend, network, and browser time to improve TTFB, FCP, LCP, and the other Core Web Vitals.",{"id":2509,"title":2510,"titles":2511,"content":230,"level":231},"\u002Fdocs\u002Fspeed-improvements-and-metrics#speed-kits-impact-on-web-performance-metrics","Speed Kit's Impact on Web Performance Metrics",[2505],{"id":2513,"title":18,"titles":2514,"content":2515,"level":236},"\u002Fdocs\u002Fspeed-improvements-and-metrics#key-takeaways",[2505,2510],"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.",{"id":2517,"title":45,"titles":2518,"content":2519,"level":236},"\u002Fdocs\u002Fspeed-improvements-and-metrics#introduction",[2505,2510],"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.",{"id":2521,"title":2522,"titles":2523,"content":230,"level":236},"\u002Fdocs\u002Fspeed-improvements-and-metrics#how-speed-kit-accelerates-core-performance-factors","How Speed Kit Accelerates Core Performance Factors",[2505,2510],{"id":2525,"title":2526,"titles":2527,"content":2528,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#backend-time","Backend Time",[2505,2510,2522],"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.",{"id":2530,"title":2531,"titles":2532,"content":2533,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#network-time","Network Time",[2505,2510,2522],"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.",{"id":2535,"title":2536,"titles":2537,"content":2538,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#browser-time","Browser Time",[2505,2510,2522],"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.",{"id":2540,"title":2541,"titles":2542,"content":230,"level":236},"\u002Fdocs\u002Fspeed-improvements-and-metrics#which-performance-metrics-speed-kit-optimizes","Which Performance Metrics Speed Kit Optimizes",[2505,2510],{"id":2544,"title":1816,"titles":2545,"content":2546,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#time-to-first-byte-ttfb",[2505,2510,2541],"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 TimeTLS 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.",{"id":2548,"title":1826,"titles":2549,"content":2550,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#first-contentful-paint-fcp",[2505,2510,2541],"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.",{"id":2552,"title":1840,"titles":2553,"content":2554,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#largest-contentful-paint-lcp",[2505,2510,2541],"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.",{"id":2556,"title":2557,"titles":2558,"content":230,"level":236},"\u002Fdocs\u002Fspeed-improvements-and-metrics#impact-on-other-core-web-vitals","Impact on Other Core Web Vitals",[2505,2510],{"id":2560,"title":1869,"titles":2561,"content":2562,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#cumulative-layout-shift-cls",[2505,2510,2557],"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.",{"id":2564,"title":1860,"titles":2565,"content":2566,"level":282},"\u002Fdocs\u002Fspeed-improvements-and-metrics#interaction-to-next-paint-inp",[2505,2510,2557],"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.",{"id":2568,"title":2569,"titles":2570,"content":2571,"level":259},"\u002Fdocs\u002Fspeed-kit-bot","Speed Kit Bot",[],"Details on the Speed Kit Bot's cookie-less, anonymous fetches, its User-Agent identifier, and where to retrieve its current egress IP addresses.",{"id":2573,"title":2569,"titles":2574,"content":2575,"level":231},"\u002Fdocs\u002Fspeed-kit-bot#speed-kit-bot",[2569],"Speed Kit is a performance platform that accelerates websites by caching dynamic HTML, orchestrating a Service Worker in the browser, and predicting subsequent navigations to pre‑render pages. Our backend makes cookie‑less, anonymous fetches of publicly available pages to build and keep an anonymized cache in sync. These requests originate from our Speed Kit Bot and are safe to allow in rate limiters and bot managers.",{"id":2577,"title":2578,"titles":2579,"content":2580,"level":236},"\u002Fdocs\u002Fspeed-kit-bot#useragent","User‑Agent",[2569,2569],"The full User-Agent includes additional tokens (e.g., runtime or browser prefixes\u002Fsuffixes), but it always contains the substring: SpeedKit\u002F1.0",{"id":2582,"title":2583,"titles":2584,"content":2585,"level":236},"\u002Fdocs\u002Fspeed-kit-bot#bot-ips","Bot IPs",[2569,2569],"The current egress IP addresses used by the Speed Kit Bot can be retrieved as JSON at: https:\u002F\u002Fassets.speedkit.com\u002Fbot.json",{"id":2587,"title":2588,"titles":2589,"content":2590,"level":259},"\u002Fdocs\u002Fspeed-kit-on-shopify","Speed Kit on Shopify",[],"How to set up the Shopify Crawler Access Signature for Speed Kit and understand the Shopify-specific behaviors Speed Kit applies automatically.",{"id":2592,"title":2593,"titles":2594,"content":230,"level":231},"\u002Fdocs\u002Fspeed-kit-on-shopify#speed-kit-on-shopify-setup-and-behavior","Speed Kit on Shopify: Setup and Behavior",[2588],{"id":2596,"title":18,"titles":2597,"content":2598,"level":236},"\u002Fdocs\u002Fspeed-kit-on-shopify#key-takeaways",[2588,2593],"Secure Crawler Access: Generate a Crawler Access Signature in your Shopify admin panel and paste it into the Speed Kit dashboard to authorize dynamic caching and content synchronization.90-Day Renewal Cycle: Shopify signatures expire after 90 days. Set a calendar reminder to renew on time — an expired signature causes stale cached pages and increased error rates.Platform-Aware Configuration: Speed Kit automatically adapts to Shopify's preview mode, rate limits, and query parameter handling — no manual configuration required.",{"id":2600,"title":45,"titles":2601,"content":2602,"level":236},"\u002Fdocs\u002Fspeed-kit-on-shopify#introduction",[2588,2593],"To deliver always-fresh content on your Shopify store, Speed Kit regularly fetches your pages in the background using Shopify's Crawler Access Signature — a secure authentication token you generate in your Shopify admin panel. This guide walks you through generating and entering that signature, explains the Shopify-specific settings Speed Kit applies automatically, and covers the renewal steps to keep your store running at peak performance.",{"id":2604,"title":2605,"titles":2606,"content":2607,"level":236},"\u002Fdocs\u002Fspeed-kit-on-shopify#set-up-crawler-access","Set Up Crawler Access",[2588,2593],"Shopify enforces bot protection on all storefronts, so Speed Kit's background requests must be authenticated with a Crawler Access Signature. Without a valid signature, Shopify may rate-limit or block Speed Kit's requests, resulting in stale content or error codes. You can read more about this on the official Shopify help page: Crawling Your Store",{"id":2609,"title":2610,"titles":2611,"content":2612,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#part-1-generate-the-signature-in-shopify","Part 1: Generate the Signature in Shopify",[2588,2593,2605],"1. In your Shopify admin panel, go to Online Store and click on Preferences. 2. Scroll down to the Crawler access section and click the Create signature button. 3. In the \"Create new signature\" pop-up: Set a signature name, for example, \"Speed Kit.\"For the Expires in field, select the longest available option, which is typically 90 days. This maximizes the time before you need to renew the signature. 4. Click Create signature. 5. A new \"Signature fields\" pop-up appears with three values you need to copy: Signature, Signature-Input, and Signature-Agent. 6. Copy each of these three values separately.",{"id":2614,"title":2615,"titles":2616,"content":2617,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#part-2-enter-the-signature-in-the-speed-kit-dashboard","Part 2: Enter the Signature in the Speed Kit Dashboard",[2588,2593,2605],"1. Navigate to the Speed Kit App in your Shopify admin panel. 2. Go to the Configs section. 3. Paste the three values you copied from Shopify into the corresponding fields under Configure Crawler Access Signature: SignatureSignature-InputSignature-Agent (this should typically read \"https:\u002F\u002Fshopify.com\" for a Shopify store) 4. Click the Save button to apply the changes.",{"id":2619,"title":2620,"titles":2621,"content":2622,"level":236},"\u002Fdocs\u002Fspeed-kit-on-shopify#shopify-specific-configuration-details","Shopify-Specific Configuration Details",[2588,2593],"Speed Kit automatically adapts its configuration to Shopify's platform constraints. No manual configuration is needed for the items below, but understanding them helps with debugging and support conversations. For a full reference of all configuration options, see our documentation: \"Speed Kit Configuration.\"",{"id":2624,"title":2625,"titles":2626,"content":2627,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#preview-mode-handling","Preview Mode Handling",[2588,2593,2620],"When you preview a theme in your Shopify admin, Speed Kit automatically detects the preview cookies (preview_theme and speedkit-shopify-preview) and URL parameters (?preview_theme). Pages accessed in preview mode bypass the cache entirely, ensuring you always see your latest theme changes in real time.",{"id":2629,"title":2630,"titles":2631,"content":2632,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#rate-limit-management","Rate Limit Management",[2588,2593,2620],"Shopify enforces strict rate limits on all server requests. Speed Kit respects these limits by defaulting to a maximum of 5 requests per second to your Shopify origin, compared to higher defaults on other platforms. This prevents HTTP 429 (Too Many Requests) errors. During periods of high request volume, Speed Kit's dynamic throttling automatically backs off further to protect your store's availability. Customers continue receiving cached content during any throttling — they experience no downtime.",{"id":2634,"title":2635,"titles":2636,"content":2637,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#query-parameter-handling","Query Parameter Handling",[2588,2593,2620],"Shopify appends various tracking and internal query parameters to URLs. Speed Kit automatically strips these before caching to prevent unnecessary cache fragmentation (where the same page gets stored multiple times under different URLs): Shopify internal parameters: _fid, _pos, _psq, _sid, _ss, _v.Recommendation tracking: Parameters with the pr_ prefix (Shopify product recommendation tracking).A\u002FB testing and preview: _ab, _fd, view. This means two URLs differing only in these parameters correctly resolve to the same cached page.",{"id":2639,"title":2640,"titles":2641,"content":2642,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#console-messages-from-shopifys-service-worker","Console Messages from Shopify's Service Worker",[2588,2593,2620],"When Speed Kit is active, you may notice many \"fetch event block\" log messages in your browser's developer console, as shown in the screenshot below. These messages do not come from Speed Kit. Shopify's own interim service worker generates them, logging a message for every resource it processes. These logs are purely informational and do not indicate any problem with Speed Kit or your store. They can be safely ignored, even though they appear frequently.",{"id":2644,"title":2645,"titles":2646,"content":230,"level":236},"\u002Fdocs\u002Fspeed-kit-on-shopify#keeping-your-setup-current","Keeping Your Setup Current",[2588,2593],{"id":2648,"title":2649,"titles":2650,"content":2651,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#signature-renewal","Signature Renewal",[2588,2593,2645],"The crawler access signature expires after the duration you selected during setup (typically 90 days). When it expires, Speed Kit loses authorization to fetch fresh content from your store, which can lead to stale cached pages or increased error rates. To renew, repeat the same process from the Installation Guide: generate a new signature in your Shopify admin panel and paste the updated values into the Speed Kit dashboard. Set a calendar reminder a few days before your current signature expires to avoid any lapse in service. For broader guidance on when configuration updates are needed, see our documentation: \"Ensuring Seamless Performance: When to Update Your Speed Kit Configuration.\"",{"id":2653,"title":2654,"titles":2655,"content":2656,"level":282},"\u002Fdocs\u002Fspeed-kit-on-shopify#verifying-your-setup","Verifying Your Setup",[2588,2593,2645],"You can verify that Speed Kit is correctly installed and running on your Shopify store at any time using the Speed Kit Chrome extension. Open your store in Chrome, click the extension icon, and check the installation status panel. Blue checkmarks next to each requirement confirm a correct setup. If any issue is detected, address it in the Speed Kit app within your Shopify admin — installation is managed there, not in the Chrome extension.",{"id":2658,"title":2659,"titles":2660,"content":2661,"level":259},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr","Speed Kit vs Native PPR",[],"Why Speed Kit's decoupled, browser-native approach delivers the instant loading of Next.js Partial Prerendering without the refactoring, cost, and maintenance burden.",{"id":2663,"title":2664,"titles":2665,"content":230,"level":231},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#speed-kit-vs-native-nextjs-partial-prerendering-ppr","Speed Kit vs. Native Next.js Partial Prerendering (PPR)",[2659],{"id":2667,"title":18,"titles":2668,"content":2669,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#key-takeaways",[2659,2664],"Decoupled Architecture: Speed Kit delivers instant loading speeds through a browser-based Service Worker and Edge logic, eliminating the need to refactor complex code or \"atomize\" components as required by Native PPR.Superior Navigation Stability: By utilizing the standardized Speculation Rules API, Speed Kit performs instant hard navigations that clear memory and avoid the Main Thread contention, Cumulative Layout Shifts (CLS), and INP regressions common with Next.js client-side routing.AI-Driven Efficiency & Offloading: Speed Kit handles predictive preloading completely on its own infrastructure, ensuring no increase in your origin server load or costs. Unlike native solutions where \"viewport pre-fetching\" spikes cloud bills, Speed Kit uses AI prediction to maximize speed efficiently.",{"id":2671,"title":45,"titles":2672,"content":2673,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#introduction",[2659,2664],"In the evolving landscape of web performance, Next.js Partial Prerendering (PPR) promises to merge the benefits of static site generation with dynamic content. However, for established e-commerce architectures, adopting native PPR often presents a significant \"Refactoring Wall.\" It requires decomposing mature codebases into atomic units, introducing substantial technical debt and maintenance overhead. Speed Kit offers a robust alternative that achieves the intended outcome of PPR—instant page loads with seamless dynamic merging—without the architectural burden. By leveraging Browser Natives (such as the Speculation Rules API) and intelligent Edge Logic, Speed Kit completely decouples performance from your application code. This document outlines why a managed solution like Speed Kit is often the more prudent choice for enterprise e-commerce compared to a native implementation.",{"id":2675,"title":2676,"titles":2677,"content":2678,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#technical-comparison-navigation-architectures","Technical Comparison: Navigation Architectures",[2659,2664],"To understand the performance implications, it is critical to distinguish how Native PPR and Speed Kit handle navigation.",{"id":2680,"title":2681,"titles":2682,"content":2683,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_1-native-ppr-the-hybrid-model","1. Native PPR: The Hybrid Model",[2659,2664,2676],"Native Next.js employs two completely different mechanisms depending on the user's context. Hard Navigation (First Load \u002F Re-entry \u002F Cross-Stack): This occurs when a user arrives from Google, refreshes the page, re-enters the site later, or navigates between different application stacks (e.g., moving from a Next.js PLP to a separate Checkout app or legacy PDP). In these cases, the browser has no shared JavaScript state. Next.js serves a Static HTML Shell immediately from the Edge, then streams the dynamic content (like prices) as it becomes ready. This is fast because the browser renders HTML natively.Soft Navigation (Client-Side Routing): Once the page is loaded, Next.js \"hydrates\" into a Single Page Application (SPA). As users scroll, Next.js automatically pre-fetches the Static RSC Payloads for links in the viewport. When a user clicks, the browser does not reload. Instead, JavaScript intercepts the click, combines the pre-cached static shell with fresh dynamic data, and manually reconstructs the DOM.",{"id":2685,"title":2686,"titles":2687,"content":2688,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_2-speed-kit-the-browser-native-approach","2. Speed Kit: The Browser-Native Approach",[2659,2664,2676],"Speed Kit takes a fundamentally different approach by leveraging the modern Speculation Rules API. Instant Hard Navigation: Speed Kit treats every click as a \"Hard Navigation,\" but makes it instant. We instruct the browser to pre-render the next page in a hidden background process. When the user clicks, the browser simply swaps the view.Zero Initialization Tax: Because Speed Kit does not rely on a client-side router to construct the page, we do not need to boot up heavy JavaScript logic on the first load. The user gets a fast experience immediately, and the browser handles the transition natively.Client-Side Merging: Once the browser swaps to the new page (the Anonymized Snapshot), Speed Kit's Service Worker fetches the fresh dynamic data from your origin and merges it into the DOM.",{"id":2690,"title":2691,"titles":2692,"content":2693,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#performance-implications-of-navigation-types","Performance Implications of Navigation Types",[2659,2664],"Relying heavily on JavaScript to handle routing is increasingly viewed as an anti-pattern for complex e-commerce sites, particularly regarding interaction stability and rendering performance.",{"id":2695,"title":2696,"titles":2697,"content":2698,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#performance-characteristics-of-client-side-routing-nextjs","Performance Characteristics of Client-Side Routing (Next.js)",[2659,2664,2691],"Next.js utilizes a client-side router to intercept clicks and patch the DOM. While the static \"shell\" may be pre-fetched, the actual navigation process introduces distinct hurdles:",{"id":2700,"title":2701,"titles":2702,"content":2703,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#main-thread-execution-overhead","Main Thread Execution Overhead:",[2659,2664,2691,2696],"Even if the Static Shell is pre-fetched and ready in the cache, it is stored as an RSC Payload (JSON-like data), not HTML. To display this shell, the browser must execute a heavy sequence of JavaScript tasks on the single Main Thread: Construct the new Virtual DOM from the payload.Diff the Virtual DOM against the current state.Patch the actual Real DOM.Paint the static shell.",{"id":2705,"title":2706,"titles":2707,"content":2708,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#network-latency-and-processing","Network Latency and Processing",[2659,2664,2691,2696],"Simultaneously, the browser must fire a request to the Next.js Edge Server to retrieve the fresh Dynamic Data (RSC Payload). The Edge then fetches the data from your backend and streams it back. The Impact: The browser must parse the RSC payload for the dynamic data and rerun similar rendering steps (reconciliation, diffing, patching) as it did for the shell before the content becomes actually visible. This relies again heavily on JavaScript, consuming further Main Thread resources even after the data has arrived.",{"id":2710,"title":2711,"titles":2712,"content":2713,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#hardware-dependency","Hardware Dependency",[2659,2664,2691,2696],"Because this entire sequence relies on the client's CPU, performance fluctuates wildly based on the user's device. On average mobile phones, this processing time creates a noticeable lag (poor Interactive Content Full Paint), even if the data was already downloaded.",{"id":2715,"title":2716,"titles":2717,"content":2718,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#performance-characteristics-of-speculation-rules-speed-kit","Performance Characteristics of Speculation Rules (Speed Kit)",[2659,2664,2691],"Speed Kit leverages the Speculation Rules API, a modern browser standard, to handle navigation. Off-Thread Background Rendering: Speed Kit instructs the browser to fully render the Anonymized Snapshot of the next page in a completely separate process. The browser natively parses HTML, calculates styles, and paints the pixels of this cached view to an off-screen buffer in the background.Instant Swap: When the user clicks, the browser simply composites this pre-painted snapshot into view. The user sees a visually complete page instantly.Background Hydration: Immediately upon the click, Speed Kit requests the fresh dynamic data (e.g., cart, prices) from the origin and merges it into the page, ensuring data freshness without delaying the visual transition.",{"id":2720,"title":2721,"titles":2722,"content":2723,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#operational-considerations-for-single-page-applications-spas","Operational Considerations for Single Page Applications (SPAs)",[2659,2664],"Beyond the theoretical performance costs, relying on Client-Side Routing (Soft Navigation) introduces significant operational headaches for enterprise e-commerce environments.",{"id":2725,"title":2726,"titles":2727,"content":2728,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_1-initial-load-overhead-vs-session-depth","1. Initial Load Overhead vs. Session Depth",[2659,2664,2721],"To enable \"Soft Navigations,\" the browser must download and execute a massive amount of JavaScript upfront. This creates a high \"Initialization Tax\" on the very first load. Key Insight: As highlighted in The Curious Case of the Shallow Session & SPAs, this trade-off is often negative for e-commerce. The majority of users are \"bouncers\" or shallow visitors who leave before they ever click a second link. In the Native PPR model, these users pay the high cost of booting up the SPA framework but leave before reaping the benefits of fast soft navigations.",{"id":2730,"title":2731,"titles":2732,"content":2733,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_2-integration-with-micro-frontends","2. Integration with Micro-Frontends",[2659,2664,2721],"Modern e-commerce sites are rarely monolithic Single Page Applications (SPAs). They are typically a patchwork of distinct systems: Discovery: Next.js (Home, PLP, PDP)Checkout: Shopify \u002F Salesforce \u002F Different Next.js APP \u002F Legacy (Different Tech Stack)Account: Separate Authentication App The Problem: Client-Side Routing only works within the boundaries of the Next.js app. The moment a user moves from PDP (Next.js) to Checkout (Different Tech Stack), the browser forces a Hard Navigation. The Waste: The heavy JavaScript bundles downloaded to power the Next.js \"Soft Navigation\" logic are effectively wasted. The user paid the \"Initialization Tax\" but never reaped the long-term benefit because the checkout flow breaks the SPA session.",{"id":2735,"title":2736,"titles":2737,"content":2738,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_3-cache-persistence-and-reliability","3. Cache Persistence and Reliability",[2659,2664,2721],"Native PPR relies on the Next.js Router Cache to store pre-fetched fragments. The Volatility: This cache is strictly in-memory. If the user hits \"Refresh,\" closes the tab, or navigates to the Checkout and hits \"Back,\" that cache is wiped instantly. The browser must re-fetch the data.The Speed Kit Difference: Speed Kit leverages the Service Worker Cache and standardized HTTP Cache, which persist to disk. Pre-rendered snapshots survive reloads, switching between stacks, leaving the page entirely, or even browser restarts. If a user leaves and returns, the content is served instantly from the device's storage, not re-fetched from the network.",{"id":2740,"title":2741,"titles":2742,"content":2743,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_4-measurement-and-analytics-discrepancies","4. Measurement and Analytics Discrepancies",[2659,2664,2721],"For years, soft navigations have broken how browsers and analytics tools measure performance, creating a significant liability for Single Page Applications (SPAs). The CrUX Ranking Penalty: Historically, Google's Chrome User Experience Report (CrUX) effectively ignored soft navigations, recording only the initial \"Hard Load\"—typically the slowest part of a session. As a result, SPAs have appeared significantly slower in Google's ranking data than they feel to users, causing an invisible \"Reporting Penalty\" that has negatively impacted SEO for years.Third-Party Chaos: Beyond Google, the broader marketing ecosystem remains broken. Pixels, Chatbots, and GTM scripts often expect a clean page load. In an SPA, they frequently misfire (missing data) or duplicate events, leading to unreliable attribution and broken ad spend tracking.",{"id":2745,"title":2746,"titles":2747,"content":2748,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_5-memory-management-and-long-running-sessions","5. Memory Management and Long-Running Sessions",[2659,2664,2721],"In a Soft Navigation architecture, the browser window never truly refreshes. It keeps the same JavaScript environment alive for the entire session. The Risk: Every tracking script, carousel listener, and AB testing tool adds memory overhead. Over a long shopping session, these \"Memory Leaks\" accumulate, causing the site to become sluggish, unresponsive, or even crash on low-end mobile devices.The Native Remedy: Hard Navigations inherently trigger a browser-level garbage collection on every page view. Because Speed Kit performs an instant hard navigation for every click, the memory is wiped clean automatically. This ensures the 10th page click feels just as snappy as the first, without the complexity of manual memory management.",{"id":2750,"title":2751,"titles":2752,"content":2753,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#implementation-requirements-and-code-architecture","Implementation Requirements and Code Architecture",[2659,2664],"The primary obstacle to adopting Native PPR is not the configuration of the framework, but the architectural standards required to make it effective.",{"id":2755,"title":2756,"titles":2757,"content":2758,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#component-granularity-requirements","Component Granularity Requirements",[2659,2664,2751],"To get the best out of Native PPR, your application requires a highly granular, \"Atomic\" component structure. The framework relies on strict isolation between static content (which can be cached) and dynamic interactivity (which must stream).",{"id":2760,"title":2761,"titles":2762,"content":2763,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#the-challenge-of-cohesive-components","The Challenge of Cohesive Components",[2659,2664,2751,2756],"Mature React applications often rely on cohesive \"God Components\" where layout, business logic, and data fetching are tightly coupled for convenience. Example: Consider a standard Price Card that displays a static product image and title alongside dynamic price and real-time stock availability.The Constraint: In a cohesive component, if even one variable (like stock status) is dynamic, Next.js effectively treats the entire component as dynamic. This forces the framework to opt out of pre-rendering for the image and title as well, resulting in a \"Skeleton Screen\" experience where the user sees nothing but gray boxes until the data arrives.",{"id":2765,"title":2766,"titles":2767,"content":2768,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#refactoring-necessity","Refactoring Necessity",[2659,2664,2751,2756],"To unlock the performance benefits of PPR, you must refactor these cohesive units. Developers need to surgically extract every piece of dynamic logic into its own isolated component (e.g., \u003CStockIndicator \u002F>) and wrap it in \u003CSuspense>. Only then can the surrounding layout be statically pre-rendered.",{"id":2770,"title":2771,"titles":2772,"content":2773,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#ongoing-maintenance-considerations","Ongoing Maintenance Considerations",[2659,2664,2751],"Even after a successful refactor, Native PPR remains operationally expensive.",{"id":2775,"title":2776,"titles":2777,"content":2778,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#static-opt-out-risks","Static Opt-Out Risks",[2659,2664,2751,2771],"A minor change—such as a developer adding a dynamic dependency like cookies() to a previously static component—can silently cause that component to opt out of static rendering. This leads to performance regressions that are difficult to detect and resolve.",{"id":2780,"title":2781,"titles":2782,"content":2783,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#cache-invalidation","Cache Invalidation",[2659,2664,2751,2771],"If you succeed in isolating the static parts (e.g., the Product Image), you assume a new responsibility: Purging. The Scenario: When a merchandiser updates a product image in your PIM, that static fragment remains stale in the Next.js Edge cache.The Burden: You must engineer a complex infrastructure of Webhooks and Revalidation Tags (revalidateTag) to instantly purge specific cache keys whenever underlying data changes. Failure to maintain this pipeline results in customers seeing outdated content while the backend shows the new data.",{"id":2785,"title":2786,"titles":2787,"content":2788,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#html-streaming-race-conditions","HTML Streaming Race Conditions",[2659,2664,2751,2771],"Because PPR depends on streaming responses, race conditions can occur where the body content is sent before the metadata (Head). This \"HTML Drift\" results in invalid page structures where \u003Ctitle> or \u003Cmeta> tags appear inside the \u003Cbody>. Browsers may still render the page, but SEO bots and performance metrics often break silently, creating hidden liabilities.",{"id":2790,"title":2791,"titles":2792,"content":2793,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#speed-kit-approach-snapshot-architecture","Speed Kit Approach: Snapshot Architecture",[2659,2664,2751],"Speed Kit circumvents these issues by decoupling performance from your code architecture: No Refactoring Required: Speed Kit works with your existing component structure.Snapshot Caching: We cache an anonymized HTML version of your site—essentially the same view a Search Bot receives. Unlike the skeleton state of a partial PPR page, the user sees a page that appears visually more complete and feels ready instantly.Dynamic Merging: Speed Kit merges user-specific data (such as cart contents or pricing) in the rendered DOM.Crowd-based Change Detection: Speed Kit compares the dynamic content served to real users against the cached snapshot in the background. When a threshold of users receives updated data (like a price change or a new headline), Speed Kit automatically invalidates the old snapshot and generates a new one. This ensures your cache stays synchronized with your backend without manual intervention or complex webhook setups. This approach delivers the performance benefits of a static site instantly, without the need for refactoring anything.",{"id":2795,"title":2796,"titles":2797,"content":2798,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#comparison-implementation-maintenance","Comparison: Implementation & Maintenance",[2659,2664,2751,2791],"RequirementNative Next.js PPRSpeed KitPrerequisitesHeavy Refactoring: Must break components into atomic static\u002Fdynamic parts.None: Works with existing component structure.Dynamic HandlingManual: Developers must wrap every dynamic source in \u003CSuspense> and manage fallbacks.Automated: Speed Kit automatically identifies and handles dynamic content merging.Time to ValueWeeks\u002FMonths: Dependent on clearing technical debt.Hours: Requires only Service Worker installation.MaintenanceHigh: Strict adherence to separation rules required for every new feature.Low: Decoupled from feature development.",{"id":2800,"title":2801,"titles":2802,"content":2803,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#infrastructure-costs-and-efficiency","Infrastructure Costs and Efficiency",[2659,2664],"Performance strategies must also consider infrastructure costs and efficiency.",{"id":2805,"title":2806,"titles":2807,"content":2808,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_1-compute-usage-vs-static-delivery","1. Compute Usage vs. Static Delivery",[2659,2664,2801],"The defining feature of Native PPR is that it merges static shells with dynamic holes. This architecture fundamentally changes your hosting economics. The Cost: You can no longer serve your pages from a standard, low-cost CDN (Content Delivery Network). Every single Hard Navigation requires an active Edge Compute instance to execute the logic that stitches the static and dynamic parts together.The Impact: You pay for CPU cycles and execution time for every page view. Compared to serving static assets, this \"Compute Tax\" significantly inflates your monthly cloud bill, especially during high-traffic events like Black Friday where compute scales linearly with traffic.",{"id":2810,"title":2811,"titles":2812,"content":2813,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_2-preloading-strategies-and-resource-usage","2. Preloading Strategies and Resource Usage",[2659,2664,2801],"Native implementations typically force a hard choice between two flawed preloading strategies:",{"id":2815,"title":2816,"titles":2817,"content":2818,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#viewport-pre-fetching","Viewport Pre-Fetching",[2659,2664,2801,2811],"Data is fetched for every link that appears on the screen. The Flaw: Over 90% of these requests go unused. This creates unpredictable spikes in edge compute and bandwidth bills.",{"id":2820,"title":2821,"titles":2822,"content":2823,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#hover-pre-fetching","Hover Pre-Fetching",[2659,2664,2801,2811],"Alternative configurations wait until the user hovers over a link to begin fetching. The Flaw: While this saves bandwidth, the \"headstart\"—the milliseconds between hover and click—is often insufficient to render a heavy e-commerce page.",{"id":2825,"title":2826,"titles":2827,"content":2828,"level":288},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#the-dilemma","The Dilemma",[2659,2664,2801,2811],"You are stuck choosing between massive infrastructure waste or an ineffective performance optimization.",{"id":2830,"title":2831,"titles":2832,"content":2833,"level":282},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#_3-predictive-loading-and-cdn-offloading-speed-kit","3. Predictive Loading and CDN Offloading (Speed Kit)",[2659,2664,2801],"Speed Kit replaces this dilemma with a precision-based approach. AI-Based Prediction: Speed Kit uses Probabilistic Prediction based on Real User Monitoring (RUM) data. We identify high-probability navigations before the hover event, providing a sufficient headstart for instant loading without the waste of viewport fetching.Client-Side Native Merging: Speed Kit serves the anonymous HTML snapshot immediately from the Edge. It then fetches the fresh response from your origin server and merges the two. This merging happens on the main thread but utilizes the browser's native capabilities to efficiently merge the two natively parsed DOM trees. This avoids heavy JavaScript execution and eliminates the need for a synchronized \"Resume\" step between Edge and Region.Compression Dictionaries: Speed Kit employs advanced delta-compression. By using the current page as a dictionary for the next, HTML payloads are reduced by up to 90%.",{"id":2835,"title":2836,"titles":2837,"content":2838,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#managed-services-and-performance-monitoring","Managed Services and Performance Monitoring",[2659,2664],"While native frameworks provide tools, they do not provide accountability. Speed Kit differs by offering a fully managed service layer that sits on top of your infrastructure. Enterprise-Grade Monitoring: Speed Kit includes built-in, enterprise-grade Real User Monitoring (RUM). Unlike standard SaaS tools where you are left to interpret charts, our team of performance experts actively monitors your Core Web Vitals and business KPIs.Shared Responsibility: We take ownership of your performance. Speed Kit is more than software; it is a partnership. If anomalies arise, our engineers intervene proactively to ensure stability, freeing your DevOps team to focus on feature development rather than firefighting.Future-Proofing via Community Leadership: Through close collaboration with browser vendors and the international web performance community, we ensure your infrastructure is always aligned with the latest browser capabilities—guaranteeing you access to state-of-the-art solutions like the Speculation Rules API before they become mainstream.",{"id":2840,"title":672,"titles":2841,"content":2842,"level":236},"\u002Fdocs\u002Fspeed-kit-vs-native-ppr#summary",[2659,2664],"Native Partial Prerendering relies on the Single Page Application (SPA) architecture, a pattern that has proven increasingly problematic for e-commerce sites—whether legacy or greenfield. The operational complexity, memory leaks, and browser contention inherent to SPAs create a fragile foundation for online stores. Speed Kit allows you to bypass these architectural pitfalls entirely. By treating performance as an infrastructure layer rather than a code concern, Speed Kit delivers the instant speed of PPR immediately, using modern browser standards to guarantee performance that survives your next code deployment.",{"id":2844,"title":2845,"titles":2846,"content":2847,"level":259},"\u002Fdocs\u002Fthird-party-acceleration","Third-Party Acceleration",[],"How Speed Kit routes third-party assets through a single optimized HTTP\u002F3 connection and caches them to boost performance and resilience against provider outages.",{"id":2849,"title":2845,"titles":2850,"content":230,"level":231},"\u002Fdocs\u002Fthird-party-acceleration#third-party-acceleration",[2845],{"id":2852,"title":18,"titles":2853,"content":2854,"level":236},"\u002Fdocs\u002Fthird-party-acceleration#key-takeaways",[2845,2845],"Unified Connection: Speed Kit consolidates requests for external resources, fetching them through a single, highly optimized HTTP\u002F3 connection instead of multiple slow connections to different domains.Targeted Acceleration: The feature can accelerate any third-party asset that is inefficiently cached by its provider, such as static JavaScript libraries and fonts, mitigating performance bottlenecks from external dependencies.Increased Resilience: By caching external assets, Speed Kit prevents third-party outages from becoming a single point of failure for your site, ensuring it remains functional even if a dependency is down.",{"id":2856,"title":45,"titles":2857,"content":2858,"level":236},"\u002Fdocs\u002Fthird-party-acceleration#introduction",[2845,2845],"Modern e-commerce sites rely heavily on a wide array of third-party scripts for analytics, marketing, user engagement, and more. While essential, these external resources often create significant performance bottlenecks, as each one requires a separate connection that can slow down page loads. Speed Kit’s Third-Party Acceleration solves this problem by fundamentally changing how these assets are requested. By routing them through its own high-speed infrastructure, Speed Kit reduces network overhead, improves security, and applies its powerful caching logic to resources that are typically uncacheable.",{"id":2860,"title":2861,"titles":2862,"content":230,"level":236},"\u002Fdocs\u002Fthird-party-acceleration#accelerating-external-resources","Accelerating External Resources",[2845,2845],{"id":2864,"title":1344,"titles":2865,"content":2866,"level":282},"\u002Fdocs\u002Fthird-party-acceleration#how-it-works",[2845,2845,2861],"Speed Kit’s Service Worker intercepts outgoing requests for whitelisted third-party domains directly in the user's browser. This method is effective for any third-party resource delivered as a static file, such as JavaScript, CSS, fonts, or images. Instead of allowing the browser to establish numerous individual connections, it rewrites these requests on the fly and fetches the assets through a single, persistent HTTP\u002F3 connection to Speed Kit’s high-performance delivery network. These JavaScript files are then cached by Speed Kit. To ensure content remains current, Speed Kit automatically revalidates each cached file with the original third-party provider every 10 minutes. For full control, customers can manually trigger an update for any cached third-party resource at any time, either directly from the Speed Kit dashboard or programmatically via an API.",{"id":2868,"title":2869,"titles":2870,"content":2871,"level":282},"\u002Fdocs\u002Fthird-party-acceleration#core-benefits","Core Benefits",[2845,2845,2861],"Performance Boost: By serving assets from a powerful cache and using an optimized connection, Speed Kit dramatically reduces the load times for external scripts. This benefit applies to large, static JavaScript bundles, provided they are non-personalized and do not dynamically change based on user properties like location or browser.Increased Resilience: Synchronously loaded third-party assets, like custom fonts or critical scripts, can become a single point of failure. If the external provider has an outage, it can block your entire page from rendering. Speed Kit mitigates this risk by serving a cached version of the asset from its resilient infrastructure, ensuring your site remains functional even if a third-party service is down.Minimized Network Latency: Establishing a new connection for each third-party domain creates significant latency from repetitive DNS lookups and security handshakes. Speed Kit eliminates this overhead by consolidating requests onto a single, persistent connection, which drastically reduces the time spent on network round trips.",{"id":2873,"title":2874,"titles":2875,"content":2876,"level":282},"\u002Fdocs\u002Fthird-party-acceleration#requirements-for-acceleration","Requirements for Acceleration",[2845,2845,2861],"Third-party acceleration is enabled only when a clear performance bottleneck is identified or when explicitly requested by the customer. The primary requirement for accelerating an external resource is that the asset must be safe to cache. This means the asset must be static and non-personalized—the exact same file must be served to every user of the page. This ensures that a single cached version can be delivered to all users without any risk of breaking functionality or exposing user-specific data. Common candidates are static JavaScript libraries, fonts, images, and CSS files.",{"id":2878,"title":2879,"titles":2880,"content":2881,"level":259},"\u002Fdocs\u002Fwebsite-changes","Website Changes",[],"Website modifications such as A\u002FB tests, architecture shifts, and URL changes that require reviewing and adjusting your Speed Kit configuration.",{"id":2883,"title":2884,"titles":2885,"content":230,"level":231},"\u002Fdocs\u002Fwebsite-changes#website-changes-requiring-speed-kit-configuration-updates-for-optimal-performance","Website Changes Requiring Speed Kit Configuration Updates for Optimal Performance",[2879],{"id":2887,"title":18,"titles":2888,"content":2889,"level":236},"\u002Fdocs\u002Fwebsite-changes#key-takeaways",[2879,2884],"Proactive Communication: Inform your Customer Success Manager and development team about planned website changes to ensure Speed Kit's continued optimal performance.Critical Areas: Be aware of specific website modifications, such as A\u002FB tests, architectural shifts, and URL changes, that require configuration adjustments.Continuous Optimization: Adapting Speed Kit's settings in response to these changes is crucial for maintaining acceleration and a smooth user experience.",{"id":2891,"title":45,"titles":2892,"content":2893,"level":236},"\u002Fdocs\u002Fwebsite-changes#introduction",[2879,2884],"To ensure your website continues to perform optimally with Speed Kit, it's crucial to adapt its configuration when planning certain website changes. This document outlines key modifications that necessitate a review of your Speed Kit settings. Please share this information with your development team and notify your customer success manager about any planned modifications.",{"id":2895,"title":2896,"titles":2897,"content":230,"level":236},"\u002Fdocs\u002Fwebsite-changes#key-website-changes-to-notify-us-about","Key Website Changes to Notify Us About",[2879,2884],{"id":2899,"title":2900,"titles":2901,"content":2902,"level":282},"\u002Fdocs\u002Fwebsite-changes#serverclient-side-ab-tests-above-the-fold","Server\u002FClient-Side A\u002FB Tests (Above the Fold)",[2879,2884,2896],"If you begin conducting A\u002FB tests in the above-the-fold area, please inform us. These tests can impact how content is cached and potentially cause flickering. We'll adjust your Speed Kit settings to ensure a smooth and consistent user experience.",{"id":2904,"title":2905,"titles":2906,"content":2907,"level":282},"\u002Fdocs\u002Fwebsite-changes#mobiledesktop-differentiation","Mobile\u002FDesktop Differentiation",[2879,2884,2896],"If you decide to move from a responsive design to using separate HTML versions for mobile and desktop, or vice versa, please let us know. This allows us to tailor the caching strategy and content delivery specifically for each device type.",{"id":2909,"title":2910,"titles":2911,"content":2912,"level":282},"\u002Fdocs\u002Fwebsite-changes#frontend-architecture-changes","Frontend Architecture Changes",[2879,2884,2896],"Navigation Type Changes: For example, switching from a multi-page application (hard navigation) to a single-page application (soft navigation).Client-Side Rendering: If you transition from server-side to client-side rendering.Critical Inline Scripts: Changes involving inline scripts that are critical for the initial rendering, such as those used for loading fonts, CSS files, or other assets required for the First Meaningful Paint.CSS System Changes: If you're updating your CSS system or renaming CSS classes that are used for identifying dynamic or personalized content.Framework Updates: If you're updating to a new major version of your JavaScript framework or switching to a different one.",{"id":2914,"title":2915,"titles":2916,"content":2917,"level":282},"\u002Fdocs\u002Fwebsite-changes#server-side-logic-changes","Server-Side Logic Changes",[2879,2884,2896],"Dynamic List Ordering: For example, changing the order of product lists to show different items based on user preferences or behavior.Location-Based Content: Displaying different content based on the user's geographical location.",{"id":2919,"title":2920,"titles":2921,"content":2922,"level":282},"\u002Fdocs\u002Fwebsite-changes#url-structure-changes","URL Structure Changes",[2879,2884,2896],"If you plan to change the structure of your URLs. For example, if you currently use \u002Fcategory\u002F in the URL of your product listing pages and plan to switch to \u002Fc\u002F.",{"id":2924,"title":2925,"titles":2926,"content":2927,"level":282},"\u002Fdocs\u002Fwebsite-changes#design-tweaks-of-critical-elements","Design Tweaks of Critical Elements",[2879,2884,2896],"Any layout changes to critical elements above the fold, such as your hero image, pricing information, or the add-to-cart button.",{"id":2929,"title":2930,"titles":2931,"content":2932,"level":282},"\u002Fdocs\u002Fwebsite-changes#adding-new-service-workers","Adding New Service Workers",[2879,2884,2896],"If you plan to introduce a new service worker on your site, please consult with us to ensure it will integrate seamlessly and work effectively with Speed Kit.",{"id":2934,"title":2935,"titles":2936,"content":2937,"level":282},"\u002Fdocs\u002Fwebsite-changes#waiting-roommaintenance-periods","Waiting Room\u002FMaintenance Periods",[2879,2884,2896],"The introduction of periods where customers see a maintenance page or are redirected to a waiting room instead of the actual HTML content.",{"id":2939,"title":2940,"titles":2941,"content":2942,"level":282},"\u002Fdocs\u002Fwebsite-changes#changing-content-security-policies","Changing Content Security Policies",[2879,2884,2896],"This potentially can stop the Speed Kit JavaScript or service worker from working.",{"id":2944,"title":2945,"titles":2946,"content":2947,"level":259},"\u002Fdocs\u002Fwebviews","Webviews",[],"Why Speed Kit does not accelerate mobile app webviews by default, and the steps a customer's development team must take to enable acceleration.",{"id":2949,"title":2950,"titles":2951,"content":230,"level":231},"\u002Fdocs\u002Fwebviews#accelerating-webviews-with-speed-kit","Accelerating Webviews With Speed Kit",[2945],{"id":2953,"title":18,"titles":2954,"content":2955,"level":236},"\u002Fdocs\u002Fwebviews#key-takeaways",[2945,2950],"Disabled by Default: To ensure maximum stability and prevent conflicts, Speed Kit does not accelerate content within mobile app webviews by default.Core Technical Prerequisite: Speed Kit's engine depends on a service worker, which is often absent by default in standard webview environments (e.g., iOS WKWebView) and must be explicitly enabled by the app developer.Customer Responsibility: Activating webview acceleration is the sole responsibility of the customer's development team, who must implement the necessary technical requirements and validate the integration within their native app.",{"id":2957,"title":45,"titles":2958,"content":2959,"level":236},"\u002Fdocs\u002Fwebviews#introduction",[2945,2950],"A webview is a component used by native mobile applications to render web content—like HTML pages, articles, or product listings—directly within the app's interface. This allows businesses to seamlessly integrate their website into their iOS (WKWebView) or Android (WebView) applications without sending users to an external browser. While this creates a fluid user experience, the web content loaded in a webview can still suffer from performance bottlenecks. This document outlines how Speed Kit addresses webview performance and the necessary steps to enable acceleration.",{"id":2961,"title":2962,"titles":2963,"content":2964,"level":236},"\u002Fdocs\u002Fwebviews#default-behavior-prioritizing-application-stability","Default Behavior: Prioritizing Application Stability",[2945,2950],"By default, Speed Kit is configured to not accelerate content loaded inside mobile app webviews. This is a deliberate precautionary measure to guarantee the stability of your application.",{"id":2966,"title":2967,"titles":2968,"content":2969,"level":282},"\u002Fdocs\u002Fwebviews#the-technical-challenge-a-two-part-problem","The Technical Challenge: A Two-Part Problem",[2945,2950,2962],"Activating Speed Kit in a webview requires solving two distinct challenges: ensuring the service worker is active and confirming it can operate without interference. Absent Service Worker Environment: The first step is enabling the service worker itself. In many standard environments, such as Apple's WKWebView for iOS, the service worker is not active by default and must be explicitly enabled by your app developer.Interference from Native App Logic: Even with service workers enabled, the native application can unintentionally interfere with Speed Kit’s operations. For example, your app might already have its own code to handle network requests from the webview, perhaps to add custom authentication headers or to log traffic. This existing logic can prevent Speed Kit’s service worker from properly intercepting requests, leading to failed accelerations or unexpected caching behavior. Because of these potential interactions between the native code and the webview, we disable Speed Kit by default. Activation requires testing within your actual application to ensure that Speed Kit can operate correctly alongside your existing app logic.",{"id":2971,"title":2972,"titles":2973,"content":2974,"level":236},"\u002Fdocs\u002Fwebviews#how-to-enable-webview-acceleration-a-customer-implementation-guide","How to Enable Webview Acceleration: A Customer Implementation Guide",[2945,2950],"Activating Speed Kit within a mobile application's webview is the sole responsibility of the customer's development team. Our team is not able to debug native application code (e.g., in Swift, Kotlin, or Java). While we are happy to provide support regarding Speed Kit's own configuration and behavior, your developers must perform the implementation and ensure a stable integration. Ultimately, the customer's development team is responsible for making the integration work within their unique application environment.",{"id":2976,"title":2977,"titles":2978,"content":2979,"level":282},"\u002Fdocs\u002Fwebviews#technical-requirements","Technical Requirements",[2945,2950,2972],"The primary technical requirement is an active service worker. Support for this technology varies depending on the type of webview and its configuration, so it is often inactive. Your application developers must verify the status of service workers in your webview and, if necessary, modify the native app code to enable them.",{"id":2981,"title":2982,"titles":2983,"content":2984,"level":288},"\u002Fdocs\u002Fwebviews#for-ios-wkwebview","For iOS (WKWebView)",[2945,2950,2972,2977],"To enable service workers, the webview must be initialized with a custom configuration that uses a non-persistent data store. Use the WKWebView, not SafariViewController. The key steps are Create a WKWebViewConfiguration object.Update the initialized WKWebViewConfiguration with this flag: webViewConfiguration.limitsNavigationsToAppBoundDomains = YES;Open the info.plist file and add the \"WKAppBoundDomains\" key along with your domains:\u003Cplist version=\"1.0\">\n\u003Cdict>\n    \u003Ckey>WKAppBoundDomains\u003C\u002Fkey>\n    \u003Carray>\n        \u003Cstring>{YOUR_DOMAIN}\u003C\u002Fstring>\n    \u003C\u002Farray>\n\u003C\u002Fdict>\nInitialize the WKWebView with this custom configuration. More info: Web Kit - App-Bound Domains",{"id":2986,"title":2987,"titles":2988,"content":2989,"level":288},"\u002Fdocs\u002Fwebviews#for-all-webviews","For All Webviews",[2945,2950,2972,2977],"HTTPS Required: The Service Worker API requires that all content is loaded securely over HTTPS.No Native Interference: The customer's team must ensure that no other native app logic (e.g., custom network interceptors for logging or header injection) is interfering with the service worker's ability to handle requests.",{"id":2991,"title":2992,"titles":2993,"content":2994,"level":282},"\u002Fdocs\u002Fwebviews#validation-and-activation-process","Validation and Activation Process",[2945,2950,2972],"Customer Implements & Tests: Your team is responsible for implementing the technical requirements above and thoroughly testing the integration in a staging or development version of your app.Request Activation: Once you have validated that Speed Kit works correctly and does not conflict with your app's functionality, contact our support team to request activation for your production environment. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",1787842771496]