Improving Core Web Vitals and user experience on Search Spring pages

Search Spring takes some time to gather and display its product lists. This means the main content of the page is delayed and will cause a poor LCP. To minimise that, we preload resources at the top of the head section to help Search Spring load faster. The Search Spring resources your pages use will probably be different. This is what we found worked well for one client:

    <link rel="preload" href="//cdn.searchspring.net/ajax_search/sites/YOUR_SEARCH_SPRING_ID/css/YOUR_SEARCH_SPRING_ID.css" as="style" />
    <link rel="preload" fetchpriority="high" href="//cdn.searchspring.net/ajax_search/sites/YOUR_SEARCH_SPRING_ID/js/angular.js" as="script" />
    <link rel="preload" fetchpriority="high" href="//cdn.searchspring.net/search/v3/lts/modules/autocomplete2.js" as="script" />
    <link rel="preload" fetchpriority="high" href="//cdn.searchspring.net/search/v3/lts/modules/facet-slider.js" as="script" />
    <link rel="preload" fetchpriority="high" href="//cdn.searchspring.net/search/v3/lts/modules/slideout.js" as="script" />
    <link rel="preload" fetchpriority="high" href="//cdn.searchspring.net/search/v3/lts/modules/spatial-navigation.js" as="script" />

Make sure you always change YOUR_SEARCH_SPRING_ID to your ID.

For BigCommerce stores using Stencil, you would probably add all this code in the themes base.html file or where you have already added the Search Spring script. You can use Handlebar if statements to limit which pages the resources get loaded on. e.g.

{{#if page_type '===' 'category'}}
...
{{/if}}

For the Search Spring scripts, we add the async to stop the script from blocking, and a fetchpriority of high to have it load earlier and faster. e.g.

<script src="//cdn.searchspring.net/search/v3/lts/searchspring.catalog.js?YOUR_SEARCH_SPRING_ID" async fetchpriority="high" …

In your case you may be using a bundle.js script:

<script type="text/javascript" src="https://snapui.searchspring.io/YOUR_SEARCH_SPRING_ID/bundle.js" async fetchpriority="high" …

On pages where you show a product list, you want to control how much of the page is hidden before Search Spring adds its products. By default, Search Spring hides the whole page until it has added its content, which is a bad user experience. It would be better to show some content to the users, like the header, banner, menu, heading and introduction, while they wait for the main content. You should still hide the elements where the content is going to be, and anything underneath it. If lower content like the footer is initially visible, the introduction of the main content will push it off screen, causing a large layout shift and a poor CLS score.

Note: This only needs to be done on pages where Search Spring lists products at the top of the page.

To do this, we first disable the mechanism Search Spring uses to hide the whole page by specifying a CSS selector that does not match any content:

<script src="//cdn.searchspring.net/search/v3/lts/searchspring.catalog.js?YOUR_SEARCH_SPRING_ID" async fetchpriority="high" hide-content=".nothing" …

Then we add our code to control what is initially hidden and then later shown:

    <style id="searchspring-hide">
        .searchspring-hide {visibility: hidden}
    </style>
    <script>
        // Show the content when Search Spring has added it
        window.addEventListener('searchspring.domReady', function () { 
            var style = document.getElementById('searchspring-hide');
            if (style) {
                style.parentNode.removeChild(style);
            };
        }, false);
    
        // If things fail, show the content after 3 seconds.
        setTimeout(function () {
            var style = document.getElementById('searchspring-hide');
            if (style) {
                style.parentNode.removeChild(style);
            };
        }, 3000);
    </script>

All the above code can be added in the same location on pages that list products. e.g. category, brand and search pages.

The final step is to add the CSS class ‘searchspring-hide’ to the elements we want to be hidden until Search Spring is ready, like the element Search Spring adds its content to and any elements below it. E.g.

<footer class="footer searchspring-hide" …

For BigCommerce, you want to look in theme files like components/common/footer.html.

Here’s our clients CLS improvement after these changes:

LCP is a harder one to fix. The LCP element is usually the first product image in the list. It only shows up once Search Spring has built its content, and that only starts once the DOM Content Loaded event (The initial HTML has been parsed into a Document Object Model). This is delayed by things like blocking scripts and tasks hogging the CPU. And it’s not helped by Search Spring lazy-loading all the product images (the top few should not be lazy-loaded). Search Spring could significantly improve this by starting its process of requesting and building the content before the DOM is constructed so that it can put its content on the page as soon as it is ready. In the meantime, we will be working on making that event fire earlier.