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 negatively impacting the overall Web Vitals rating.
Because the actual product list content is not known when the page starts rendering, one way of mitigating against the excessive shift is by providing a minimum height to the element. While this can be defined in your theme’s CSS (either at a code level or through Content > Design > Configuration > [Store View] > Other Settings > HTML Head > Scripts and Stylesheets), v2.8.0 and above of the Klevu module provides an easy way to enter a minimum height value in pixels for either SRLP or Category pages.
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.
Choosing a Value
It is important to note that there is no “one size fits all” answer to what value you should use. Different factors will influence your decision, but you should aim for a value which provides the best result in the majority of scenarios on your site.
To start, we would recommend using your browser’s developer tools to identify the reported height of the .klevuLanding element for the page type you wish to change at a desktop resolution.
Too High vs Too Low
A value which is higher than the content size will cause white space to appear below the product/filters output. A small amount of additional padding may not have much of an impact but you should attempt to keep this to a minimum for the majority of visitors.
A value which is smaller than the content size will lead to some additional layout shift, as the content resizes between the minimum height entered and the computed height of the content. As this shift will usually occur off-screen, the CLS impact is minimized.
Factors to Consider
Average number of results per page
The number of results returned has a direct impact on the amount of content displayed. This includes both the total results found for the query, as well as the configured number of items to display per page.
If you see many searches returning a small number of results, a high minimum height will lead to a lot of visitors seeing whitespace.
Number and Height of Items per Row
By default, Klevu will show four items per row on the desktop and reduce that number responsively for smaller devices. Note that if you are using List Mode as your default layout, there will only be one item per row.
We recommend considering a resolution with the highest number of columns at a standard element height when calculating your value to prevent excessive whitespace for desktop users.
If you want to use different values depending on resolution, please see the section below on implementing through custom CSS
Size and Position of Additional Elements
In addition to product cards, the rendered content may include other elements, including
- Filters (either at the side or above results); the number and size of which may vary from page to page
- Pagination and Ordering controls
- Banners
Implementing Yourself
If you need more complex calculations, support for different screen resolutions, or context-dependent values (for example, different values on different categories), we recommend leaving this value empty and implementing your own solution through custom CSS on your website.
The element you should target on both SRLP and Category pages is .klevuLanding. You can use a body class selector to differentiate in shared stylesheets if necessary. For example
/* Category */
.catalog-category-view .kleuLanding {
min-height: 480px;
}
/* SRLP */
.search-index-index .klevuLanding {
min-height: 920px;
}
/* Smaller devices */
@media screen and (max-width: 480px) {
.catalog-category-view .kleuLanding {
min-height: 640px;
}
.search-index-index .klevuLanding {
min-height: 1600px;
}
}