The Cumulative Layout Shifts are also known as CLS is a Core Web Vital metric and it is used to measure how visually stable the page is. The calculation of visual stability happens by calculating how many unexpected layout shifts occur without clicking or interacting with the page in a complete life span of the page. The sum of these shifts determines the Cumulative Layout Shifts score.
Have you ever tried reading something on a website and all of sudden without clicking any button the layout of the website changes and you lose the text that you are reading? And worse, trying to click on some link or button and because of layout change, you end up clicking on different buttons? These are some examples of unexpected layout sifts.
These unintentional layout shifts don’t just make your website less user-friendly but also slows down your website. Websites load data asynchronously and keep adding data to the page after downloading the content. If it takes time to download the data it will also get added onto the website a little late and the layout of the website changes according to downloaded data.
For example, when image loads or some ads load the layout of the page changes to show this new content. Even when fonts get changed, it causes some layout shifts.
The Cumulative Layout Shifts represents 15% of the PageSpeed score and it’s an exceptionally pertinent measurement for user experience and the new ranking method. Subsequently, it could also influence your SEO.
Another bad thing about large layout shifts on your websites is, it may look like dark patterns. For those of you who don’t know dark patterns is a technique in which websites try to make you do things that you didn’t mean to, like buying or signing up for something. And since layout shifts can make users do accidental clicks, sometimes it is considered as a Dark Pattern and that type of impression is very bad for your site.
What is a good CLS score for your website?
A “good” CLS score should be equivalent to or under 0.1.
A CLS score somewhere in the range of 0.1 and 0.25 implies that the website “needs improvements”.
The grade is “poor” if CLS is more than 0.25.
How to check your CLS score?
There are many free tools available to check your website CLS score which is mentioned below.
How to know which elements are shifting?
Most of the time layout shifts occur in a split second and you can’t see it if you have good internet speed but many of our website users may not have good internet connectivity. So to check layout shifts you should use some tools a good option to check layout shifts is defaced.dev gif generator.
You can also use page insight to check your website speed and CLS score
Now to check layout shifts in real use case environments you can use the chrome dev tool. First press ctrl+shift+I on your keyboard to access the chrome dev tool now press ctrl+shift+P to open the command menu and type rendering click on “Show Rendering”. Now from the rendering section tick on Layout Shift Reasons. This will highlight layout shifts on your website.
Now to see these changes visibly you should use slow internet otherwise pages will render so fast and you can’t notice changes. You can also use chrome dev tools for that, go to the “Networks” tab in dev tools and set your bandwidth speed so your website loads extremely slow. Use a slow 3G connection or you can also use custom speed such as 100kbs to test. Slower speed should give you a proper visual cue of how much your website’s layout shifts.
How to avoid Cumulative layout shifts in WordPress
Avoiding a layout shift in any website is fairly easy, you just need to keep your eyes on a few things.
1. Set Image Dimensions
You should always set image dimensions for your website images. The reason for doing it is when the image is loading it should take enough space on the page so even if it takes time to load the image layout is already set for it.
The best thing about WordPress is it automatically does this for your images when you add them via WordPress editor and most of the editor plugins do the same. However, if you are manually adding images to your WordPress site you should use the Height and Width property in your image tag.
<span style="font-weight: 400;"><img src="https://yourwebiste/image_url.png" alt="Image alt" width="1024" height="874"></span>
2. Set dimensions for embedded
Just like you define dimension for images you should also define height and width for your embedded contents such as YouTube videos, Google Maps, and other embedded. You should also consider adding some placeholders for embedded locations since they take time in loading and sometimes they won’t even load because of some external issues. So having a placeholder is good for both scenarios. There are several plugins available for this such as WP Rocket and Lazy Load.
3. Fix places for ads
Ads are like embedded contents but I am specially mentioning them because they are one of the prime reasons for layout shifts, they usually load slow and change automatically. So whenever it loads it makes layout shifts. You can place your ads inside a <div></div> and give that div height and width of your ad. You should also use some placeholder preferably some custom ads cause many users these days use ad blockers so your ads place might look empty.
4. Preload fonts
Most of the websites these days use custom fonts for their websites. These fonts can cause layout shifts and also it is very annoying for users when fonts change after the content is loaded. There are two types of font loading issues: Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT).
Flash of unstyled text (FOUT): When you use custom fonts for your website it loads after some time when content loads. Before custom font loads default font gets visible and changes automatically after custom font load.
Flash of invisible text(FOIT): Sometimes default fonts won’t load and you see nothing until custom fonts get loaded and after the font gets loaded layout shifts to show the text.
To preload the fonts you can set “rel=preload” for your main font which can be added like this as shown in the link tag below.
<span style="font-weight: 400;"><link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin></span>
You can also use some plugins for this such as Autoptimize which is free to use, WP Rocket which is paid but has a lot of features.
5. Avoid dynamically injecting content
If you’re dynamically injecting content into your website like email opt-in forms, related content, GDPR notices, etc. you need to be careful to avoid layout shifts. It will be best if you never inject content dynamically unless the user interacts or clicks on a button to load that specific content.
6. Render blocking JavaScript like jQuery
WordPress includes jQuery as part of wp-includes in its folder. You can handle jQuery and other render-blocking scripts by catching them using plugins likeW3 Total Cache. But always make sure to properly test your site to avoid any broken layouts.
WordPress plugins to avoid Cumulative layout shifts
Now let’s know about plugins that can help us avoid Cumulative layout shifts. You can use different plugins to fulfill all the six things which are applicable to your site. We have mentioned those plugins in the above lines. The one-stop solution for all the six things is available in one paid plugin WP Rocket. The price of this plugin for a single website is $39, support for three websites at $99, and unlimited websites for $199.
Just after installing the WP Rocket it will start doing its work and optimize your website for faster load. But here are the few things that you must do to increase your CLS score.
- First enable lazy loading for your images, videos, and iframes/embedded. Also if you have YouTube videos on your site, use the WP Rocket setting to show preview images of these videos instead of iframes.
- Checkmark Add missing image dimensions to automatically add height and width in images to avoid layout shift.
- Preload all your website fonts with WP Rocket.
How to avoid Cumulative layout shifts in Elementor
Now let’s know how we can avoid Cumulative layout shifts while using plugins like Elementor. Plugins like Elementor provide a lot of cool and amazing options for the websites such as animation, custom content view, dynamic content loading, and so on. But while using these features you should always keep a few things in mind.
- Always test CLS after building site using Elementor
- Properly check templates before adding them to the page.
- Always check responsiveness for mobile, tabs, and desktop.
Recheck CLS
After doing all these changes confirm if it is working properly with the same tools as mentioned above. Also, keep checking it regularly since WordPress themes and plugins update regularly and with every update, they add some new features and these features can do unnecessary layout shifts on your website.
Check CLS score for every device
Another thing to keep in mind is that CLS score and layout shifts may occur differently on different devices such as mobile, tablet, and laptops. Also, many devices are launching in many different form-factors such as Galaxy Fold. So always try to test your CLS score on different screen sizes to properly optimize them for the best user experience.
Conclusion
Having a good CLS score and no unnecessary layout shifts can be really helpful for speeding up your website and creating a good user experience for your visitors. It is one of the crucial parts of website building and always keep a close eye on your website’s Cumulative layout shifts scores. If you have some more good suggestions about CLS scores let us know in the comment below.
Since you are reading this article to make your WordPress website faster I will highly recommend you to check out our articles on WordPress PageSpeed we have tried to include every possible option for boosting website performance and get a better rank on PageSpeed.
