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?

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.

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.

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

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.