Skip to main content
All CollectionsContentSmartBlocks and Slots
Understand Cumulative Layout Shift when injecting web content
Understand Cumulative Layout Shift when injecting web content

Cumulative Layout Shift (CLS) refers to changes in a web page's layout after the page has loaded or while loading.

Updated over 10 months ago

An example of Cumulative Layout Shift is a button dropping down the page as content above it loads in, just as you're about to click it.

It can be very annoying and provides a poor user experience, so Google has been factoring CLS into their page scores, which impacts your ranking in search results. This has made people a lot more aware of this issue.

As Fresh Relevance web content is typically injected late in the loading process, it has the potential cause a layout shift. So, what can you do about it?

Solutions

Use size attributes on your content

Google's own recommendation is to add height and width attributes to your content so it remains a fixed size. This means adding an element to the page and setting its size to that of the SmartBlock content you're injecting, so the layout remains static while the content changes.

Add elements towards the bottom of the page

As the CLS score is calculated based on both the impact fraction β€” how much changes β€” and the distance fraction β€” how far it moves β€” you can lower your score by adding elements further down the page, so they impact fewer items as more content will sit above them.

Scores are also focused on the initial page viewport, or visible content, so adding elements below that means it isn't counted against you.

More help for the front-end

Google have a comprehensive page outlining various tactics to lower your CLS score.

Go server-side

The other possible solution is to render your SmartBlocks server-side, meaning that you make a call to our content API to get the contents of a SmartBlock, and then inject that retrieved content into your page before it renders, or as it's rendering.

Did this answer your question?