A lot of you may noticed that Google added the Core web vitals to the GSC – Google Search Console.
One of the most important issues related to core web vitals is the CLS issue.
CLS stands for Optimize Cumulative Layout Shift.
“I was about to click that! Why did it move? Now I clicked the other button and lost my money!” Something we hear quite often these days.
Layout shifts are very distracting and frustrating to website users. Just imagine you’re reading an article when all of a sudden elements shift around the page because the page was finally finished loading, and you lost what you were reading. The most frustrating thing! But what if you are using a trading website and suddenly loose a lot of money because of a stupid CLS issue? Things can get really serious because of the CLS issues.
So CLS can create serious real life issues!
How to fix a CLS issue?
This is unarguably one of the hardest things to fix because you can’t spot easily what’s contributing to generating the CLS issue.
If your website has something that is causing the content to shift, that could be the main cause of an CLS issue error.
Here are 5 possible fixes for your CLS issue:
1. Disable sticky headers that cause the content to shift up and down.
2. Disable the logo shrinking effect – logo zoom in or zoom out when scrolling the page. Also include size attributes on your logo image. Lack of image size attributes for the logo is the second most popular cause of CLS issues from my experience.
3. Always include size attributes on your images and video elements. If you’re using WordPress as soon as you upload an image WordPress automatically adjusts the size of the image. If not this is an example of a good image code with declared width and height:
<img src=”thelink” width=”400px” height=”300px”>
4. Never insert content that can appear above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected. A good example of this are the popups like the annoying “subscribe now” or newsletter popups.
5. Disable animations. Or prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state. Or better stay away of animations.
If this is too much for you just let an SEO expert fix your CLS issues and other core web vitals errors.
An easy way to test if you fixed the CLS issue is to check it with the pagespeed tool from google right after each of your changes. But first, make sure you clear your website cache or if using WordPress simply disable all the caching plugins.