What is CLS?
CLS occurs because of those elements that change their size or positioning during site loading. These changes lead to negative reactions from users, so they are associated with less positive UX practices, and sites that do not score well are not rewarded in SERP results.
I used the word rewarded to emphasize that sites with poor CLS scores are not penalized by Google as a result of the latest update, but instead are rewarded for sites that give the user exactly what they need without intrusive ads, text or buttons that they change location before they have time to be read or accessed.
To illustrate what CLS means and how Google sees this issue, we’ll use as an example a button that appears on many landing pages.
Let’s assume that a user searches for SEO optimization and lands on a page that offers this type of service, where there is a button like. What if, before accessing the offer, the button scrolls down due to a delayed loading image? The user will miss the button and click on the image.
Put in a situation similar to the one above, most users don’t scroll to press the button again, but simply return to the SERP results to enter another site. This results in a Google algorithm penalty for leaving the site.
What are the most common causes of CLS?
The most common causes of layout changes are dimensionless images combined with Lazy Load plugins or scripts and CSS that change the layout of the page (eg H1 initially loads at 10px and CSS changes this size to 38px 1 second after page load) .
We may hold CLS responsible for any element that visually alters the site by pushing elements that have already loaded in any direction. To determine exactly what the CLS issues are on your site, there are tools and resources at https://web.dev/cls/ and in Google Dev Tools.
However, the only tool that will gather real, not simulated, data about user interaction with the site is Google Search Console. Once accessed, on the left side there is a menu dedicated to user experience on the site, and immediately below Page experience, Core Web Vitals shows, among other errors, errors related to CLS.
How do you fix CLS problems?
There is no universally valid method for troubleshooting CLS problems, they must be identified individually to find the technically appropriate solution for each individual.
The website mentioned above, web.dev, has the information you need to solve your CLS problems, but since it often involves modifying files that are vital to your site, our recommendation is that a developer or agency to handle implementation.
How do we improve the CLS score?
To optimize your CLS score, Google recommends testing using Page Speed Insights or Lighthouse tools, both of which have the same way of testing your page for indexing.
You can also use other tools such as:
- Chrome User Experience Report
- Search Console (Core Web Vitals report)
- Some tools can be found on Web.Dev
Common causes of format and layout changes are:
- Images without dimensions
- Ads, videos and other embedded objects or dimensionless iframes
- Dynamically injected content
- Late-loading CSS, where styles are applied after other elements have loaded
- Web fonts that make blinking text invisible or unstyled
- Page elements waiting for other grid elements to load before appearing
Basic principles that help improve CLS:
- Always use size attributes for images, videos and other embedded elements or iframes. If an element is dynamically loaded, use CSS to style any container elements to the same size or aspect ratio before the content is loaded. Then, when content is loaded into these container elements, the page will not change.
- Never insert dynamic content on top of existing content.
- If you use CSS to animate elements, use “transform” animations.
Conclusion:
My recommendation is to optimize your site for performance and browsing experience and you will reap the rewards in terms of traffic and conversions within the first few years of operation. I also recommend staying “up to date” with Google’s recommended standard updates, it’s one of the best ways to stay one step ahead of your competitors.