Google pushes webmasters to implement all measures needed for improving the page loading speed. The page loading speed of your website is measured based on few parameters as you can see in the Google PageSpeed Insights tool. Cumulative Layout Shift (CLS) is one of the speed measurement criteria of Core Web Vital. This is an important factor not only to improve the speed but also for better user experience. In this article, we will explain various reasons for CLS issue and how to fix cumulative layout shift error in WordPress.
What is Cumulative Layout Shift?
Before reading further, it is necessary to understand what is CLS. In simple terms, this is a shifting in content layout that causes poor user experience. For example, you are about to click a button on a page and suddenly a banner image loads above and pushes the button down. Ultimately, you will end up in clicking the image unintentionally which may take you to another page. This is a very bad user experience and Google has a good explanation in this article which you can read further.
Related: How to enable image lazy loading in Google Chrome?
Checking Cumulative Layout Shift Error
Open Google PageSpeed Insights (PSI) tool and check the speed of your webpage. You can check the field data or origin summary to confirm the cumulative layout shift problem is existing on your site. You can hover over the progress bar to find the cumulative percentage of loading in which the problem exists on the page / site.
In order to find the elements causing problems, scroll down to the diagnostics section and check under “Avoid large layout shifts”. Here, Google will show the list of elements causing layout shift on the tested page.
Check Details in Google Search Console
You can view the page URLs with CLS problem in your Google Search Console account. After logging into your account, go to “Core Web Vitals” section under “Enhancements” section. You can find the reports for both mobile and desktop to view the pages with “CLS issue: more than 0.25 (mobile) / (desktop)”.
Click on the issue to view the sample URL on your site affected with CLS problem and the average CLS time. Google will consider CLS is a problem as per the below table:
| Good | Needs Improvement | Poor |
| <0.1s | 0.1 to 0.25s | >0.25s |
Therefore, you must target to reduce the CLS time less than 0.25 seconds in order to make this green/yellow in PSI tool and remove the errors from your Search Console account.
Fix Cumulative Layout Shift Error in WordPress
Here are some of the factors that can cause cumulative layout shift delay in WordPress site. Let us explain each of the problem and possible solutions in detail.
1. CSS Delivery Optimization
As you see in the above screenshot of “Avoid large layout shifts”, the first item is “<div class=”row footer-row”>”. This is surprising as there is no possibilities of loading footer section in above the fold area. After checking, we understood this is due to “Optimize CSS delivery” option enabled with WP Rocket plugin. This option will generate critical CSS and inline it on header section to remove render blocking CSS. However, it will lead to cumulative layout shift problem in many cases. If you are using WP Rocket or any other caching plugin for inlining CSS in the header, disable that option and check whether helps to improve the CLS delay.
2. AdSense and Other Advertisement Scripts in ATF
Many publishers use Google AdSense or other ad network to monetize their online content. You have to insert a piece of JavaScript ad code on your webpage in order to show advertisements. Generally, you have to insert the ad code in above the fold (ATF) area to increase the ad visibility and revenue. However, this will directly affect the page loading speed and create cumulative layout shift error in Google PageSpeed Insight (PSI) tool.
After completely loading above the fold content, your advertisement will start loading and pushing the content down.
There are few option to fix this issue. One is to defer the ad script in WordPress using plugins like WP Rocket. However, this will impact your ad impression and click through rate thus reducing the overall earnings.
Second option is to use fixed width ads on above the fold area as Google recommends. Unfortunately, Google also make it clear that using fixed width is not possible with responsive or fluid ads.
It’s not possible to reserve space for these slots prior to requesting ad content, and fluid sized ads always cause layout shifts. To mitigate the effects of layout shifts when working with fluid ad slots, we recommend the following: Only use the fluid size for slots below the fold.
Google
Therefore in summary, you can’t fix the problem unless you remove the external ad code from ATF area. This is true for any other third-party code you have placed in the header section of your site.
3. Use Proper Image Dimensions
This is similar to using fixed with advertisements. When you do not have image dimensions, browsers will wait for the images to load and push the content below causing layout shift issue. Fortunately, this is not a problem as WordPress will automatically add dimensions to images when uploading through post editor. However, you need to manually add height and width parameters to img tag if you are manually inserting images using “Custom HTML” block, “Edit as HTML” function or the logo image. In addition, define fixed width and height when embedding videos and iframes from third-party websites.
4. Fonts Delaying Content Loading
Every website uses fonts. This will create cumulative layout shift problem especially when using third-party services like Google fonts. Since, Google fonts need to load from external servers, it will create similar cumulative layout shift problem like ad code. You can also see this problem in PSI as “Ensure text remains visible during webfont load” indicating there is a delay in loading of visible content.
- The effective way to resolve this problem is to use a caching plugin to preconnect and DNS prefetch domains like fonts.googleapis.com and fonts.gistatic.com domain. This will help you to speed up the font loading by preconnecting Google fonts server. SG Optimizer, WP Rocket (automatic) and many other plugins offer this feature which you can make use for this purpose. In addition, you can limit the number of font families and weights reduce the size of downloading file.
- Other option is to use system fonts or host the font files on your server. For example, themes like GeneratePress and Astra allow you to choose system font for your site.
- At any case, make sure to preload fonts to eliminate preload key request warning which can also cause cumulative layout shift delay.
5. Font Icons in Menu and ATF
Many WordPress themes use font icons in the navigation area for showing sub-menu items. Generally, these icons are included from third party websites like font awesome or icomoon. This will create similar problems like fonts and increase cumulative layout shift time. Themes like GeneratePress allows you to choose SVG icons instead of fonts for the navigation menu. Similarly, on Astra theme you can disable loading the font library using a custom function. In this way you can improve the cumulative layout shift problem in WordPress. However, you will have no option other than disabling sub-menu items in most other themes which is not a good solution.
6. Lazy Loading Image Logo
Webmasters misunderstand the PSI warning on “Defer offscreen Images”. This warning occurs when you don’t lazy load images available in below the fold (BTF) content. However, if you use a plugin in WordPress, all images with HTML <img> tag will be wrapped inside the lazy loading script. This includes image logo which is part of above the fold (ATF) content area. Lazy loading ATF logo image will result in cumulative layout shift problem.
In order to reduce CLS time in PSI tool, you need to exclude logo image from lazy loading. The solution depends on the plugin you use for lazy loading your images. For example in WP Rocket, go to “Media > LazyLoad” section and provide logo name or URL to exclude from lazy loading.
7. Lazy Loading Image Sliders in ATF
Similar to image logo, you will see high cumulative layout shift time when you have image sliders in above the fold area. You can exclude the slider images from lazy loading and test it helps to reduce the CLS time.
Related: 25 SEO tips to rank up your WordPress site.
8. Render blocking JavaScript like jQuery
Final topic is the popular render blocking JavaScript due to jQuery based themes. In fact, WordPress also includes jQuery as part of wp-includes folder. You can defer jQuery and other render blocking scripts on your page using a caching plugin like W3 Total Cache. However, make sure to test your site thoroughly to avoid broken layouts.
Validating Fix in Google Search Console
After fixing the problem, make sure to submit your validations in Google Search Console account. You can go back to the “Core Web Vitals” section and submit validations for the entire site.
This will take up to 28 days for Google to check the CLS issue on your site and show the corresponding results in Search Console account.
Conclusion
As you can see the major reason for cumulative layout shift error in WordPress is due to placing render blocking scripts in above the fold content area. It could be advertisement codes, jQuery, fonts, icons or any other stuff. The solution to overcome this issue is to use simple minimalistic themes like GeneratePress or Astra. On other hand, you can use caching plugins to preconnect, and combine font files to reduce the cumulative layout shift time.
Leave a Reply
Your email is safe with us.