The layout of your website on any browser can be considered as a graph of height and width (or left and right). This is measured by the change in the overall shape of your website over time. The CLS Issue is an average of the left-right and top-bottom variations of your design.
The cumulative layout shift is a multiplication of two factors. Effects vary and distances vary.
What is Cumulative Layout Shift (CLS)
When your website starts loading, a button or element appears in your website. As the website loads, the button changes its position to down. So these elements that are changing position when loading the page, it is called layout shift and when Google extracts the score by noting this layout shift according to the size of the screen, it is called CLS.
Suppose you have an e-commerce website and you do all the SEO parts and everything to rank your website, but if a visitor goes to buy a product on your website and when he clicks on the Buy Now button, he will redirect some other page not on the cart page, so it negatively affects your website and CLS score.
According to Google, if the CLS score of your website is 0.1 seconds, then it is good for you and if you got a score of 0.25 seconds then it is moderate, then you have to work on it but if your website’s CLS score is more than 0.25 seconds So this is bad.
How to Fix Cumulative Layout Shift: More Than 0.25 (Mobile) or (Desktop)
Now how to know which element is spoiling for CLS score. There are more ways but I will show you the easy way to solve it for which we need to use Chrome Developer Tools.
First, click on these three dots >> then click on more tools >> Click on Developer tools or You can directly click on F12.
Click on Performance tab >> then click on Web Vitals box >> then click on Reload page >> Wait for some time the data will be loading after that you can see some information related to your website there.
Now here you can see that this red dot clicks on this red dot and it will highlight some elements that are causing CLS error on that page.
When you move your mouse over this red dot you can see the highlighted element that causes a possible LCP or CLS.
This will show you the time and problems why it is happening and then you can fix this problem.
Some Other Important Factors That Will Fix Your CLS Issue
- Fontx
- System Fonts
- Self host your plan
- Images
1. Fonts
Earlier in the LCP article, I told you about improving fonts, if you do not know about LCP then click here to read our blog on how to fix LCP.
Use the same fonts as your system fonts to improve the size of your fonts. If you use the font display swap plugin, some layouts will shift from your page.
2. System Fonts
90% of website owners use web fonts to make their website look better, but the fonts used by mobile, windows, mac are very good.
So if you think smartly, you can get good benefits by using system fonts. If fonts are not used, the download website speed will increase and there will be no layout shift, your CLS score will decrease. System fonts can be easily used in blogs and commercial websites, your user will not mind
3. Self Host Your Plan
If you want to use fonts like Google Fonts, Web Fonts, if you can download it, you can put it on your hosting, but to use this method, your hosting must be fast.
4. Images
Images always take time to download, it takes longer than your text to load, how can you optimize it?
- Optimize your images in JPEG or PNG format
- Convert images in webp format
- Give your images proper size
- Iframe or Embedded elements
5. Optimize Your Images in JPEG or PNG Format
Whenever you use images, try to make sure that the size of your images is the smallest and use PNG only if you want to show the background in images.
6. Convert images in webp Format
People always make a common mistake, they convert images of their website to WebP format, but forget to optimize the JPEG format first. The smaller size of your JPEG will be the same as a smaller Webp.
So first optimize your image in jpeg and then convert to Webp format.
7. Give your images proper size
If the browser already knows the size of the images on your website, it will save some space for those images.
You cannot fix both the height and width of images. You can fix one of them and leave the other for an accept ratio. Your problem will be solved automatically.
8. Iframe or Embedded Elements
Now for the iframe or embedded elements, you can do the same as you do for the appropriate size for images. Fix the height or width of one and leave the other for an acceptable ratio. This will help in solving the CLS score.
9. Advertisement
Ads are the biggest reason for layout shifting and you have no rights or control over those advertisements.
You can’t do anything with your ads, but you can allow some space for the ads and set a fallback image in case the ads spots don’t fill up.
But if no Ads can be loaded in that place, then that place will not look good for the user. You can set any graphics there, if your ads will not load then you can show the graphic.
You can do this with the help of a developer using JavaScript or there are more plugins to solve this problem.
Add some settings when your visitors scroll down the page then website ads will be shown. Technically it will not affect the CLS.
The layout shift that occurs within 0.5 seconds of user input does not conflict with the CLS score.
Make sure that your LCP score will go down slightly if your ads are loaded within 0.5 seconds of user input, but the CLS score will not increase.
Now the Question is How to Load Your Site in 0.5 seconds
- Do not add a slideshow, keep it simple
- Customize all images in WebP format
- JavaScript optimization
- Fixed Main Thread, if you do not know about Main Thread then read our blog post on First Input Delay by clicking here.
If you work on all these points then you can easily improve your CLS score.
Conclusion :
Friends, all these core web vital Points LCP, FID, and CLS connected each other. When you are working on all the points written by me in this article then you can easily improve your core web vitals score.
I hope you guys have understood the cumulative layout shift and how to fix the issue. If you have any doubts or suggestions about core web vitals errors you can ask me in the comment box.
Comments are closed, but trackbacks and pingbacks are open.