{"id":32740,"date":"2021-01-12T13:35:23","date_gmt":"2021-01-12T18:35:23","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=32740"},"modified":"2024-12-05T10:09:35","modified_gmt":"2024-12-05T15:09:35","slug":"divi-w3-total-cache-guide","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/w3-total-cache\/divi-w3-total-cache-guide\/","title":{"rendered":"How to Configure Divi and W3 Total Cache"},"content":{"rendered":"\n

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!<\/span><\/p>\n

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!<\/span><\/p>\n

Baseline: Divi Web Hosting with Defaults<\/span><\/h2>\n
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:<\/span><\/p>\n
<\/p>\n
$\"Before$ <\/a>
Before W3TC is configured, scores are between 36 and 57<\/figcaption><\/figure>\n
Install and configure W3 Total Cache<\/span><\/h2>\n
Once the tests are performed, go to your WordPress dashboard and navigate to Plugins > Add new<\/strong> and search for W3 Total Cache.<\/span>
\n<\/span>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.<\/span><\/p>\n
\n
In General Settings,<\/strong> enable Page Cache<\/strong> and select Disk: Enhanced<\/strong> for the cache control method.<\/span><\/li>\n
Enable Minify<\/strong>, set the mode to Auto<\/strong>, and use Disk<\/strong> for the caching method. $\"JS$ <\/a><\/span><\/li>\n
Use these settings for Minify > General<\/strong>\n
\n
Enable Rewrite URL structure<\/strong><\/span><\/li>\n
Enable Disable minify for logged in users<\/strong><\/span><\/li>\n<\/ul>\n<\/li>\n
Use these settings for Minify > HTML & XML:<\/strong>\n
\n
Enable HTML Minify<\/strong> <\/span><\/li>\n
Enable Inline CSS Minification<\/strong><\/span><\/li>\n
Enable Inline JS Minification<\/strong><\/span><\/li>\n<\/ul>\n<\/li>\n
Use these settings for Minify > JS<\/strong>:<\/span>\n
\n
Enable JS minify settings<\/strong><\/span><\/li>\n
Before <\/head> select Non-blocking using “defer”<\/strong><\/span><\/li>\n
After <body> with Non-blocking using “defer”<\/strong><\/span><\/li>\n
Select Combine & Minify<\/strong><\/span><\/li>\n<\/ul>\n<\/li>\n
Use these settings for Minify > CSS:<\/strong>\n\n
Enable<\/strong> CSS minify<\/span><\/li>\n
Enable Eliminate render-blocking CSS by moving it to the HTTP body<\/strong><\/span>Get Premium to enable this feature.<\/a><\/li>\n<\/ul>\n<\/li>\n
In General Settings<\/strong>, add the following:<\/span>\n
\n
Enable<\/strong> Object Cache using Disk<\/strong><\/span><\/li>\n
Enable<\/strong> Browser Cache<\/span><\/li>\n<\/ul>\n<\/li>\n
In Performance > Browser Cache<\/strong>, use the following settings:<\/span>\n
\n
In the General, CSS & JS, HTML & XML, Media & Other Files sections, use these settings:<\/span><\/li>\n
Set Last-Modified header<\/span><\/li>\n
Set expires header<\/span><\/li>\n
Set cache control header<\/span><\/li>\n
Set entity tag<\/span><\/li>\n
Enable HTTP (gzip) compression<\/span><\/li>\n
Don’t set cookies for static files<\/span><\/li>\n
Set CSS & JS expires header to 31536000 seconds (one year)<\/span><\/li>\n
Set HTML & XML expires header to 3600 seconds (one hour)<\/span><\/li>\n
Set Media & Other files expires header to 31536000 seconds (one year)<\/span><\/li>\n<\/ul>\n<\/li>\n
Back in General Settings<\/strong>, enable Lazy Load Images<\/strong> and Disable Emoji<\/strong> in the User Experience<\/strong> section.<\/span><\/li>\n
Configure An Asset CDN<\/span><\/li>\n
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 <\/span>create credentials<\/span><\/a>.<\/span><\/li>\n
Configure<\/span><\/a> W3 Total Cache and Stackpath CDN accordingly<\/span><\/li>\n
Next, navigate to Performance > General<\/strong> and set the CDN Type to Stackpath (recommended)<\/strong>. Save your changes, then navigate to Performance > CDN<\/strong>. Then enable the following settings:<\/span>\n
\n
Host attachments<\/strong><\/li>\n
Host wp-includes\/files<\/strong><\/li>\n
Host theme files<\/strong><\/li>\n
Host minified CSS and JS files<\/strong><\/li>\n
Add Canonical Header<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
Make sure to save all settings and purge the cache after the configuration is completed.<\/span><\/p>\n
Speed Test Results<\/h2>\n
$\"\"$ <\/a><\/p>\n
<\/p>\n
As you can see the results of the optimization are fantastic!<\/span><\/p>\n
Important notes<\/span><\/h3>\n
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<\/strong> 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<\/strong><\/span><\/p>\n
<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1294,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[738,692],"tags":[],"class_list":["post-32740","post","type-post","status-publish","format-standard","hentry","category-w3tc-getting-started","category-w3-total-cache"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/32740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/1294"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=32740"}],"version-history":[{"count":13,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/32740\/revisions"}],"predecessor-version":[{"id":32903,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/32740\/revisions\/32903"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=32740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=32740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=32740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Speed Test Results<\/h2>\n<\/a><\/p>\n <\/p>\nAs you can see the results of the optimization are fantastic!<\/span><\/p>\n

Speed Test Results<\/h2>\n
$\"\"$ <\/a><\/p>\n
<\/p>\n
As you can see the results of the optimization are fantastic!<\/span><\/p>\n