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.

Because Fresh Relevance web content is typically injected late in the loading process, it has the potential to cause layout shift. The following approaches can help reduce or prevent layout shift.

Google recommends defining height and width attributes for your content so it remains a fixed size. This involves 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.

Learn more in Server-side personalization.