Load Speeds, Script Sizes, & Site Performance
Bolt Script Sizes
The Loading Sequence, Explained
This explanation is a simplified breakdown of how sites typically load Bolt. However, some commerce platforms or integration structures may change this exact sequence.
- 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
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 time frame and checking when the item was queued. In the below example, Bolt’s
connect.js script is not 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.