Lighthouse/PageSpeed

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 https //web dev/cls/ 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 \<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 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