Reducing Cumulative Layout Shift (CLS)

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:

  1. Set the Page Placement of the banner/interstitial to the "Customize Container (iFrame)" option
  1. 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:

Updated 2 months ago


Reducing Cumulative Layout Shift (CLS)


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.