{"id":31131,"date":"2020-11-11T11:15:26","date_gmt":"2020-11-11T16:15:26","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=31131"},"modified":"2024-12-05T10:09:39","modified_gmt":"2024-12-05T15:09:39","slug":"how-to-configure-avada-and-w3-total-cache","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/w3-total-cache\/how-to-configure-avada-and-w3-total-cache\/","title":{"rendered":"How to Configure Avada and W3 Total Cache"},"content":{"rendered":"\n

Avada by Theme Fusion is one of the most popular themes on the Envato Market, and the number 1 WordPress Performance plugin in the world makes it even better! The following article will walk you through the steps needed to manually configure W3 Total Cache to gain the maximum performance for your WordPress and Avada website.
\n $\"\"$ <\/a><\/p>\n

Baseline: Avada Charity with Defaults<\/h2>\n
$\"Avada$ <\/a><\/p>\n
The first step is to create a performance baseline to test our configurations against. In this example we have installed Avada with the Charity starter content set and are using the default performance settings. The resulting performance leaves a lot of room for improvement- Google PageSpeed Insights rates it as a 5 on mobile, and GTMetrix gives it a 20% Pagespeed Score, loading in about 4.6 seconds in our tests.<\/p>\n
$\"5$ <\/a>
Not pictured: 32 for Google PageSpeed Desktop, 70 on Pingdom<\/figcaption><\/figure>\n
Disable CSS and JavaScript Compilers<\/h2>\n
Avada has very good performance options built-in, but we’ll need to disable a few of them in order to use W3 Total Cache for even better performance. Particularly, the Dynamic CSS & JS options which offer the ability to Compile<\/strong> your CSS and JavaScript into a single file.
\nThe downside of using the built-in JavaScript and CSS Compilers is that they create a single large file which blocks loading of your website until they’re fully downloaded. Navigate to Avada > Options > Performance<\/strong> and Disable CSS Compiling, CSS Variables, and the JS Compiler. <\/strong>Avada has a TON of options, so you’ll likely have to scroll down to find it.<\/p>\n
$\"The$ <\/a><\/p>\n
Install and Configure W3 Total Cache<\/h2>\n
With the performance options provided in Avada disabled, we can now begin configuring W3TC to optimize the website response times. The configurations shown here will work in all shared hosting environments. If you are using a more powerful platform like a VPS there are some additional adjustments we can make to go even faster, but we’ll get to that later!<\/p>\n
\n
Enable Page Cache<\/strong> and select Disk: Enhanced<\/strong> for the cache control method. $\"Rewrite$ <\/a><\/li>\n
Enable Minify<\/strong>, set the mode to Auto<\/strong>, and use Disk<\/strong> for the caching method.<\/li>\n
Use these settings for the Minify > General<\/strong>:\n
\n
Enable Rewrite URL structure<\/strong><\/li>\n
Enable Disable minify for logged in users<\/strong><\/li>\n<\/ul>\n<\/li>\n
Use these settings for Minify > HTML & XML<\/strong>:\n
\n
Enable <\/strong>the main setting<\/li>\n
Enable Inline CSS Minification<\/strong><\/li>\n
Enable Inline JS Minification<\/strong><\/li>\n<\/ul>\n<\/li>\n
Use these settings for Minify > JS<\/strong>: $\"JS$ <\/a>\n
\n
Enable<\/strong> JS minify settings<\/li>\n
Before <\/head><\/strong> with Default (blocking)<\/strong><\/li>\n
After <body><\/strong> with Non-blocking using ‘defer’<\/strong><\/li>\n
Select Minify<\/strong>, not combine only<\/li>\n<\/ul>\n<\/li>\n
Use these settings for Minify > CSS<\/strong>\n\n
Enable<\/strong> CSS minify<\/li>\n
Enable Eliminate render-blocking CSS by moving it to the HTTP body<\/strong>Get Premium to enable this feature.<\/a><\/li>\n<\/ul>\n<\/li>\n
In General Settings<\/strong>, add the following:\n
\n
Enable Object Cache<\/strong> using the Disk<\/strong> method<\/li>\n
Enable Browser Cache<\/strong><\/li>\n<\/ul>\n<\/li>\n
In Performance > Browser Cache<\/strong>, add the following settings:\n
\n
In the General, CSS & JS, HTML & XML, Media & Other Files<\/strong> sections, use these settings:\n
\n
Set Last-Modified header<\/strong><\/li>\n
Set expires header<\/strong><\/li>\n
Set cache control header<\/strong><\/li>\n
Set entity tag<\/strong><\/li>\n
Enable HTTP (gzip) compression<\/strong><\/li>\n
Don’t set cookies for static files<\/strong><\/li>\n<\/ul>\n<\/li>\n
Set CSS & JS expires header to 31536000 seconds <\/strong>(one year)<\/li>\n
Set HTML & XML expires header to 3600 seconds<\/strong> (one hour)<\/li>\n
Set Media & Other files expires header to 31536000 seconds<\/strong> (one year)<\/li>\n<\/ul>\n<\/li>\n
Back in General Settings<\/strong>, enable Lazy Load Images<\/strong> and Disable Emoji <\/strong>in the user experience section.<\/li>\n
Navigate to Performance > User Experience $\"\"$ <\/a><\/strong>\n
\n
Add the line background-image<\/strong> to the Exclude Words<\/strong> list.<\/li>\n
\n
Don’t skip this step! Avada background images do not work if they are lazy-loaded.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Test Page Speed with Avada and W3 Total Cache Configured<\/h3>\n
Now that we’ve configured all the settings for W3 Total Cache, let’s take a step back and see how much the site has improved.<\/p>\n
$\"\"$ <\/a>
Not pictured: 26 for Google Pagespeed Mobile, 88 for Pingdom<\/figcaption><\/figure>\n
Not bad! We’ve already shaved off 3 full seconds from the GTMetrix report, and more than doubled the Google PageSpeed Insights score.<\/p>\n
Configure An Asset CDN<\/h2>\n
The results so far have been extremely good, but we can still do better by configuring a Content Delivery Network, or CDN, to serve all the static assets from Avada and W3 Total Cache. In this example, we’ll be using Stackpath<\/strong> as our CDN, though the steps will be similar for most others. First, log into your CDN and create credentials<\/a>.<\/p>\n
Next, navigate to Performance > General<\/strong> and set the CDN Type <\/strong>to Stackpath (recommended)<\/strong>. Save your changes, then navigate to Performance > CDN<\/strong>. Then enable the following settings:<\/p>\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
Save your changes once more, and you’ll be prompted to authorize the connection to Stackpath. Enter in the credentials you created and your hostname will automatically populate with your edge domain from Stackpath.<\/p>\n
Let’s check our speed again now that the asset CDN is configured.<\/p>\n
$\"\"$ <\/a>
Not pictured: 32 on mobile Google PageSpeed, 88 on Pingdom<\/figcaption><\/figure>\n
We’ve seen a mildly improved PageSpeed Insights score, a big improvement in the YSlow Score, and best of all, with an Asset CDN we’ve sped up the site for visitors geographically distant from our server.<\/p>\n
Configure CDN Full-Site Delivery<\/h2>\n
Our final step is to enable full-site delivery. Upgrade to W3 Total Cache Pro<\/a> to enable full-site delivery through your CDN. Full site delivery will make your site even more performant around the globe, and will reduce the load on your server. Let’s see what the scores are now for Avada and W3 Total Cache.<\/p>\n
Final Speed Test with Avada and W3 Total Cache and Stackpath Full Site Delivery<\/h3>\n
$\"Full$ <\/a><\/p>\n
<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
Avada by Theme Fusion is one of the most popular themes on the Envato Market, and the number 1 WordPress Performance plugin in the world makes it even better! The following article will walk you through the steps needed to manually configure W3 Total Cache to gain the maximum performance for your WordPress and Avada […]<\/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":"Optimize Avada and W3 Total Cache","bgseo_description":"Avada is one of the most popular themes available for WordPress. Learn how to make it one of the fastest themes available with Avada and W3 Total Cache","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[738,692],"tags":[],"class_list":["post-31131","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\/31131","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=31131"}],"version-history":[{"count":23,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/31131\/revisions"}],"predecessor-version":[{"id":150213,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/31131\/revisions\/150213"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=31131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=31131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=31131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Test Page Speed with Avada and W3 Total Cache Configured<\/h3>\nNow that we’ve configured all the settings for W3 Total Cache, let’s take a step back and see how much the site has improved.<\/p>\n