Reducing Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is part of Google's PageSpeed Insights that measures the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. The CLS score will vary based on the web page setup, the type of banner/interstitial, and page placement.

Google recommends reserving space for banners along with a placeholder option when the actual banner is not shown. Alternatively, this can be managed by using the CSS transform property in the Journeys editor.

Below are guidelines for reducing any negative contribution related to Journeys:

Set the Page Placement of the banner/interstitial to the "Customize Container (iFrame)" option

Change the CSS based on the type of banner/interstitial:

Banner Type	Changes Needed	Example
Inline banners of type - Full Page Interstitial Banner / Partial Interstitial/ Top Banner	- Add `body { transform: translate(0, <height of banner in px>); }` - Change value of top for `#branch-banner-iframe { top: -<height of banner in px>; <rest of the attributes remain same as default>}` Please note the value of top is negative.	`#branch-banner-iframe { top: -456px; left: 0; right: 0; border: 0; height: 100vh; z-index: 99999; box-shadow: 0 0 5px rgba(0, 0, 0, .35); width: 1px; min-width: 100%; position: absolute; } body { transform: translate(0, 456px); }`
Sticky banners of type - Full Page Interstitial Banner / Partial Interstitial/ Top Banner	- Add `body > * { transform: translate(0, <height of banner in px>); }` - Change value of top for `#branch-banner-iframe { top: -<height of banner in px>; <rest of the attributes remain same as default>}` Please note the value of top is negative.	`#branch-banner-iframe { top: -76px; left: 0; right: 0; border: 0; height: 100vh; z-index: 99999; box-shadow: 0 0 5px rgba(0, 0, 0, .35); width: 1px; min-width: 100%; position: absolute; } body > * { transform: translate(0, 76px); }`

For additional details on CLS and Google's PageSpeed Insights tool visit the following pages: