How to improve your Divi website Cumulative Layout Shift scores and other GTMetrix and Google Page Speed scores.

While I was working hard on other projects, two of my clients (unrelated) were staring down the new GTMetrix and Google page speed scores and determined to whoop them. We’re talking about Cumulative Layout Shift (CLS), optimizing/combining/deferring Javascript and CSS, etc. Both had already done their research before contacting me ready to do battle.

With the combined research from both clients and my own, here’s what we did in a nut shell.

Keep in mind both are eCommerce sites with the Divi theme and each have about 50 plugins installed with only a few common ones. Each site is using a similar cPanel Apache/NGNIX server but a different web host, different server caching, and different CDNs. Meaning your server, plugin and Divi settings will need to be tweaked for your setup.

SITES:
TacunaSystems.com
ValetTickets.com

The first thing we did was optimize the images (Photoshop) that needed it and then paid for and installed the Smush Pro (ValetTickets) and Imagify (Tacuna) and optimized all the images in bulk. This got the page sizes down to a reasonable size.

Next, we removed all animations from all Divi modules. Apparently, this affects the CLS.

We removed areas that were hidden for tablet/mobile and optimized the Divi sections/rows/columns/modules more efficiently so they are always visible in some way. There are still some cases where we are hiding and showing things on different resolutions but we’ve kept it to a bare minimum. This helps with CLS.

We use a max of 2 Google fonts globally on Tacuna and just the one default Open Sans font on ValetTickets.

Deleted (not just disabled) all unused plugins. Believe it or not, I have seen disabled plugins affect both the front and back end of a web site.

Deleted all mega menu plugins. Then used the default Divi menu and added some custom CSS and small amount of jQuery to make the menus collapsible on both desktop and mobile. While the mega menu plugins are great, they cause huge CLS issues because of all the hidden areas and additional JS files they need to load.

We cleaned up and optimized all the custom CSS added to the sites over the years. For example, we had custom CSS doing things that Divi now does out of the box.

HUGE Divi Tip:
Since the beginning of (Divi) time, custom CSS is added to the Divi theme options/Custom CSS area. But, moving this to the Divi theme options/Integration/Header area and wrapping in a style tag substantially improves the CSL. No kidding! Don’t ask me to explain it but I’ve made this one and only change to a few sites and all their CLS scores improved. Try it now and let me know if you see the same!

Next, we paid for and installed the Hummingbird Pro (ValetTickets) and WP Rocket (Tacuna) cache plugins. Both allow deferring, combining, and/or not loading individual CSS and JS files specific to each plugin. Each has it’s own way of doing this and I’ve attached screen shots of the settings we used.

This is a very tedious process where we go thru each file manually and testing each setting, especially with the Hummingbird plugin. Caching can be a pain because you find yourself constantly doing hard refreshes, cache clearing, using different browsers, device testing tools, etc, to make sure you’re seeing what everyone else is. So, patience is a virtue here.

Next, we paid for the Hummingbird Pro (ValetTickets) and WP Rocket (Tacuna) CDNs and meticulously went thru each setting and made a few more setting changes. Sometimes the CDN will not load some files correctly so be very diligent with your testing. Again, patience is a virtue here.

Some notes about these specific sites:

Tacuna has at least 3 levels of caching going on. And, the boss is a very cool geek and has done some of his own tweaking on the server and CDNs that also help with the scores.

ValetTickets has at least 2 levels of caching including the paid WP Rocket CDN. The web host server (InMotion) does have it’s own proprietary caching system which is pretty darn good. And their support staff has been great help with optimizing the server for speed, security, and even some items that appear in the GTMetrix and Google Page Speed issues.

On the ValetTickets site we are using the auto generated WebP images option in the Smush Pro plugin and served from their servers.

TIP:
Some Divi scripts cannot be deferred without it affecting the overal visual (even though it will give you better scores). Same goes for the main jQuery JS file.

TIP:
You need to be very careful with the WooCommerce and/or Woo plugins making sure they load on the pages they are supposed to and if deferring them works on your site.

TIP:
Sometimes you may think a certain plugin would not affect the overall page layout if their JS/CSS is deferred. You’d be surprised how many times I’ve encountered this. So, make sure you test all plugins and take your time with this piece. Test all the critical points (header, menus, footer, category pages, product pages, add to cart, cart, checkout, blog, contact forms, etc.). Then, move on to the next plugin and test everything again. Have I mentioned having patience is important?

TIP:
After you’ve done a bit of work, especially on the deferring of JS/CSS, log out and take a 30 minute break. Then, come back and clear your browser cache and check all the pages again without logging in just to make sure you’re looking at a fresh copy and everything still looks correct and functioning properly. I’ve had many occasions where the site got all whacked out and I had to back peddle a few settings, take another break and test again. Sometimes things get stuck in the cache, (browser, server, or CDN) and then start to do funny things. Again, patience is a virtue here.

If you have the same experience I had, the GTMetrix and Google Page Speed scores will fluctuate and drive you nuts. Especially if you’re clearing caches as much as I was. Ultimately, you will see small increments of improvement which should help with your motivation as you’re going thru each step. Then, once you turn on the paid CDN options, (and refresh a few times), you should see a huge jump in your scores and all your hard work will feel SO worth it!

Lazy loading is one of the recommended things to do for better CLS. It works on the Tacuna site. However, on the ValetTickets site we found this feature on the Smush Pro plugin to actually slow things down and get worse GTMetrix and Google page speed scores. Note, it did seem to help the scores when the CDN was turned off. But, once we enabled the CDN, turning off the lazy load feature worked the best.

More Notes and Tips:

On the Tacuna site, we started our testing on a staging domain but found the scores changed on the live domain (typically got better than staging) after we’d migrate a change. This is before using the CDNs or any of the paid plugin options. So, IMO it’s best to setup as much as you can on a staging site and migrate those changes to live. Then, pay for and upgrade the plugins on the live site and make your final tweaks there, even though it’s going to stress you out until you’re confident it’s working properly.

TIP:
Tracking scripts including Google Analytics, AdWords, Tag Manager, Facebook Pixel, Klaviyo, Bing, and any other type of tracking can really slow down a site. We should all appreciate the irony of Google Page Speed showing their own tracking scripts as being a page speed issue. So, try to keep your tracking scripts to a minimum.

TIP:
Another thing that can tank your page load time is live chat. Make sure you’re online and using the live chat during business hours and respond to messages left after hours. If it’s paying off for you in terms of conversions, then keep doing what you’re doing. Otherwise, get rid of the live chat and make obvious call to action buttons to contact you.

TIP:
Embedding YouTube videos can also slow down your site. If possible, stream your (optimized) video from your server instead. This way all the YouTube tracking and JS files won’t load. Optimizing your videos is another topic.