We know that core web vitals and the components to measure them are super important and they play quite a crucial role when Google overhauls its search algorithm. But, not everything is perfect; there are times that Google Search Console has issues.
Google is obviously working to improve its user’s experience. That includes the creation of Google Search Console – the holy grail of web admins, SEOs, marketing professionals, and designers. Google’s new online tools and metrics have pushed webmasters to continuously improve driving the developers to be super proactive when it comes to fixing errors.
Today, I am talking about one of three metrics of Google Search Console, the CLS. I often receive questions about the drop in website traffic where the users get the error message that looks like this:
CLS plays a vital role in the Google search algorithm, and there are times that it has performance-related issues.
So sit down, put your google game face on and prepare to learn about CLS, its measurements, and how to fix the issues.
CLS: The Background
Cumulative Layout Shift or CLS is the page speed metric of Core Web Vitals of Google. It has to do with the objects or things loading at various times.
It measures the amount of page content shifts during a page’s loading time or when the viewer is scrolling. It causes the content to bounce around that can affect the user’s experience.
Most people have become obsessed with page speed, and for a good reason. Users do not enjoy the wait.
These practices are excellent in ensuring that the pages will load quicker, but there are adverse effects. Parts on the page will be going out of order. It will cause the content to appear on the page randomly. Many experience such problems when they’re on google, and your sites are no exception.
For example, some have gone to websites that start to load, and the primary screen view begins to bounce around. At the same time, some objects will load faster than others.
On the other hand, there are times when you’re skimming through the website’s content. All of a sudden, a video, image, or advertisement above the content started to load.
It pushes down the content that you’re reading and disrupts your reading time. If you pressed something by mistake instead of scrolling down, it could be the worst-case scenario.
Whether it is the first case or another, you won’t have a pleasant time browsing the web. That’s the reason why Google is letting us fix it: to make it a part of their page experience algorithm.
Relevant: Also read how to fix LCP issues on search console here
Measuring the CLS
Google provides tools to gather data on the CLS in a site. The arsenal of all webmasters is the Google Search Console.
If a person is registered in Google Search Console, you’ll receive a notification or alert that person under Core Web Vitals. Specifically in the time where the pages are not loading or get an alert about your CLS.
When this happens, it is better to list down the pages that are failing CLS. Here is the Google Search Console of my website alejandrorioja.com
However, you still have to use different tools to test your pages for CLS.
The following instrument that measures a CLS is PageSpeed Insights. You can also get Lighthouse, a tool that empowers PageSpeed Insights.
PageSpeed Insights
PageSpeed Insights is all about the “Lab Results”; that’s what they call them. Also, when PSI visits a page, it observes the CLS.
Usually, PSI measures the first screen view only. That’s why it might not help in fully debugging the CLS.
In PageSpeed Insights, there are results labeled “Field Data” and “Origin Summary.” It shows if a page has enough visitors.
The data shows the real-world user experience with CLS and the different Web Vital Metrics using CrUX live.
✋ Stop worrying about SEO and have me do it for you
PS: Ready to work with the 0.01% of all SEOs worldwide? Click here.
People are wondering how they will emulate that?
Well, Google presents the chrome extension called Web Vitals. It can help a person to measure CLS while browsing the website.
You can try out objects at different speeds while you scroll using other connections. It is to see it can be replicated any CLS problems happening.
Fixing the CLS Issues
Assuming you’ve understood the causes of CLS and how to measure it, here are some ways to resolve these problems.
It will need the basics of technical knowledge, but you have to know the common causes to get you started.
3rd-Party JavaScript
It is essential to know what usually causes CLS. So, if you’re using third-party JavaScript, it could give things like similar content, share buttons, and so on.
These are the things that can result in CLS as they load. It’s because JavaScripts load in a different order.
Some components will add images and icons to your page after some parts are done loading. You can identify the third-party script on a page using Chrome DevTools, PageSpeed Insights, and WebPage Test.
To fix this issue, you have to push the third-party JavaScript visual elements. You can move this under the first screen view.
The lower part of the page has more time to finish loading before the user can go there. Thus, it can avoid a possible shift in the layout.
Pre-defining the object’s height before the JavaScript runs is another solution for this issue. That will also help you reach the 3rd-party responsible for the JavaScript.
It will encourage you to ask them to fix it.
Deferred or Lazy Loading
Website owners have had problems with laziness or defer loading. Lazy loading can cause an evident shift because of the element’s delayed loading time.
The answer lies in making sure that the plugins can define a placeholder. Specifying a placeholder can replace it once it loads.
Asynchronous Fonts and CCS
WordPress optimization plugins use asynchronous loading for your CSS once it is done. Yo removes the “render-blocking,” the things that usually prevent a site from loading well.
On the other hand, if the site starts to load, some things will flash on the screen. You most likely need to fix any optimization plugins you’ve used.
FOIT and FOUT
The fancy google fonts can cause FOIT and FOUT on the page. The thing is, people wouldn’t know that it can cause any problem.
So, for those that are wondering, what are FOIT and FOUT?
FOIT or Flash of Invisible Text is the element that uses a font that a browser needed from a web server. So, you can hide the font until all the font assets have been downloaded.
On the other hand, FOUT or Flash of Unstyled Text happens when a browser displays a fallback font. That will occur in a font stack until the custom font loads.
You can use Lighthouse in identifying what is causing CLS. If the fonts are at fault, there are some fixes in dealing with them.
You can use the font: display values. A person can minimize the effects by using font: display like swap, auto, block, optional and fallback.
However, you want to make sure that there will be no layout shifting coming out all of a sudden. You can use the font: display in conjunction with link rel=preload like in the picture shown below.
Adding Dimensions on Embeds and Ads
Ads are the most significant contributors to layout shifts. Ad networks and publishers support dynamic ad sizes.
Ad sizes are the one who improves the efficiency and revenue. However, because of the ads pushing down the visible content a user is viewing, it can affect the viewing experience.
The result of this has a suboptimal user experience. On the brighter side, some steps can decrease the high CLS because of the ads.
- It is crucial to reserve a space on your page for an ad slot. It is to estimate the size before you can load the ad tag library.
- Ensure that the slot size is correct to avoid having shifts when you put advertisements in the content flow. When the page is loaded, the ads will avoid triggering the layout shifts.
- Take extra care if you put non-sticky ads closer to the top of the viewport.
- Do not collapse the allocated space when the placeholder didn’t show ads even though the ad slot is available.
- You can avoid having layout shifts if you reserve an ad slot with a wide duration.
- You can also use some historical data to know and choose the right size for the ad lot.
Final Thoughts
There’s a lot of difference in living in the digital age compared to the other periods. There are a lot of things we discover and help us in our daily lives.
However, it is not perfect. There are trial and error and a lot of problems before being able to use it.
Even to the day when people can finally use it, there will be issues. The good thing is people can fix it on their own.
Many helpful tips can be seen on the internet in fixing things out, like the issues in CLS.
Loved this post? Check out the articles below!
SEO Guide for 2021: A Complete Guide to Rank First on Google (alejandrorioja.com)
- Your best SEO guide for 2021
- How to increase Alexa ranking quickly?
- How to optimize your website speed?
Comment down below the things you learned today! Feel free to share something that we didn’t mention in the article!
