Introduction to CLS and SEO
In the realm of digital marketing, Search Engine Optimization (SEO) stands as a pivotal element for the success and visibility of any website. One factor contributing to SEO, Cumulative Layout Shift (CLS) has emerged as a key player in determining a site's user experience and, by extension, its ranking on search engines. But why is CLS so important for SEO?
Understanding CLS
What is Cumulative Layout Shift (CLS)?
CLS measures the stability of a webpage while it loads. In simpler terms, it quantifies how much page content shifts during the loading process. A low CLS score indicates a stable site, enhancing the user experience, while a high CLS score can frustrate users and lead to negative impacts on SEO.
Causes of High CLS
Several factors can contribute to a high CLS score, including unoptimized images, dynamically injected content, and ads that rearrange content as they load. Identifying these issues is the first step toward optimization. One of the most common factors and easily fixed ones are images that don't have a width and height dimension. So this is something you can implement in your site right away.
How to Measure CLS
Tools like Google's PageSpeed Insights and Lighthouse provide insights into your website's CLS score, offering a benchmark for improvement. At pagespeedtracker.com we use Google Lighthouse to track your CLS data. Your page is tracked daily so you can see if things change over time. Below you will find an example of a graph.
This customer asked us for advice on how to get her CLS metrics right. We got it to zero after making some changes to her website.
The Impact of CLS on SEO
There are multiple reasons why you want your CLS as low as possible. We are discussing the SEO reasons here, but let's touch on some other reasons: User experience, is the main thing here. It's incredibly annoying if you want to press a button and the button shifts away just when you want to press it. Users will dislike your site and move on to the competition.
Since Google knows this they made it a factor in their rankings. But even if they didn't people leaving your website would result in a high bounce rate and a lower score on Google's search engine.
CLS is one of the newer ranking factors in Google's metrics making it important and a good way to get ahead of your competition if you adapt early.
Improving your CLS
Optimize Images and Advertisements
One of the most common causes of layout shifts is images and ads loading without specified dimensions. To fix this, always include width and height attributes for your images and iframes. It's important to note here that this doesn't mean styling with CSS. This means using the actual width and height element inside the <img> or <iframe> tag. This practice ensures that the browser can allocate the correct amount of space on the page even before the image is fully loaded, thereby reducing unexpected layout shifts.
Use CSS Aspect Ratio Boxes
For responsive designs, where specifying exact dimensions might not be feasible, using CSS aspect ratio boxes can be highly effective. This method involves creating a container with a specified aspect ratio, ensuring that the space is reserved for content of varying sizes without causing layout shifts.
Avoid Inserting Dynamic Content Above Existing Content
Dynamically loaded content, such as ads or banners that appear above existing content, can significantly contribute to layout shifts. To improve your CLS score, try to avoid inserting new content above content that has already been displayed to the user. If dynamic content must be added, consider placeholders or reserving space in advance to prevent unexpected shifts.
Preload Fonts
Unloaded web fonts can cause text to shift when they're loaded. Preloading your web fonts in the HTML head section ensures they are available as soon as the text renders, reducing layout shifts associated with font loading.
Limit or Avoid Animations That Trigger Layout Changes
Animations that cause layout changes can significantly affect your CLS score. Use properties like transform and opacity for animations instead of properties that affect the layout, such as width or height. This approach allows you to create smooth animations without impacting layout stability.
Skeleton Loading
This is one of the lesser talked about, but it's very effective. Skeleton loading directly benefits Cumulative Layout Shift (CLS) by stabilizing visual elements during the loading phase, thus preventing unexpected shifts. When a webpage utilizes skeleton loading, it reserves space for content that will load, reducing the likelihood of layout shifts as the actual content populates these reserved spaces. This approach ensures a smoother visual transition for users, significantly decreasing the occurrence of layout shifts that negatively impact the CLS score. By improving CLS, skeleton loading enhances user experience, making web navigation more predictable and less disruptive, which is crucial for maintaining a high-quality, user-centric website.
What is a good CLS score
Of course, it's important to know when you are doing a good job. It's fairly easy. In the image below you can see what according to Google is a good score and a bad score.
Keep track of your pagespeed
Monitor your pagespeed with our free tool. Get insights on the impact of the changes you have made. Receive a weekly report on you page performance.
monitoringStart for free