---
title: Cumulative Layout Shift Facade/Placeholder
slug: klevu-magento-v4/cumulative-layout-shift-facade-placeholder
docTags: 
createdAt: 2024-08-06T13:51:30.917Z
---

Suggestions on how to best handle CLS can be found in our [knowledge base](https://docs.klevu.com/template-js/lighthousepagespeed).

## 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;}
}
```

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. 

:::CodeblockTabs
Vendor/Module/view/frontend/layout/klevu\_category\_index.xml

```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>
```
:::

:::CodeblockTabs
Vendor/Module/view/frontend/layout/klevu\_search\_results.xml

```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>
```
:::

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.&#x20;

:::CodeblockTabs
Vendor/Module/view/frontend/layout/default.xml

```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>
```
:::

Example given of how to do this in a module. This change could alternatively be made in your theme(s).