Last updated on

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:

 

Before W3TC is configured scores are between 36 and 57
Before W3TC is configured, scores are between 36 and 57

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.JS Minify Settings
  • 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:
  • 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!

Important notes

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.

8 thoughts on “How to Configure Divi and W3 Total Cache

  1. Sind diese Einstellungen für DIVI immer noch aktuell? Im August hatte DIVI ja ein neues Leistungsupdate veröffentlicht und es wäre interessant zu erfahren, ob die hier vorgestellte Konfiguration weiterhin so verwendet werden kann?

    • Hello Joanna,

      I can confirm that these optimization settings are still valid. If you are using some Performance optimizations via the Divi settings, you should disable those and let W3 Total Cache take care of the website optimization. If you have any problem with the optimization and configuration, please make sure to open a new forum topic so we can take a closer look
      Thanks!

      • Vielen Dank für die Antwort!
        Ich habe mich bisher nicht an WP3 herangetraut, es ist ein mächtiges Werkzeug und ohne eine “Anleitung” hätte ich es für DIVI allein nicht konfigurieren können.
        Ich werde dann morgen starten und hoffe, dass ich nichts kaputt mache an meiner Seite. Für den Notfall habe ich ja ein Backup…

  2. Hi,

    I have noticed some compatibility issues of W3 Total Cache with Divi after the latest updates

    For example, the tutorials they provide on the ET blog to configure hamburger menu in desktop only work if you disable the plugin, as well as WooCommerce products appearing in fewer numbers per line and therefore getting too big, so only works if you disable the plugin

    Before everything worked perfectly, it’s my favorite cache plugin to work with Divi

    I saw that the last update of the post was on January 12th, 2021. Will it be revised? I would love to keep the plugin active 🙂

    • Hello Lethicia-

      Thanks for the link! We’ll check out the newest performance features and revise this guide as soon as we can.

Leave a Reply

Your email address will not be published.