What will be your reaction, if you are exploring some important content and suddenly, the content changes with some Ad, or you are about to click on some important link and end up clicking irrelevant content?

Isn't it irritating? It not only reduces your speed to peruse the required content but also interrupts the session and reduces your interest in the content. This is a significant factor to consider for a website that impacts its search engine optimization negatively. Google has introduced a page experience - Google core web vitals as a ranking factor from May 2021.

A poor CLS score implies excessive page/content shift and substandard SEO, which ultimately ruins your website's performance on search engines. Therefore, improving CLS is essential for your website's successful execution and operation.

Keep reading this article to know more about CLS and simple solutions to sort out layout shifting problem.

Cumulative Layout Shift & its impacts on SEO

Cumulative layout shift is a metric that measures the visual stability of web pages by calculating the number of unexpected layout shifts on a web page. A layout shift implies a change of position or size of a visual element, moving the content around.

CLS is one of the core web vital metrics defined by Google and a website ought to meet the CLS standards along with other vital for better SEO and to evade being penalized by Google.

Optimizing your website for a good CLS score is a must for gaining visitors' trust in your website. A high cumulative layout shift score indicates frequent unexpected layout shifts of a web page. Whereas, if your web page is reliable and fully static, it might show CLS score as low as zero.

Good CLS score – below 0.1

Needs improvement – between 0.1 to 0.25

Poor CLS score – above 0.25

CLS also impacts mobile user experience badly. Therefore, you must focus on improve the cumulative layout shift score.

Now, let's see what the root causes of CLS are and how to calculate and improve its score.

Causes of cumulative layout shift (CLS)

When content loads at different speeds, it leads to page shifts and becomes the cause to change and alter the layout, the viewer is perusing. There are myriad factors on a web page that load with distinct speeds at different times, such as advertisements posted on a page, suddenly appearing videos, dynamic DOM (Document Object Model) elements, etc.

It is hard to know if your users and visitors are observing CLS or not. There might be some users who are not facing any issues, whereas a few may encounter severe CLS problems. It is entirely dependent on the browser, environment, and the device a user is employing to explore your web page.

Personalized web content based on cookies behaves differently for every user. Moreover, mobile users may have an altogether distinct experience, which is obvious because of the small screen size of the device. So, the only way to understand this unpredicted issue is to calculate the cumulative layout shift score and remove the causes that are the reason behind the poor CLS score.

Measuring cumulative layout shift (CLS)

Google has made CLS score calculation easier. There are tools like PageSpeed Insight and Lighthouse provided by Google to analyze the page performance. It just requires entering your website's URL in PageSpeed Insight and click 'Analyze'; it will give you the exact CLS score of your website for both desktop and mobile versions.

If you wish to use Google Lighthouse, you must use Chrome browser to open the website. You will find 'Developer Tools' by navigating through the three dots in the right corner of the window. Choose 'Lighthouse' and 'Generate Reports', you will get the score of your page performance. Lighthouse also provides you with a detailed audit of the page and notifies you of the causes of poor CLS. You can get it by clicking on 'Show audits relevant to CLS'.

Google uses a defined formula to calculate CLS and that is:

Layout shift score = impact fraction X distance fraction

Here impact fraction is the size of the unstable element in comparison to the viewport and the distance fraction is the amount the unstable element moves as a ratio to the viewport. It means if you obtain a high CLS, a large element moving a large distance and a low CLS score implies a small element moving a small distance.

This is how you can generate the CLS score and know the exact performance of your website on different browsers.

How to improve cumulative layout shift (CLS)?

By following a few simple yet effective steps, you can improve the CLS score of your website.

• Set dimensions of images and videos

  All the images and videos on the web page need a specific space to stay there only. You should define width and height attributes to avoid the unexpected shift of video and image. When you set these dimensions, you inform browsers how much space is set for the video or image even if the image or video is not loaded. So, that space will be left for the specific image or video, and the content will appear after in the correct order.

• Defined space for banner ads, embeds, and iFrames

  You must provide reserved space for banner ads, embeds, and iFrames to improve the CLS score. When banner ads push content to make space for themselves, it creates a large content shift and poor CLS score. Banner ads' unexpected shift is one of the crucial reasons behind substandard user experience. A placeholder must be reserved for dynamic ads on each website to avoid layout shifts.

  Specify ad size by using 'min-height' and 'min-width' in CSS properties

  <div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

  For different screen sizes, you can specify distinct minimums in CSS media queries

  @media screen and (max-width: 970px) {
      #ad-slot {
         min-height: 250px;
     }
  }

  The website's historical data also helps you to specify the correct place for ads.

  Embeds can appear in any form and iFrame can bring third-party elements to the web page, in both situations, layout shift occurs. To improve the CLS score, find out the exact space required for these elements using developer tools and provide the precise space to embeds and iFrames to reduce the layout shift.

• Reduce the use of custom fonts

  Excessive use of custom fonts may increase the layout shifts due to FOIT and FOUT.

  FOIT (flashes of invisible text)- when page rendering progresses, it displays a blank font or invisible text until the custom font loads.

  FOUT (flashes of un-styled text)- your browser will show a fallback font by the time it loads the custom font. This process ignores the page layout, causing a layout shift.

  A system font requires a specific space whereas, the custom font needs a different amount of space to appear on-page. Therefore, avoid using custom font if not required.

  You can also use 'font:display' values, such as 'auto', 'fallback', 'block', 'swap', and 'optional' to evade invisible and un-styled fonts.

  Adding a <link rel = preload> value to your font file will also reduce the layout shifting by custom fonts.

  Google custom web fonts eliminate layout shifting by adding &display=swap to the end of your Google font URL.

• Review dynamically injected content

  Dynamic content is also a reason behind high CLS scores and poor user experience. When it appears at the top or bottom of a web page, it pushes content around and causes a layout shift. Therefore, try not to inject dynamic content above existing content.

Wrapping up

Cumulative layout shift is a factor which can't be overlooked. It is a reason behind poor SEO and UI/UX web design and eventually affects your website ranking on search engines. Try to maintain the CLS score between 0.1 to 0.25, a score of more than 0.25 is a point of concern for your website.

Improving CLS provides a better user experience to all your users and helps your website acquire a good position on search engines. So, it is a win-win situation for you being a website owner because your website will start performing well and your users or visitors will not face any unexpected layout shift.

Voila! Now, it's time for action! Skynet Technologies provide you with best practices for improving core web vitals to enhance the user experience by several folds and boost conversions. We have a cross-functional team of developers, designers, and marketers who all work together to provide the best Google page experience for the websites. We have been offering various SEO services that improve your SERPs and are quick to adapt to any new changes in Google search algorithms. Get in touch with us at [email protected] or submit the following request-free quote form to know more.