Improve Cumulative Layout Shift

Overview

Cumulative Layout Shift (CLS) is a performance metric used to measure the perceived page load visual stability or the unexpected shifting of web elements while loading the page.

CLS is one of the metrics measured in Google’s Web Vitals.

CLS’ effect on your Performance Score

CLS accounts for 15% of the total Performance Score.

Unlike most other Performance Score metrics, CLS focuses on measuring your visitor’s page experience opposed to page speed.

CLS is one of the biggest contributor to User Delight – i.e., offering a smooth, lag-free experience to your visitors.

How to improve Cumulative Layout Shift?

Improve your CLS score by incorporating good practices into your development workflow, such as:

1) Specifying image dimensions

Always specify width and height for your website’s image and video elements.

Fix elements do not have explicit width and height with Staq

Go to Staq Hosting > Media > Site Optimizer > Add explicit image dimensions

2) Eliminate render-blocking resources with Staq

CSS can cause render-blocking issues which in turn affect CLS.

The Staq tool may either eliminate render-blocking resources or improve them.

To optimize, go to Site Optimizer > CSS. Then turn on:

• Load CSS deferred
• Extract Critical CSS.

What this will do is find all the critical CSS that loads the website above the fold and add it as an inline CSS at the top of the HTML file. Then, it defers the rest of the CSS files that aren’t required at the initial load.

3) Reducing layout shifts caused by ads, embeds, and iframes

To reduce layout shifts caused by ads, embeds, and iframes, do things like:

• Reserve ad slot size before loading the ad library.
• Move ads to the bottom or out of the view.
• Use placeholders when there is no ad to show.

4) Avoiding inserting new content above existing content

Avoid inserting dynamic content like banners, forms above existing content unless in response to user action like clicking a ‘Get Quote’ button. This helps prevent unexpected layout shifts.

5) Preventing the Flash of Invisible Text (FOIT)

The Flash of Invisible Text issue can also affect your website’s CLS. Use the font-display attribute or make sure your text remains visible during loads by preloading web-fonts.

6) Avoiding non-composited animations

If you can, only perform composited animations to reduce main-thread work and prevent repainting of pixels when loading the page.