How To
Lighthouse/PageSpeed

10min
﻿
﻿
Cumulative Layout Shift (CLS)
When using Klevu JS Theme layout for Search Results Landing Page or Category output, your search results are loaded into a predefined empty HTML element after the page has started rendering. This causes elements below the product list content to be pushed down the page, increasing the Cumulative Layout Shift score for your page, and can negatively impact the overall Web Vitals rating.
For more about understanding Klevus impact on Lighthouse reports please see this guide for other bet practices and considerations.
﻿
The suggested modification options to balance CLS with Klevu Template JS are as follows:
Specify min height for the Search and Category Landing pages placeholder HTML block.
Hide the footer and/or contents below the Search result display until the results are loaded. Any content that shifts can be considered under this option.
﻿
﻿
Option 1 : Load Footer after Klevu Search Results
First, Apply CSS Styling to Hide Elements
Add the following CSS to your site’s stylesheet, including selectors for all elements which need to be hidden on page load. If you cannot add to the stylesheet, you can alternatively add these styles to the template we will be creating in the next step.
 If you are hiding multiple elements on the same or different pages, you can include them all in the same list.
{selector}:not(.klevuFinishLoading),
{selector}:not(.klevuFinishLoading) {
    display: none !important;
}
For example, in most Shopify themes, the footer is identified by .shopify-section-group-footer-group or #shopify-section-footer (depending on the base theme and version used to develop your theme). So the CSS would look something like the following example:
.shopify-section-group-footer-group:not(.klevuFinishLoading) {
    display: none !important;
}
This example will hide the footer as part of the default styles (therefore applying on page load) providing the element does not also have the class .klevuFinishLoading
We need to display this by default as hiding the element using JavaScript will run too late, potentially causing a flash of content where the footer is visible before being hidden. This may also count against CLS and is a poor user experience.
﻿
Next, Add JavaScript to Bring Back Elements
The following example will show the targeted blocks by adding a selector of klevuFinishLoading that will negate the display:hide as set in the first step above.
Note:  the {selector},{selector} placeholder values on (Line 12) and replace these with your target footer class selectors
JS
<script>
    // 3000 is the number of milliseconds to wait for a response from Klevu before bringing back the footer automatically
    const klevuBringBackFooter = setTimeout(klevuBringBackFooterTimeout, 3000);
    function klevuBringBackFooterTimeout() {
        klevuBringBackFooterFunction();
        clearTimeout(klevuBringBackFooter);
    }
    
    function klevuBringBackFooterFunction() {
        // Add selectors of all elements to be reinstated below. These should match the hidden
        //  elements as targetted by CSS _without_ the :not() pseudo-selector
        let hideFooterElements = document.querySelectorAll("{selector},{selector}");
        let hideFooterElementIndex = 0;
        while (hideFooterElementIndex < hideFooterElements.length) {
            hideFooterElements[hideFooterElementIndex].classList.add("klevuFinishLoading");
            hideFooterElementIndex++;
        }
    }
    
    // Ensure elements are reinstated after a response from Klevu
    window._klvWebhook = window._klvWebhook || [];
    window._klvWebhook.push({
        object: "search",
        scope: "full_page",
        name: "chains.response.success",
        action: "after",
        fire: function(data, scope) {
            clearTimeout(klevuBringBackFooter);
            klevuBringBackFooterFunction();
        }
    });
    window._klvWebhook.push({
        object: "search",
        scope: "full_page",
        name: "chains.response.fail",
        action: "after",
        fire: function(data,scope) {
           clearTimeout(klevuBringBackFooter);
            klevuBringBackFooterFunction();
        }
    });
</script>
<script>
    // 3000 is the number of milliseconds to wait for a response from Klevu before bringing back the footer automatically
    const klevuBringBackFooter = setTimeout(klevuBringBackFooterTimeout, 3000);
    function klevuBringBackFooterTimeout() {
        klevuBringBackFooterFunction();
        clearTimeout(klevuBringBackFooter);
    }
    
    function klevuBringBackFooterFunction() {
        // Add selectors of all elements to be reinstated below. These should match the hidden
        //  elements as targetted by CSS _without_ the :not() pseudo-selector
        let hideFooterElements = document.querySelectorAll("{selector},{selector}");
        let hideFooterElementIndex = 0;
        while (hideFooterElementIndex < hideFooterElements.length) {
            hideFooterElements[hideFooterElementIndex].classList.add("klevuFinishLoading");
            hideFooterElementIndex++;
        }
    }
    
    // Ensure elements are reinstated after a response from Klevu
    window._klvWebhook = window._klvWebhook || [];
    window._klvWebhook.push({
        object: "search",
        scope: "full_page",
        name: "chains.response.success",
        action: "after",
        fire: function(data, scope) {
            clearTimeout(klevuBringBackFooter);
            klevuBringBackFooterFunction();
        }
    });
    window._klvWebhook.push({
        object: "search",
        scope: "full_page",
        name: "chains.response.fail",
        action: "after",
        fire: function(data,scope) {
           clearTimeout(klevuBringBackFooter);
            klevuBringBackFooterFunction();
        }
    });
</script>
﻿
If you are using Smart Category Merchandising, you will also need to render this JavaScript on your collection pages.
The site footer should now be hidden on page load and reinstated after Klevu returns and renders a product list.
Option 2 : Apply a Minimum Height to the Klevu Results Element
If you do not want to hide your site footer, you can mitigate some of the impact of CLS by setting a minimum height on the HTML element into which Klevu results are injected. 
This is not the primary recommended approach, as accurately and consistently determining the size of this element is difficult due to variations in screen resolution and the number of results returned by a query.
First, determine an appropriate minimum height by performing a query on your website and inspecting the height of the .klevuLanding div after results have loaded. You should do this after performing a search that returns at least a full page of results in order to see the maximum height this element is likely to be.
Determine height value of .klevuLanding div block
﻿
Next, add a minimum height to the element in your CSS stylesheet. The code should look something like
.klevuLanding {
    min-height: 920px;
}
 You may also consider adjusting for alternate screen sizes
/* Smaller devices */
@media screen and (max-width: 480px) {
    .klevuLanding {
        min-height: 1300px;
    }
    
}
﻿
Using Klevu Magento Extension
v2.8.0 and above of the Klevu Magento module provides an easy way to enter a minimum height value in pixels for Search and/or Category pages using Template JS. 
These settings can be found under Stores > Settings > Configuration > Klevu > Search Configuration > Developer Settings > Minimum Height for Search Results Landing Page Content and Minimum Height for Category Page Content; both are available to configure globally through to the store level.
This field only accepts numeric values corresponding to pixels. ie “920” rather than “920px” or “100%”.

Using Klevu Shopify App
Klevu’s Shopify App provides configurable settings that can help you reduce layout shifts during the Template JS Category and/or Search page load, improving your CLS score.
Navigate to Shopify Admin → Online Store → Theme → Customize → Search Page → Klevu Search Results Block
For more detail on this setting please see the KnowledgeBase guide : How to Improve Your Cumulative Layout Shift (CLS) Score Using Klevu’s Shopify App﻿
Updated 16 Sep 2024
Did this page help you?
Shopify : Use Native Product Card