The Loading Sequence, Explained
- The webpage loads and renders first.
- The Bolt scripts load after the webpage. This prevents script loading from delaying the page rendering.
- When prompted by the customer Bolt Checkout opens. Because the script has been pre-loaded, prior to checkout, the customer will not experience a delay due to script loading.
Perceived Load Times vs Actual Shopper's Experience
You can review Bolt's load times on your store, using a Chrome browser, by doing the following:
- Navigate to your storefront.
- Right-click the page and select Inspect.
- Navigate to the Network tab.
- Refresh the page to observe the asset loading for your page.
- Filter the network log with the word "bolt."
- Review the Waterfall column.
- Blue Line: Browser has finished parsing the page
- Red Line: Browser has finished retrieving all resources required by the page
Note that Bolt's assets typically do not come before more critical assets needed to parse the page, as they are closer to (or after) the blue line.
You can verify this more specifically by inspecting an asset's waterfall timeframe and checking when the item was queued. In the below example, Bolt's connect.js script wasn't queued until after the first 1.75 seconds had passed -- deferring priority to assets that directly impact shoppers.
- Bolt uses industry-standard caching procedures. This means that components will be cached on the browser for subsequent page visits. This prevents the re-loading of scripts and components and thus avoids adding delays.
- The Initial script that triggers preloading, connect.js is small, about 200KB. The average for modern JS scripts is between 300KB - 400KB.