BigCommerce Storefronts now support Preload/Early Hints features with Chrome’s addition of supporting HTTP Early Hints.
When you open a web page, the browser requests the HTML document from a server, parses its contents, and submits separate requests for any referenced resources. Developers already know about all the resources a web page needs and which of them are the most important. With that knowledge the developer can request the critical resources ahead of time and speed up the loading process by adding a tag with rel=”preload” to the head of your HTML document: The browser caches preloaded resources so they are available immediately when needed in subsequent requests.
This allows a browser to start downloading critical assets (like CSS/JS files, images, fonts, etc.) very early in the request lifecycle. Which can result in a material improvement in load times for shoppers on stencil storefronts, as they do not have to wait to receive the HTML of the page in order to download large assets. This can significantly improve first paint by pre-populating the browser cache with these assets, and can reduce the impact of a slow response time.
**
How preloading works:
**
Preloading is best suited for resources typically discovered late by the browser. By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. For example, font is defined in the stylesheet with a @font-face rule. The browser loads the font file only after it has finished downloading and parsing the stylesheet. Preloading these resources ensures they are fetched before the CSS files have downloaded.
The critical request chain represents the order of resources that are prioritized and fetched by the browser. Lighthouse identifies assets that are on the third level of this chain as late-discovered. A word of caution: unused preloads trigger a Console warning in Chrome, approximately 3 seconds after the load event, that’s why it’s important to use preload sparingly and only preload the most critical resources. Preloading is a powerful performance optimization that has an effect on loading speed. Such optimizations can lead to changes in your site’s Core Web Vitals, and it’s important to be aware of them.
**
What this means for you:
**
- Provide theme developers with tools to mark critical theme assets for preloading and the ability to nominate high-priority resources.
- Automatically preload critical assets, such as Script Manager scripts, payment provider JS, analytics JS.
- FCP reduction for first page load.
- Faster storefronts with better conversions as a business benefit creating happier merchants with better growth adjustments. If you want to read more you can check out our documentation here: Early Hints & handlebars helpers reference early hints and cdn
Top comments (0)