Cumulative Layout Shift Facade/Placeholder

4min
Suggestions on how to best handle CLS can be found in our knowledge base.
SRLP and Category Navigation
When Klevu Theme JS is used for Search Results Landing Page and/or Category Navigation the content is loaded from Klevu after the page has loaded. This can cause layout shifts and affect your page speed insights scores. 
To mitigate this layout shift we have added CSS to create an area where this content will be loaded. This works out of the box with the default theme, however, it will likely require changes if you customise the theme.
CSS
.klevuLanding {min-height: 921px;}
@media (max-width: 1100px) {
  .klevuLanding {min-height: 1145px;}
}
@media (max-width: 900px) {
  .klevuLanding {min-height: 1695px;}
}
@media (max-width: 767px) {
  .klevuLanding {min-height: 2249px;}
}
@media (max-width: 480px) {
  .klevuLanding {min-height: 4228px;}
}
.klevuLanding {min-height: 921px;}
@media (max-width: 1100px) {
  .klevuLanding {min-height: 1145px;}
}
@media (max-width: 900px) {
  .klevuLanding {min-height: 1695px;}
}
@media (max-width: 767px) {
  .klevuLanding {min-height: 2249px;}
}
@media (max-width: 480px) {
  .klevuLanding {min-height: 4228px;}
}
﻿
This is injected into the phtml files for both SRLP and Category Navigation via a container.
module-m2-frontend-search/view/frontend/templates/search/results.phtml
module-m2-frontend-categorynavigation/view/frontend/templates/category.phtml
These values work with the default templates, however, you will likely wish to adjust these values especially if you have customised the layout or added extra attributes as facets.
The CSS added is easy to remove and replace with your own via layout XML. 
Vendor/Module/view/frontend/layout/klevu_category_index.xml
<referenceContainer name="klevu_frontend_category_navigation.category_container">
    <!-- Remove Klevu CLS block -->
    <block name="klevu_frontend_category_navigation.category_index_cls" remove="true"/>
    <!-- Inject your own block, if required -->
    <block name="vendor_module.klevu.category_index_cls"
           template="Vendor_Module::klevu/category-index-cls.phtml"/>
</referenceContainer>
<referenceContainer name="klevu_frontend_category_navigation.category_container">
    <!-- Remove Klevu CLS block -->
    <block name="klevu_frontend_category_navigation.category_index_cls" remove="true"/>
    <!-- Inject your own block, if required -->
    <block name="vendor_module.klevu.category_index_cls"
           template="Vendor_Module::klevu/category-index-cls.phtml"/>
</referenceContainer>
﻿
Vendor/Module/view/frontend/layout/klevu_search_results.xml
<referenceContainer name="klevu_frontend_search.search_results_container">
    <!-- Remove Klevu CLS block -->
    <block name="klevu_frontend_search.search_results_cls" remove="true"/>
    <!-- Inject your own block, if required -->
    <block name="vendor_module.klevu.search_results_cls"
           template="Vendor_Module::klevu/category-index-cls.phtml"/>
</referenceContainer>
<referenceContainer name="klevu_frontend_search.search_results_container">
    <!-- Remove Klevu CLS block -->
    <block name="klevu_frontend_search.search_results_cls" remove="true"/>
    <!-- Inject your own block, if required -->
    <block name="vendor_module.klevu.search_results_cls"
           template="Vendor_Module::klevu/category-index-cls.phtml"/>
</referenceContainer>
﻿
Examples given of how to do this in a module. These changes could alternatively be made in your theme(s).
Recommendations Banners
We also set a minimum height for the recommendations banner widgets. This is not added inside the widget as this could lead to duplication of code if there are multiple widgets on the page. We add this to the Klevu_Frontend.before.body.end container.
The CSS added is easy to remove and replace with your own via layout XML. 
Vendor/Module/view/frontend/layout/default.xml
<referenceContainer name="Klevu_Frontend.before.body.end">
    <!-- Remove Klevu CLS block -->
    <block name="klevu_frontend_recommendations.recommendations_widget_cls" remove="true"/>
    <!-- Inject your own block, if required -->
    <block name="vendor_module.klevu.recommendations_widget_cls"
           template="Vendor_Module::klevu/recommendations-widget-cls.phtml"/>
</referenceContainer>
<referenceContainer name="Klevu_Frontend.before.body.end">
    <!-- Remove Klevu CLS block -->
    <block name="klevu_frontend_recommendations.recommendations_widget_cls" remove="true"/>
    <!-- Inject your own block, if required -->
    <block name="vendor_module.klevu.recommendations_widget_cls"
           template="Vendor_Module::klevu/recommendations-widget-cls.phtml"/>
</referenceContainer>
﻿
Example given of how to do this in a module. This change could alternatively be made in your theme(s).
Updated 27 Sep 2024
Did this page help you?
Adding Code After Klevu()
Adding External Javascript