Last week, we wrote an article announcing that we have switched our site from WP Super Cache to W3 Total Cache. That article also announced our partnership with MaxCDN. Due to a very high volume of request, we have decided to create a step by step user’s guide to installing and setting up W3 Total Cache for beginners. In this article, we will show you how to install W3 Total Cache Plugin, set it up properly so you can maximize the benefits. We will also show you how to combine W3 Total Cache with CDN services to make your site load even faster.
Before you begin, we want you to download the YSlow Addon for Firefox and run it for your site. Write down the load time of your homepage, and the letter grade YSlow gave your site.
What is W3 Total Cache?
W3 Total Cache is the fastest and most complete WordPress performance optimization plugin. Trusted by many popular sites including: Mashable, Smashing Magazine, WPBeginner, and million others. W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.
1. Installing W3 Total Cache in WordPress
Before you install W3 Total Cache, you need to make sure that you uninstall all other caching plugins (for example WP Super Cache). If you do not do this prior to installing, the plugin will have issues upon activation. We have a very thorough guide explaining how to install a WordPress plugin which you can follow. Or you can follow the brief guide below:
Go to your WordPress admin panel, and click on Plugins » Add New, where you will search the name “W3 Total Cache”. You should see results like the image below:
Install and activate the plugin. If you choose to do this via FTP, first download the plugin and then upload it in to your /wp-content/plugins/ directory. Upon the activation of this plugin, a new menu option will be added in your WordPress admin panel called “Performance”. Click on the tab, and you will enter the configuration area.
2. Settings and Configuration of W3 Total Cache
W3 Total Cache is a very powerful plugin, so it has tons of options. This could be a good thing or a bad thing. For those who know how to use these options, they are a gold mine. For most beginners, they are not a gold mine rather you risk getting your site suspended from your host. We will visit each of these options in detail, so you can make an educated decision. First we need to start with the Default Configuration that would work well on most sites.
You can go to the General Settings Page by clicking on the Performance menu button in your WordPress admin panel.
When you first activate the plugin, W3 Total Cache is in the preview mode. You can change settings around and click deploy. When we usually set this up, it is on a new site, so we simply click on the disable button which disables the preview. Now that plugin is actually active, lets take a look at different options that it offers.
What is Page Cache?
The first option that you see is Page Cache. It is responsible for creating static cache pages for each page that is loaded, so it is not being dynamically loaded upon each page load. By having this enabled, you will significantly decrease your load time. Refer to the image below to see how Page cache works:
As you can see normally when a user comes to the site, they see a WordPress page. PHP recognizes the call, goes to the MySQL Database which finds the page your user is looking for, then outputs it. This takes server resources. Having the page caching turned on, allows you to skip all that server load and show a cached copy.
For Shared servers which most beginner users are using, the Disk:Enhanced Method is highly recommended. You should check the Enable Page Cache box, and save all settings.
For most folks, this is all you need to do with page caching. Because this guide is for beginners, we will not show the advanced settings of page caching because the default options are sufficient enough.
We will skip through Minify, Database Cache, and Object Cache. The simple reason is because not all servers provide optimized results with these settings. We will cover this later in the article.
Next option you will see is Browser Cache.
What is Browser Cache?
As you can see in the image above, we pretty much enabled everything except for the 404. When you save the settings, all the settings below on that page will automatically take care of itself.
In our free WordPress setups, this is the default settings that we turn on.
After the Page Cache and Browser Cache, the other option that will work on most servers would be the CDN.
What is a CDN?
It stands for Content Delivery Network which allows you to serve your static content from multiple cloud servers rather than just one hosting server. This allows you to reduce server load and speed up your website. We have created an infographic on What is a CDN and Why you Need a CDN for your WordPress Blog. We highly recommend that you check it out, so you can make an educated decision.
W3 Total Cache supports MaxCDN, NetDNA, Amazon S3, Rackspace Cloud, and Amazon Cloud Front. WPBeginner is using MaxCDN. This section will only apply to sites that are using CDN, or are planning on using CDN. If you think you will be using a CDN, then we recommend MaxCDN (use coupon “wpbeginner” for 25% off). Your screen on the General Settings Page of W3 Total Cache should look like this (Enable it and select the CDN type).
Now that you have enabled, let us show you the setup process. It is a little biased because we are only showing you how to use MaxCDN (because we use them, and they are our good friends/partner).
Setting up MaxCDN with W3 Total Cache for WordPress
You need to have an “Origin Pull” CDN account. Origin-Pull is simple to use and highly transparent. This type is also known as “mirror” CDN.
1. Login to your MaxCDN account (If you don’t have one, then get one).
2. In your MaxCDN dashboard menu, click on “Manage Zones” option. Then click on “Create Pull Zone” button, just like it is shown in the image below:
3. On the next page, you will need to fill out the necessary information to create a Pull Zone:
- Pull Zone Name: This can be anything without spaces, minimum 3 characters long. Think of this as your username.
- Origin Server URL: Enter the URL of your wordpress blog. Must have “http://” and the trailing slash(/).
- Custom CDN Domain: This is Optional, but we recommend it for the sake of branding. Use any subdomain for example: cdn.wpbeginner.com
- Label: This is like a description field. It is optional to add a description.
- Compression: We recommend that you enable this as it will save the usage of bandwidth on your account.
We have filled out the fields for you to see in the image below:
Upon creation, you will see a screen that will give you the URL for your CDN. If you chose the option for Custom CDN Domain, it will ask you to create a CNAME record for that domain. We will show you how to create the CNAME Record with cPanel Webhosting providers such as HostGator, Site5, and Bluehost. You will need to login to your cPanel, then scroll down to the Domains Section and click on Simple DNS Zone Editor.
Then you will fill out the fields to Add an CNAME Record. The two values, you will be required to fill are: Name and CNAME.
- Name: This would be what you put in your MaxCDN Pull Zone as the Custom CDN Domain. In the image above, you see that our custom CDN domain is cdn.wpbeginner.com, so we will put “cdn” in our name field.
- CNAME: This will be URL provided to you by MaxCDN when you create the Pull zone.
We have filled out the fields for you to see in the image below:
Now, you have the CNAME created for your MaxCDN Pull zone. Note: This method will be different if you have a different host. Sometimes, CNAME records are created via Domain Registrar such as Godaddy.
Lets configure our W3 Total Cache Plugin to work with MaxCDN. In the general settings above, you have already enabled Content Delivery Network option and set it to Mirror: NetDNA/MaxCDN. So now when you go to the CDN Settings page, you will see an option for Configuration. W3 Total Cache wants you to enter the API ID, and the API Key. These can be found in your MaxCDN Dashboard if you go to Manage Account » API. Copy those and paste it here. Next complete the field that asks you to “Replace site’s hostname with:”. You will add your custom CNAME here. You can see in our example below, we have added cdn.wpbeginner.com.
After setting this up, your MaxCDN should be setup and ready to go. Now if you load your site, the image URLs should be served from the CDN subdomain rather than your site’s actual domain. For example:
would be replaced with:
Now if any of your static files are not loading with the CDN, then it probably means you will need to specify it in the custom files list setting in W3 Total Cache. We had to do it for OIO Publisher plugin that we use for serving ads. If you go to the CDN settings page, you will see the Advanced option:
Simply add all the files/folders that you want to include for CDN. Also if you notice, there is a rejected file list. When you make a small design update, your style.css will not update right away. So you can put that in a rejected file list for the time that you are making changes. If you just want a one-time purge, you can do that over in MaxCDN settings.
Everything that we have covered up till now, will work great on most web hosting accounts. Because W3 Total Cache comes with other options, we will do our best to explain what they are, why we do not enable them on all sites.
Minify simply reduce the size of your static files to save you every single kilobyte that you can. However, sometimes generating that minified file sometimes can crash your site. We are not saying that it is a horrible function. We are simply saying that it does not work with all sort of server settings. We have heard numerous users complaining about it, and our host (HostGator) recommended us to leave this off. If you are like us (NOT SAVVY with server lingo), then listen to your web hosting provider.
Database caching reduces the server load by caching SQL queries. This eliminates the processing time of querying the database (which may not be a lot for smaller sites). When we started using this, it seemed to put a lot of load on our server. Our host recommended us to turn it off. Instead, they ended up turning on the built-in SQL caching for us. Again, use this option at your own risk. You can try it out and see how it impacts your site load time. Then simply turn it off, if the impact is not significant enough. Most hosts do not recommend this for shared hosting accounts.
If you have a highly dynamic site, then using the Object Caching will help. This is mainly used if you have complex database queries that are expensive to regenerate. For most beginners, this will not help.
Now that you have everything setup, it is best to create a backup for your W3 Total Cache Configuration. After all, we went through a lot in this article. You will need to come back to your W3 Total Cache’s General Settings Page. There is a section for Import / Export Settings. Click to Download the settings file from your server.
This is good to do because if your site crashes, or you accidentally reset the settings, you will have a file to backup.
We hope that you found this article useful. For those users who are still not sold on the concept of CDN, we highly recommend you give it a shot. CDN work with your web host to decrease server load and increase site performance. We are using MaxCDN and we recommend you to do the same. (Try them for just a month, and you will see why we recommend them). Use the coupon “wpbeginner” for 25% off.
If you have any questions, then please feel free to ask in the comments below. Also don’t forget to share this article on Twitter, Digg, Facebook using the buttons to your left. We truly appreciate your support.