Websites today are dynamic and mobile-friendly because most of us use our phones to browse. Have you ever tried to click on an article and ended up clicking on an ad itself because the page layout suddenly changed? This is a very common scenario, because lots of people accidentally click the wrong item, leading to a poor user experience. This is highly prevalent on phones due to their smaller screens and resolutions. With everyone vying for the smoothest user experience, this isn’t exactly desirable, especially since Google has come up with a metric to rank UX. 

What Is Cumulative Layout Shift Or CLS?

A Core Web Vital Metric, CLS calculates the total of all layout shifts on a page that aren’t caused by user interaction. It uses a speed-dependent calculation to look at the ratio between the impacted viewport and movement distance. Google would like publishers to be more mindful of layout shifts and minimize them. Publishers can use the CLS score to objectively measure and optimize their page. So, why is it important to ensure that your CLS score remains high? That’s because CLS measures the page’s visual stability. It is frustrating when content shifts during the interaction, like menu items making way for ads that then redirect you to a third-party website. These cause a massive inconvenience to users, and can even lead to issues for publishers, causing high bounce rates and ad policy violations.

Google counts CLS score among the top three ‘Core Web Vitals’, meaning a low CLS score will ensure a low CWV score, leading to a fail grade. Google’s updated search algorithm ranks sites that pass the CWV assessment. It is imperative to improve your CLS score to ensure a better UX and rank higher on Google, to boost your organic traffic. 

How Is Cumulative Layout Shift or CLS Calculated? 

When an element changes position, the shift is recorded and that element is deemed unstable. A layout shift is only recorded if visible elements change their start position, not if new elements are added or size changes occur. A CLS score is obtained by measuring the impact fraction and distance fraction and multiplying the result. 

The impact fraction is the measurement of unstable elements and their impact on the viewport between the two frames. It is calculated by measuring the union of the shift and the original element as a ratio of the site’s total visible area. The distance fraction is the biggest distance covered by an unstable element, wrt to the viewport. 

The CLS threshold, therefore, determines layout shift score and ranking factor and is a very important metric for UX and SEO performance. Google’s PageSpeed tracks 6 metrics, with CLS accounting for around 15% of the score. It summarises all unexpected content shifts that happen on that page, and users need a high CLS grade to pass the assessment. 

• A good CLS score is– below 0.1,
• One that needs improvement – between 0.1 and 0.25,
• 0.25 is a poor CLS score.

CLS or Cumulative Layout Shift = impact fraction X distance fraction

What Leads To A Poor CLS Score? 

1. Unspecified width and height for images.
2. iFrames, Ads, and embedded elements with unspecified sizes. 
3. Dynamic content on the page. 
4. Flash of Unstyled Text (FOUT) and/or  Flash of Invisible Text (FOIT), caused by web fonts.
5. Actions awaiting network response before updating DOMs.

How to Fix CLS Issues and Improve Your CLS Score and User Experience?

Reducing unstable elements, or shifting behavior isn’t easy. However, there are certain steps that you can take to ensure that your CLS score remains favorable. 

Measure the CLS Score of All The Major Templates on Your Website 

Websites receive CLS scores depending on how they are structured. For instance, article pages might have better CLS scores than homepages. A good idea would be to measure the CLS scores of all major page templates. 

Including and Defining the Width and Height of Images 

Size attributes for images and videos are vital. For responsive images, define aspect ratios. Reserve any space for elements using CSS aspect ratio boxes, so the browser can give the document the correct amount of space while assets load. Earlier, web developers would include width and height for images by implementing a code, ie 

<img src=”example.jpg” width=”800″ height=”300″ alt=”Example Image”>

Responsive images changed all that with more and more developers turning to CSS. Space is given only after the browser starts downloading the image. The layout would move after all the images were displayed. This is why the aspect ratio is better for image resizing, reducing the risk of layout shifts. Responsive images also work well with secret attributes, so you can set up different photo sizes so the browser displays the best one. 

Optimize Ads 

Layout shifts are often caused by ads, especially if ad placement isn’t optimized. Reserve space for ad slots, and don’t collapse this using placeholder in case ads aren’t returned. Beware of non-sticky ads on top of the viewport because they push down content. Ads require space, and if they aren’t given some, will shift other content on the page when they load eventually. Leave space for the largest ad size configured. Read our blog on how to effectively use sticky ads without ruining the user experience. 

Beware of Wrongly-Injected Dynamic Content 

Don’t inject dynamic content on top of the content that has been already loaded, unless it’s a response to user interaction and an expected layout shift. Such content won’t affect CLS if it is loaded 500 milliseconds after user interaction. Basically, if user inputs cause layout shift regions to grow, your CLS score won’t be affected.

Using ‘font: display’ Values ‘link rel=preload’

If your site depends on online fonts, and browsers download fonts from servers, they display blank space before the font loads. Termed FOIT, as discussed earlier, can be avoided by using font: display causes like swap, auto, block, fallback, and optional. You could also preload font files using, link rel=preload for important fonts, so they are downloaded on priority.

Conclusion

In conclusion, apart from these best practices, there are many other steps that you could take to ensure that your layout doesn’t shift too much. Don’t try implementing all these steps in one shot. It is better to break them down, measuring the effect of each optimization post-implementation. Users can code layout shift fixes or use plugins to improve their CLS score. If dynamic content remains static, that will happen

Don’t underestimate the CLS score even if it isn’t as intuitive as other Core Web Vitals. It is very useful and can tell you why users are unhappy with your website and give you useful pointers in improving the user experience. Read our blog on striking the right balance between ads and user experience, another important area to watch out for if you want your site visitors to be happy. 

The post What is Cumulative Layout Shift (CLS), And How To Optimize It first appeared on Publir.