In this article:
Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor. And when optimized with W3 Total Cache your website will look fantastic and have fantastic performance!
With the steps below we will show you how to optimize your Divi-built website with W3 Total Cache for your website’s best performance!
Baseline: Divi Web Hosting with Defaults
The first step is to install Divi and build the website. For this guide, we used a Divi Template for a Web Hosting service, and made some modifications to suit our needs. Once the website is built we performed tests on GTMetrix and Google PageSpeed Insights:
Install and configure W3 Total Cache
Once the tests are performed, go to your WordPress dashboard and navigate to Plugins > Add new and search for W3 Total Cache.
The configurations shown here will work in all shared hosting environments. If you are using a more powerful platform like a VPS you can use a memory-based caching solution for Object Caching and Database caching if the database is a bottleneck of your website performance.
- In General Settings, enable Page Cache and select Disk: Enhanced for the cache control method.
- Enable Minify, set the mode to Auto, and use Disk for the caching method.
- Use these settings for Minify > General
- Enable Rewrite URL structure
- Enable Disable minify for logged in users
- Use these settings for Minify > HTML & XML:
- Enable HTML Minify
- Enable Inline CSS Minification
- Enable Inline JS Minification
- Use these settings for Minify > JS:
- Enable JS minify settings
- Before </head> select Non-blocking using “defer”
- After <body> with Non-blocking using “defer”
- Select Combine & Minify
- Use these settings for Minify > CSS:
- Enable CSS minify
- Enable Eliminate render-blocking CSS by moving it to the HTTP bodyGet Premium to enable this feature.
- In General Settings, add the following:
- Enable Object Cache using Disk
- Enable Browser Cache
- In Performance > Browser Cache, use the following settings:
- In the General, CSS & JS, HTML & XML, Media & Other Files sections, use these settings:
- Set Last-Modified header
- Set expires header
- Set cache control header
- Set entity tag
- Enable HTTP (gzip) compression
- Don’t set cookies for static files
- Set CSS & JS expires header to 31536000 seconds (one year)
- Set HTML & XML expires header to 3600 seconds (one hour)
- Set Media & Other files expires header to 31536000 seconds (one year)
- Back in General Settings, enable Lazy Load Images and Disable Emoji in the User Experience section.
- Configure An Asset CDN
- Configure a Content Delivery Network, or CDN, to serve all the static assets from the CDN. In this example, we’ll be using Stackpath as our CDN, though the steps will be similar for most others. First, log into your CDN and create credentials.
- Configure W3 Total Cache and Stackpath CDN accordingly
- Next, navigate to Performance > General and set the CDN Type to Stackpath (recommended). Save your changes, then navigate to Performance > CDN. Then enable the following settings:
- Host attachments
- Host wp-includes/files
- Host theme files
- Host minified CSS and JS files
- Add Canonical Header
Make sure to save all settings and purge the cache after the configuration is completed.
Speed Test Results
As you can see the results of the optimization are fantastic!
Divi Builder is a very powerful tool that uses a lot of JS to build your pages. To avoid any issues with Divi Builder Please disable Minify for logged in users in Performance > Minify> Disable Minify for logged in users and also make sure that page caching is disabled for logged in users in Performance > Page Cache > Don’t cache pages for logged in users
W3 Total Cache
You haven't seen fast until you've tried PRO
Full Site CDN + Additional Caching Options
Advanced Caching Statistics, Purge Logs and More
Everything you need to scale your WordPress Website and improve your PageSpeed.