Cumulative Layout Shift Facade/Placeholder

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 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> 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> 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> example given of how to do this in a module this change could alternatively be made in your theme(s)