Cumulative Layout Shift - What Is It?

November 24, 2021 in SEO, WEB DESIGN| 4 min

Importance of Cumulative Layout Shift and Its Effect on Google's Search Rankings

Google introduced a newly update that was introduced in early 2021. Called Page Experience, this update aims to measure website metrics in performance and user experience. Cumulative Layout Shift or CLS, is one of the main factors in how Google ranks the websites for organic search results and focused on user-experience.

CLS measures how much the content on a web page shifts or moves during the rendering phase, basically it is a way of measuring the visual stability of a website

Many web users probably notices how annoying it is when a page’s content shifts in the middle of a transaction or an interaction, for instance when you are trying to click on a button but accidentally click on a different element instead and it takes you to a whole new page. Not only it causes annoyance for website’s users, but it also creates a problem of high bouncing rates by users, meaning they leave the website in frustration in a quick manner, losing your business revenue and brand image in the process. 

A low CLS score has a negative impact on Core Web Vitals and will lead to lower rankings due to poor user experience. Google’s search algorithm tend to rank websites higher that has positive scores on Core Web Vitals such as CLS. 

CLS is designed to measure  all layout shift changes for each page content. Whenever an element that is viewed in the viewport changes its starting position, the shift is recorded and the element that shifted is considered as unstable. This layout shift score does not include the elements that are being loaded or not when a new element is added to DOM, it only includes the elements that change their starting position after they become visible in the viewport.

Web designers should aim for a less than 0.1 CLS score to get a positive result on their Core Web Vital score sheet. This score indicates that your website and its content offer the best possible user experience and Google will favor such sites.

Improving Cumulative Layout Shift will not only provide a better user experience for your browsers, but it will also cause Google to rank you higher in its search engine so your website can get more organic traffic.

How to Improve and Optimize Your CLS Score

There are few practices that you can apply as a web designer to a website that can improve a low CLS score;

  • Start by measuring CLS score on different web pages. Depending on your design elements and website structure, different web pages tend to have different CLS scores. Some pages focus interactive design elements while others on content. 
  • If your web page serves ads to its users, this might cause a low CLS score. If the ad placements are not properly optimized, they will most likely shift and cause low Cumulative Layout Score. The best way to handle such cases is to reserve the ad space and avoiding the collapse of that space by using placeholders. This will help browsers reserve enough space until the ads load, hence will cease the shift happening.
  • Defining the height and width of media elements such as pictures and videos will ensure a high score of CLS as well. Make sure to define aspect ratio of responsive images.
  • Avoiding dynamic content implementations above the existing content will also ensure that layout shift will not happen. If your design practices for that specific page calls for such actions due to interactive design elements, than the layout shift is already expected by its users and will not cause an issue.
  • Make sure to avoid invisible text and hidden design elements because they will cause layout shifts. Additionally, make sure that you use proper font displays and optimize web fonts.
  • Optimizing the page load speed, HTTP/HTTPS request management and optimizing your design elements to make sure everything loads together will ensure a low CLS score.

CLS quickly became one of the most important factors in positive user experience and search engine optimization practices. Website owners that take the right measurement with the right practices to ensure a low CLS score will get ahead of competition and will have better search engine rankings. You can contact us anytime to discuss how we can help with your CLS score and to discuss your next project.