Cumulative Layout Shift (CLS)

As Google continues to evolve its search algorithm, keeping up with the latest updates and changes is crucial for maintaining a strong online presence. In fact, Google is known to change its algorithm between 500-600 times each year, with some updates having a significant impact on website performance. As Ryan Shelley from Search Engine Land noted, while many updates may be minor and go unnoticed, major updates can have a significant impact on search rankings and website traffic.

It's important to consider the potential impact of any changes made to a website, particularly when it comes to page performance. Even seemingly minor changes, such as altering the URL of a page that currently ranks well, can have unintended consequences that negatively affect website performance.

In this post, we'll explore the importance of Cumulative Layout Shift (CLS) and why making changes to a website's layout or design without careful consideration can be detrimental to user experience and ultimately impact website performance. As the old saying goes, "if it ain't broke, don't fix it" and this rings particularly true in the ever-evolving world of SEO.

Cumulative Layout Shift (CLS) applies to both mobile and desktop sites. It measures the visual stability of web pages across all devices and screen sizes. Google uses CLS as a ranking factor in its search algorithm, so improving the CLS score on both mobile and desktop sites can help improve the overall user experience and potentially boost search rankings.

Cumulative Layout Shift (CLS) is a metric used to measure visual stability on web pages. It measures the amount of unexpected layout shift that occurs as a user interacts with a web page. A layout shift occurs when elements on a page move unexpectedly, such as when an image suddenly appears and pushes your content down, causing the user to lose their place on the page. This can be frustrating for users and negatively impact their experience on a website.

CLS is calculated by multiplying the distance that unstable elements have shifted by the impacted area of the viewport (the visible area of the webpage), then dividing by the total area of the viewport. This results in a score between 0 and 1, with lower scores indicating better visual stability.

CLS does not directly apply to page targeting with Google AdWords. However, it is still an important metric for website owners and developers to keep in mind as it affects user experience and ultimately impacts website performance, which could indirectly affect AdWords targeting by influencing bounce rates, time spent on site, and other user behavior metrics. In addition, Google has recently announced that CLS will be a ranking factor for search engine optimization (SEO), so improving your website's CLS score could potentially boost your organic search rankings.

By following these key points, you can help improve the visual stability of your website and provide a better user experience for your visitors.

1. Avoid inserting new content above existing content: When new content is loaded dynamically, it can cause existing content to shift down, leading to a poor user experience. Instead, reserve space for new content so that the layout remains stable.
2. Size images appropriately: Images that are too large or too small can cause unexpected layout shifts. Be sure to size images appropriately so that they fit into the space reserved for them.
3. Use aspect ratios for media elements: Setting the aspect ratio for media elements like videos and images can help prevent unexpected shifts when these elements load.
4. Load resources in an optimal order: Load resources like fonts, scripts, and stylesheets in the optimal order to minimize the potential for layout shifts.
5. Optimise third-party code: Third-party code, such as ads or widgets, can contribute to layout instability. Consider optimising or removing unnecessary third-party code to improve CLS.
6. Test and monitor CLS: Use tools like Google's PageSpeed Insights or Lighthouse to test and monitor CLS on your website. This will help you identify and fix any issues that may arise.