Home SEO Fixing Cumulative Layout Shift (CLS) in WordPress

Fixing Cumulative Layout Shift (CLS) in WordPress

46
Fixing Cumulative Layout Shift (CLS) in Wordpress
Fixing Cumulative Layout Shift (CLS) in Wordpress

There are many web developers and admins who were hit with the new web vitals update which was run by Google’s new algorithm core update back on May the 5th 2020. After loads of testing and looking around our cumulative layout shift was simply above the 0.25s for mobile and desktop.

 

What is Cumulative Layout Shift?

This is mainly linked to how the webiste operates and if any iframes, objects, images, divs, javascript, or anything else that has the possibility to move on the website, shifts right after the website has been loaded, forcing the user to accidentally and potentially click on the wrong link. You can check your CLS results using google webmaster tools.

 

What is the main cause or trigger for the commutative layout shift (CLS)?

Many WordPress users will experience this issue by simply deferring any javascript or CSS right to the end after loading their website, any deferred javascript which may include images or ADS will trigger commutative layout shift (CLS), its important to test all deferred javascript files and CSS to make sure that anything deferred is not effecting the layout shift.

 

Check out our optimization results below, as you can see the CLS issue (Cumulative Layout Shift) has been fixed.

CLS has different data/results stored for google including mobile and desktop devices, CLS will have dramatic effects on search engine website rankings in the near future and it’s advised that webmasters take actions now, CLS will be an SEO factor from 2021 and onwards and will be used for website/page rankings in search engines.

Fixing Cumulative Layout Shift (CLS) in WordPress (desktop)
Fixing Cumulative Layout Shift (CLS) in WordPress (desktop)

 

Fixing Cumulative Layout Shift (CLS) in WordPress (mobile)
Fixing Cumulative Layout Shift (CLS) in WordPress (mobile)

As you can see it took 47 days for the changes to have full effects on our webpages, overall 168 pages were effects with CLS shift and this was resolved.

What have we done to fix this issue?

By applying WP-rocket and Cloudflare we fixed the CLS Commulative layout shift issue, we also disabled google ads from running as deferred in javascript option on WP-rocket. (disable javascript deferred to prevent this)

  1.  First of all, we installed a WP-rocket on our website, get WP-rocket here, its one of the top caching and optimization plugins you can use for WordPress. WP-rocket is indeed much better & faster than any other cache and optimization plugins available for WordPress, this test included LiteSpeed cache plugin, W3 total cache, WP super cache, WP fastest cache, hyper cache, and the list goes on. Wp-rocket is easy to use and you can simply enable many advanced website optimizations features with just a click of a button.
  2. Enabled Cloudflare on your website (you will need to update your domain nameserver for this), it’s free to use, has great minifying CSS, HTML and javascript options will protect against DDOS attacks and speed up your website loading time [do not enable Rocket-Loader, it has nothing to do with wp-rocket and also do not enable Mirage compression] follow the settings of WP-rocket for Cloudflare integration (Cloudflare integrates with WP-rocket and the setting up is very easy, by using simple one-line code API which copies and pastes into WP-rocket, follow the WP-rocket step by step guide on this, takes no more than 5 minutes)

How can you test CLS (cumulative layout shift) on desktop and mobile?

You can test your website on both devices by using CLS using Google page speed insights

Test CLS using Google page speed insights
Test CLS using Google page speed insights

You want to make sure that the lab data at the bottom shows CLS of anything lower than 0.25 sec, anything above that will have a negative effect on your SEO and website rankings in the near future.

Use Google page speed insights now – click here