As one of measurements on Core Web Vitals in Search Console and can be one of the ranking factors in Google Search, we have to check CLS Score on our website.
What is CLS Score? What does CLS stands for?
CLS stands for Cumulative Layout Shift, one of Google Core Web Vitals metrics, as Google said, a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. As a beginner for SEO, I don’t get what Google means with ‘burst’ here, but I know after read the unexpected layout shift link. For full article from Google you can search with keyword: Google CLS and make sure you click from web dev, not Google Classroom.
Then what is CLS Score? I think it’s visual stability of your page layout. Well, I guess, every page has a layout shift, but sometimes it doesn’t move well in front of the user. In the past, I have read a page from a news publisher when it has a banner ad that can be wider/expand when I hover to it, and that makes the articles went down automatically. It was a little bit confusing my eyes because the text suddenly moving down. Google will think this layout shift can make CLS score bad. Good CLS Score is maximum 0.1. If you have CLS score under 0.25, it’s still not bad, but need improvement. If your CLS score above 0.25, well, you have to do a lot of things to fix all the issues.
How to check CLS Score? You can check your CLS score from Search Console.
- click Core Web Vitals.
- You will see your Core Web Vitals metric.
- Click open report.
- If you have Poor URL with Poor Issues, check the details below the graph.
- If the details said: CLS issue: more than 0.25 (mobile), congratulations, your CLS Score is below Google standard, you have to improve it as soon as possible and after fixing CLS issue, you have to validate it by click ‘Validate Fix’ button.
Another free tool to check CLS Score? You can check your CLS score from Page Speed Insight.
- Go to developers.google.com/speed/pagespeed/insights.
- Type your URL of your homepage or specific page.
- You will see your Performance Scoring.
- Scroll down, until ‘Show audits relevant to’ and choose CLS tab.
- You will find what CLS issue you have on your page. Fix all the issues and validate in Search Console.
How to Improve CLS Score? You will find many ways to get there.
Just googling it: how to improve CLS score. You will find many how tos articles all over the internet, with easier way. But Google recommend:
- Use width and height size attributes on your images and video elements.
- Do not placing ads near the top of the viewport.
- Use sufficient space for embeddable widgets with a placeholder or fallback.
- Do not inserting new content above existing content.
- Use preloading optional fonts to prevent layout shifting and flashes of invisible text (FOIT).
- Transform animations to animations of properties.
Still worry about your CLS Score?
You can always check your Google Search Console about all issue on Core Web Vitals. Google will tell you if you have CLS issue or another issue. I check my CLS score for this Tiktok viral songs page, and my CLS score is good, but still need improvement. I check SEO master’s website such as Craig Campbell’s website has an ‘need improvement’ score, while Neil Patel’s, Chase Reiner’s and Chris Palmer’s has a good score. Beside CLS, you have to check another score in Core Web Vitals such as Largest Contentful Paint (LCP) and First Input Delay (FID).
How about your CLS Score? Is it bad? Please comment below. Don’t worry, you can fix that by checking page speed insight. You can see interesting article and tips here, SEO tips here, and Google Analytics articles here.