Improve divi page speed load times

Improve Divi Page Speed Load Times

After seeing numerous posts on Divi related Facebook groups and websites about Divi page speed load times I thought I would experiment on how to improve the loading time. I did quite a bit of research and have published the steps you need to action below. The most important factor for Divi page speed load times (as with any other theme) comes down to your website hosting specifications. I have explained further on this point below.

I hope these instruction can help you improve your Divi websites load faster.

Speed Testing Websites

You can test the speed of your site at the following websites. Why not test your site and then re-test after applying the options I’ve listed below to see how much improvement is made for your site.

1. 1. Google PageSpeed Insights
   2. GTMetrix Create a free account to select a different location country to test from.
   3. Pingdom

Before & After Divi Page Speed Test

I ran before and after page speed tests on a Divi website I built. The website in question is Protea Homes.

BEFORE OPTIMISATION RESULTS

Google PageSpeed Insight 
Mobile Score: 27
Desktop Score: 58

GTMetrix
Page Speed Score: 89%
YSlow Score: 69%
Fully Loaded: 3.8 seconds
Total Page Size: 2.73MB
Requests: 96

Pingdom
Performance Grade: 72
Page Size: 2.9MB
Load Time: 1.74 MS
Requests: 98

AFTER OPTIMISATION RESULTS

Google PageSpeed Insight 
Mobile Score: 41
Desktop Score: 73

GTMetrix
Page Speed Score: 93%
YSlow Score: 82%
Fully Loaded: 4.9 seconds
Total Page Size: 2.77MB
Requests: 82

Pingdom
Performance Grade: 82
Page Size: 3.0MB
Load Time: 618 MS
Requests: 84

Update WordPress, Plugins & Translations

Create a backup of your website. I use All-in-One- WP Migration.

1. In your WordPress website go to Dashboard / Updates
2. Update all plugins, WordPress operating system and any new translations that are available.
3. Check your plugin list. Do you really need them all? If there are any plugins that can be deleted get rid of them.
4. Delete any unused themes.

Check Your PHP Configuration

1. Login to your website CPANEL. This is the control panel for your web hosting account (not your website).
2. Scroll down to the Software section and click MultiPHP INI Editor.
3. In the next window select your website domain.
4. * Make a note of the existing settings in case you need to revert back.
5. Use these PHP settings:
   max_execution_time 300
   max_input_time 180
   max_input_vars 3000
   memory_limit 512M
   post_max_size 64M
   upload_max_filesize 64M
   zlib.output_compression Disabled. (I leave this disabled so I can use W3 Total Cache plugin later on).
6. Click Apply.

Note: Your hosting company may have restrictions on these values. Ask them to assist by increasing these values.

Set PHP Version to the latest

1. Next click the home icon in CPANEL.
2. Scroll down to the Software section and click MultiPHP Manager.
3. Set your PHP version to PHP 7.3 (alt-php73). (This is the most current version at time of writing).
4. Click Apply.

Compress All Content

1. Click the home icon in CPANEL.
2. Scroll down to the Software section and click Optmize Website.
3. Check: Compress All Content.
4. Click Apply.

Server Specification & Information

1. While in CPANEL, it’s possible to check your server information.
2. In the right hand column click the link ‘Server Information’.
3. This will display the specification of your server.
4. If your website is on a shared or reseller server, it’s possible that another website on that server may be using up a lot of resources such as CPU processing. The only way around this, is to move your site to it’s own web hosting account with its own resources.

A good server specification would be:

1. 50GB RAID NVMe Storage. 12x Faster than an SSD server.
2. Unlimited Bandwidth
3. Powered by CPANEL & Litespeed
4. 6GB Memory Limit
5. 300%+ Core CPU Limit
6. I/O Speed 10 MB/s.

WordPress & Divi System Check

1. Log back into your WordPress website.
2. In the lefthand column click Divi  / Support Center
3. Under System Status ensure everything meets or exceeds Divi’s requirements.
4. Next go to Tools / Site Health.
5. See if there is anything here you need to address.

Divi Configuration

We should only use the Latest Divi Builder Experience to speed up Divi. This means disabling the Classic Builder.

Nick Roach said:
Be sure to switch to the new Divi Builder experience. The Classic Builder is getting slower with age. It’s built on old technology that isn’t meant to scale. The new Divi Builder experience is the default experience for Divi and is only active if you have chosen not to switch on an old website. It’s faster and comes with years of new features – Nick Roach

1. Click Divi / Theme Options
2. Click Builder / Advanced
3. Disable the Classic Builder.

If you want the ‘classic builder’ look you can always enable Wireframe mode when making edits.

WordPress Configuration

Click Settings / Reading.
For each article in a feed, show: Check Summary.

Click Settings / Discussion.
Check: Break comments in pages with 50 top level…

Click Settings / Media.
Un-check: Organise my uploads into month- and year-based folders.

I prefer to organise my media content using WP Media Folder so the system doesn’t create lots of folders that over time take up disc space.

Optimise Background Processes
You may have some plugins that perform functions in the background. If possible set these plugins to perform their function at a time (such as 4am) when there is less traffic on your server.

Limit post revisions to 4.
Using FTP download and edit your wp-config.php file.
Add this code:

define( ‘WP_POST_REVISIONS’, 4 );

This code will limit WordPress to only save your last 4 revisions of each post or page, and discard older revisions automatically.

Optimise Your WordPress Database

1. Before you do anything make a complete WordPress backup of your site.
2. I like to use All-in-One WP Migration.
3. Then if anything goes wrong, we can easily revert back.

You can also backup your database from within your web hosting CPANEL.

1. Click phpMyAdmin.
2. This will open up a new tab.
3. In the left column, select your website database.
4. From the top menu click Export.
5. In the next window just click Go.
6. Save the file to your computer.
7. When complete close this tab to avoid any accidents 🙂

Install WP-Sweep plugin and activate

1. Next click Tools / Sweep.
2. Go through the sections and Sweep stuff.
3. Check your site to ensure everything looks okay.

Optimise Images Used In Your Website

1. Install and activate plugin: Smush Image Optimization, Compression, and Lazy Load.
2. Click Smush / Dashboard and run through the setup.
3. Automatically optimize new uploads: Yes.
4. Strip my image metadata: Yes.
5. Enable Lazy Loading: Yes.
6. Allow usage data tracking: Yes.
7. Click Finish Setup Wizard.

In the next window that loads in you can view.

1. Click Enable Image Resizing and check the sizes are okay for you.
2. I just left the defaults. 2048px wide by 2048px high.
3. Click Save Changes.

In the left column take a look at each setting to ensure you are happy with it. I have left them set at their defaults.

1. On Smush Dashboard click Bulk Smush Now.
2. This will run through the process of optimising all the images on your website.
3. You need to keep this page open for the process to complete.
4. You may also need to press the resume button until all images have been optimsed.

I think I’ll be buying Smush Pro for unlimited sites at $19 per month.

Price Ref: https://havecamerawilltravel.com/photographer/wp-smush-image-optimizer-wordpress/

Remove Un-used Images From your Image Library

When you upload images to your website, WordPress create several copies in different size formats for use on the site. The problem is that many of these additional images are never used on your site and start bloating the amount of disc space your site is using.

Cleaning up your WordPress media library saves disk space on your hosting server and reduces backup file sizes (both of which will help you save cost). These extra images also increase your WordPress backup sizes, which means it would take longer to backup, transfer, and restore your website.

Note: Backup your website before running this task, just in case you delete any important images by mistake.

• Install and activate the Media Cleaner plugin.
• Upon activation, go to Media » Cleaner page to analyse your WordPress media library. The plugin may ask you to reset itself, during this process it will create a new table in your WordPress database to store data.
• After that, you need to click on the Start Scan button to run the media analysis.
• Media Cleaner will now look for files in your media library and inside your WordPress posts / pages. It will try and find the files that are in your media library but are not used on your website.

This may take a while depending on the size of your media library and the content you have.

Once finished, you’ll see a list of results. It will show you all the media files that are not currently in use on your website.

You can select the files that you don’t want to keep and delete them. You can also click on the Delete All button to instantly delete all unused media files.

Ref: https://www.wpbeginner.com/plugins/how-to-clean-up-your-wordpress-media-library/

Leverage Browser Caching

Leverage browser caching by adding this code to the bottom of your public_html folder .htaccess file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
</IfModule>
## EXPIRES CACHING ##

Only Load Scripts & CSS You Need

When I first published this article on the Divi Theme Users Facebook page, someone let me know about another plugin which really does make a big difference to the loading time of your Divi website.

The plugin is called Asset CleaUp: Page Speed Booster.

In short this plugin lets you choose the javascripts and CSS to load on each page.

For instance you may be using WooCommerce with Stripe but we don’t need the Stripe payment gateway loading on every page. This plugin allows you to control the pages scripts and CSS loads on, thus saving real CPU usage and load time. It takes a little time learning but you’ll notice the difference straight away when you start using it!

Control WordPress Heartbeat Callbacks

I have recently learned about WordPress Heartbeat.

WordPress Heartbeat API is built as a communication protocol between the browser and the server. It uses admin-ajax.php to send a request to the server and trigger events (or callbacks) when receiving data. The main features of the Heartbeat API are Auto Saving , Post Locking and Login Notification.

Heartbeat is controlled by a file called admin-ajax.php

When my site was maxing out on CPU usage I could see it was this file which was causing the issue.

• In CPANEL go to CPU and Concurrent Connection Usage.
• From here you can click the Snapshot tab.
• You can select the time your sites CPU usage was high which I did, and I could see that the culprit was indeed the admin-ajax.php file.

To fix and control the number of times Heartbeat calls back, you need to install another plugin!

Install Heartbeat Control and create the following rule.

• Heartbeat Behaviour: Modify Heartbeat.
• Locations: WordPress Dashboard, Frontend and Post.
• Frequency: 300
• Save Changes.

Install A Cache Plugin

Installing a cache plugin will definitely help speed up your site by deferring & minifying Javascript and CSS, removing white space from HTML and more.

I have tried using three different cache plugins. The one which I found the easiest to configure and cause least issues was LiteSpeed Cache plugin for WordPress listed at the end.

W3 Total Cache

W3 Total Cache is good but there are so many complex settings it’s insane. I stuffed this one up a few times and had to manually delete the plugin to log back into my website. After a few failed attempts following various instructions, I decided not to use it. That said, when you get the settings right it does a really good job.

Complete Guide to W3 Total Cache Plugin Settings
https://stylemixthemes.com/wp/guide-to-w3-total-cache/

Youtube video
https://www.youtube.com/watch?v=I2j-cVQ7MhI

How to Make WooCommerce Work with W3 Total Cache?
https://www.webnots.com/how-to-make-woocommerce-work-with-w3-total-cache/

WP Rocket
WP Rocket is another good paid cache plugin which is very easy to use. There are only a few settings so you can be set up in no time. I decided not to use the plugin because it caused strange URL re-write on my home page and also had some of my Divi image modules pull in strange background images. Basically, I couldn’t be bothered trying to work out why, or fix it.

https://docs.wp-rocket.me/

Litespeed Cache
Using LitesSpeed cache for WordPress is easy and effective. Your website needs to be hosted on a LiteSpeed server in order for you to use this plugin.

Install the plugin and watch my video to see the settings I have used.

Use A CDN

The final piece of the puzzle (if you want to) is to deliver your website via a Content Delivery Network (CDN). This will speed up the page load time of your site because your website will be delivered from servers closer to your visitors IP address.

CloudFlare is the most well known CDN so I explain how to set this up.

All that said my Australian web hosting company says:
We don’t really recommend CloudFlare because most people struggle with DNS, it’s easier for them to use our Name Servers as we can manage them. CloudFlare doesn’t peer with TPG, Telstra or Optus, thus if anyone on these networks accesses the site, they get routed from overseas.

If you would like to use CloudFlare please visit this link: https://www.cloudflare.com/

One point to bear in mind is that each caching plugin has a different way it connects and works with CloudFlare so you will need to refer tot he caching plugin documentation on this point.

Summary

What is really required to get a better Divi  page speed load time?

1. Only use plugins you really need.
2. Optimise WordPress & Divi settings.
3. Use correct image sizes and optimise those images using Tinypng.com
4. Always keep your website up to date.
5. Install a caching plugin.
6. Website hosting – the number 1 cause! After spending hours following other peoples tutorials and trailling You must have a good web hosting account that provides enough resources for a WordPress website & Plugins to function effectively. Even after making all the amends above, if you are on a shared web hosting server with limited resources your site will always load slow – period.

Recommended WordPress Website Hosting Requirements:

1. Free SSL or paid Commodo SSL.
2. 24 hour local support. Ticket or phone.
3. SSD storage or NVMe Storage.
4. Firewall.
5. Security.
6. DDoS Protection.
7. 300%+ CPU allowance (this really makes a difference).
8. Ask what their TTFB (Time To First Byte) is. Ideally this should be under 200ms.
9. Server location in your country.
10. Acronis hourly backups.
11. Latest version of PHP.

In short you are most likely going to pay between $20 – $40 AUD per month for this type of server.

References

Below is a list of website URL’s I referenced to create this document.

• https://www.youtube.com/watch?v=I2j-cVQ7MhI
• https://www.wpblog.com/speed-up-woocommerce-store/
• https://www.wpbeginner.com/wordpress-performance-speed/
• https://stylemixthemes.com/wp/guide-to-w3-total-cache/
• https://onlinemediamasters.com/why-is-wordpress-so-slow/
• https://www.searchenginewatch.com/2018/07/24/how-to-minimize-cpu-usage-in-wordpress/
• https://onlinemediamasters.com/reduce-cpu-usage-wordpress/
• https://www.hostinger.com/tutorials/how-to-fix-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content-on-wordpress
• https://www.webnots.com/how-to-make-woocommerce-work-with-w3-total-cache/
• https://wp-rocket.me/blog/how-to-reduce-ttfb-wordpress-site/
• https://quiroz.co/why-has-divi-become-so-slow/
• https://winningwp.com/wp-super-cache-w3-total-cache-or-wp-rocket/
• https://kinsta.com/learn/speed-up-wordpress/
• https://www.hostinger.com/tutorials/how-to-fix-admin-ajax-file
• https://kinsta.com/blog/admin-ajax/#targetText=The%20admin%2Dajax.php%20file%20itself%20is%20not%20a%20bad,and%20the%20server%20using%20AJAX.