Can StackPath CDN be combined with W3 Total Cache? Yes, here is a simple to use walk through on how to set the two up together.
W3 Total Cache is a free CDN integration plugin that also features a host of other caching abilities, like Database Cache, Page Cache, Object Cache, Browser Cache and allows you to maximize the benefits of Stackpath CDN.
In this article, we'll help you set up the StackPath CDN with version 0.9.7.2 of the W3 Total Cache (w3tc) plug-in, and help you configure the plugin with the most common settings for best performance and security.
This article will walk you through how to perform a static assets integration, which does not support the use of the StackPath Web Application Firewall (WAF). If you’re looking to maximize security by using our CDN with the WAF, please refer to the CDN & WAF integration guide.
Before you begin, we highly recommend you test the performance of your site using Google Page Speed or Pingdom Tools. You can test your site now and after setting up the plugin for a before and after performance comparison.
This tutorial assumes you've already gone through the steps to create a StackPath CDN Site.
Preparation
While using W3 Total Cache, you will be linking your WordPress instance to your StackPath account. Before continuing with the plugin configuration within WordPress, you should first create the API Credentials within your StackPath Account.
- Log in to your StackPath Account:
- Select API Management from the dropdown in the top right:
- Select Generate Credentials:
- Name the Credentials access, in this example, we titled it "W3TC":
- You will be presented with a Client ID and API Client Secret. These should be copied someplace safe for use later on. Here is an example of the output:
At this point, please open a new browser tab to continue to the next section of the article.
Installing the Plugin
- Log in to the WordPress control panel (/wp-admin):
-
On the left-hand sidebar, hover over Plugins and select Add New:
-
In the plugin search box, type W3 Total Cache. Then press Enter on your keyboard:
The W3 Total Cache plugin will appear:
-
Click Install Now
-
After W3 Total Cache is installed, click the Activate Plugin link
Configuration
-
Once W3 Total Cache is installed, a new menu item called Performance will appear near the bottom of the left-hand sidebar. Hover over it and select General Settings:
-
Scroll down to the Page Cache box. Check the Enable box to enable page caching and make Disk: Enhanced the selected method. Enhanced modifies the .htaccess file to direct Apache2 to a static(cached) version of the resource.
-
Enable the minify function and select Manual mode.
Minification is the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser. This setting will also improve your SEO.
We do not recommend changing any of the other settings under the Minify section.
-
We recommend keeping the Database Cache option Disabled.
This setting can actually slow down the time to first byte on your site and can cause other functions of your website not to work normally. Only advanced users should enable this feature.
-
Enable object and browser caching:
-
Enable the CDN feature and select StackPath (Recommended). Please note that StackPath SecureCDN (Legacy) refers to a legacy product that is not to be used for this tutorial.
-
Click Save all settings.
- Navigate to Performance and select CDN:
-
In the General section, select the file types to host on the StackPath CDN. To get SEO benefits, also check Add Canonical Header:
Please note that W3 Total Cache adds Canonical headers only to the image files so if you're serving other files as well, please disable this option and enable it in the Site CDN Settings.
-
You will be prompted to authenticate with your StackPath account:
-
Paste in the Client ID and Client Secret keys you received at the beginning of this walkthrough.
- Select the CDN Site you are integrating and click Apply:
- Verify the Replace Site's Hostname With Section is automatically populated with your Edge Address.
You can replace this domain with any of your configured Delivery Domains as long as they have been set up as CNAMEs to resolve to the CDN.
- Click Save all Settings & Purge Caches
Test the integration
Checking if CDN enabled is really simple.
- Purge the browser cache or use a Private or Incognito window.
- Open the website
- Right-click anywhere on the page
- View source code
- Check the source code for the Edge Address
Optimization
-
Select Browser Cache under the Performance menu in WordPress:
-
Navigate to General to view browser caching features
Adjust the following settings accordingly:
- Enable Set Last-Modified header
- Enable Set expires header
- Enable Set cache control header
- Enable Set entity tag (eTag)
- Enable Set W3 Total Cache header
- Enable HTTP (gzip) compression
- DisableSet cookies for static files
- Enable Do not process 404 errors for static objects with WordPress
-
Click Save All Settings & Purge Caches.
-
Select Minify under the Performance menu in WordPress.
-
At the top of the page, click HTML & XML.
-
Check the Enable box next to next to HTML minify settings:
Adjust the other settings as you see fit.
-
Click Save All Settings & Purge Caches.
Test speed and SEO post-integration
At this time, you should perform another speed test by using Google Page Speed and Pingdom Tools.
Compare the before and after tests and note that it can take one to seven days for your site to reflect the performance improvements of a CDN. Both of these test sites also will give you SEO recommendations that you can follow.
How to disable CDN
If you encounter errors or are not pleased with the integration you can quickly disable the CDN through the w3tc plugin. Please go to General settings and uncheck the CDN box and press Save settings and Purge cache.
What's Next?
Feel free to take a look at these articles for some possible next steps with your CDN Integration:
We are always happy to help answer questions and to help make sure you experience the fastest and most secure experience with Stackpath CDN.