How to Install and Setup W3 Total Cache for Beginners

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, and how you can 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.com, smashingmagazine.com, yoast.com and WPBeginner. 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. We will visit each of these options in detail, but first we need to start with the General Settings.

General Settings

Make sure that you are on the General Settings Page. You can confirm that by viewing two of these options:

Now lets dive into the general configurations page. First you see an option to enable or disable preview. You should click disable, so the site is actually running W3 Total Cache rather than just previewing it. So your final screen would look like this:

Next option on the screen will be Page Cache. This works just like how WP Super Cache plugin works. This section 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. For Shared servers, which most users are using, the Disk (Enhanced) Method is highly recommended. Your final screen result should look like this:

After the page cache, you should see the option for Minify in the general page. Minify is the famous technique of reducing the size of your CSS files, JS files, HTML files, posts, pages, and RSS. What this does is remove the unnecessary objects that your users do not need to see. Such as commenting in the stylesheet. That is for developers, not for average users to see. This plugin will remove all useless spacing from the code which by average speeds up your site load time by 10%. Disk is the only / best option for Shared servers. Your final screen should look like this:

Next option is Database Cache. This is crucial for site load time because WordPress sites are entirely running on Database. Often high load of database queries are the cause that slows yours site down and/or crash the site upon high traffic. The Database cache option will cache queries such as pulling the twitter count from your database, if you are using that. This option can essentially speed up your site by 100x. Your final setting for this area would look like this:

Object Cache is the option that comes next. This increases the performance of highly dynamic sites that uses the Object Cache API. The final settings should look like this:

The next option after this is for Content Delivery Networks (CDN). 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 CDN, then we recommend MaxCDN (use coupon “wpbeginner” for 25% off). Example screen of someone who uses MaxCDN would look like this:

The next and last option on the general settings page is for Browser Cache. Browser Cache enables HTTP compression and adds expiration headers on the objects of your site. Each time a user visits your site, their browser stores a copy of your site, so on the next visit, your user does not have to re-load the site entirely (which speeds up the load time). But each browser resets the cache on their own schedule even when the file has not been changed. By enabling this, your site will tell the browser how long to hold each object. For example, you don’t change your favicon every day, or even month. That is something can be stored for one month period without change. The final screen should look like this:

Now that we have gone through the general settings page, we will dive into each individual settings to give you a look for more options.

Page Cache Options in Detail

Now that you have enabled page cache, we will show you what other options that you can tweak. First you need to go to the Page Cache Settings page like so:

Now you will see the following options:

Notice in the screen above that you will see Page Cache is currently enabled. If you do not see this, then you are doing something wrong. Go back to general settings and enable it. Next, you also see a way to empty page cache. When you notice an error on your site, you want to immediately fix it. This could be a spelling error that your user reported, or something else. In a situation like that, you would have to manually clear the cache so the changes can be implemented on the live site right away.

We have selected the option to not cache pages for logged in users such as administrators. The reason for that is, if we want to see any changes that we make on the live site before it goes live, we can do so. Next option is cache the homepage. Homepage is often the most visited page on many sites. It would be a good idea to check that. Cache feeds, categories, and tags is checked because thousands of people go through our categories daily. Dynamically loading each page will slow our site down significantly. We have not selected the option to cache search strings, and 404 pages because we do not see a need for it, but for some websites it can be great.

Now we will look into some advanced options for Page Caching.

Under the advanced options, you can see that we haven’t really touched the default. You can select to change the page cache to be longer or smaller interval. Default is 3600 seconds. You can make it smaller interval if you have a busy site. Next option is for Rejected User Agents and Rejected Cookies. You can select not to send cache pages to Google Bot, not recommend, but you can if you wish. If your page use a specific cookie, you should have those pages listed under rejected cookies page.

Under the never cache the following pages section, you see that we have added another page to the list. By default it is the index.php and wp-.php. But we added a manual page in there. The reason why we added this page was because we want this to load dynamically. This is a secret page on our site that you can constantly refresh to get a new tip randomly from our article database. See our Random Posts Page. You can add any page that you do not want to cache in that list. All the other settings can be left to default.

Minify Settings in Detail

Minify Settings advanced option will vary from site to site, but there are somethings that should be universal. First you need to make sure that it is enabled.

As you can see in the image above, that you have a green text saying it is enabled. We recommend that you follow the settings above exactly as shown. Each option is self-explanatory. One thing you should note is the Help Wizard at the top. That is a very nice feature that will come in handy when we see the CSS / JS Minify settings.

We are not using JS minify for this plugin because it was causing some areas of our site to not work properly, but we have minified our CSS. You are required to attach files, which you can do by either entering the URL of the file, or using the helpwizard.

Once you select the files in there, you will see them added in the minify page below:

Everything else should be left to blank, unless you know what you are doing.

Database Cache Settings

We did not modify anything in the Database Cache settings. Everything was left as default. You do not need to modify it unless you know that your site needs additional modification. The most important section is the never cache the following pages. For example, if one of your page or section heavily relies on database queries, then it is wise to add that page or that entire section in this field:

Object Cache Settings

Everything should be left as default for an average site. If you know that you need something in there specifically, then you may modify it.

Browser Cache Settings

By default, only Gzip compresssion and Set W3 Total Cache Header is enabled, but we have taken it a step further in our setup. We enabled Set Expires Header, Set Entity Tag (etag) for each option. You may do the same for your site as well. It is recommended that you do a little research about expire header and etag functions, so you make an informed decision that well-reflect your site. Not everything that works for us will work for your site as each site has different needs. There are tons of pros and cons of these functions which could be an article on its own.

CDN Settings in W3 Total Cache

This section will be slighly biased because we are only showing MaxCDN implementation. We are using MaxCDN and their quality service, so that is the only option that we have access to display (we will also explain why we chose them). If you followed this tutorial entirely, you should have already enabled the use of CDN and seleted MaxCDN as the option (only if you have an account with MaxCDN). If not, then this can be done through the General Settings. One you have done that, lets visit our CDN Settings Page.

As you see that we have selected all four options in the general settings. Host wp-include files, this so if your theme is calling jQuery from WordPress include library, it will be added and served through the CDN service. Theme files option is checked, so all of our theme files are served via CDN. Host minified CSS and JS files via CDN. This is important to have checked, so when W3 Total Cache minify your CSS files, it can be served via a CDN. Lastly serve custom files via CDN. Often bloggers have a tendency of keeping somethings separate for the sake of organization. Let it be ad images, or other set of files. You can specify those to be served via CDN as well.

Setting up MaxCDN with W3 Total Cache for WordPress

Next option is configuration of your CDN provider. We will show you how to do that with MaxCDN. You need to have an “Origin Pull” CDN account. Rackspace Cloud, and Amazon cloud front, do not offer this service which makes MaxCDN superior. 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 examplke: 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, Super Green Hosting, 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. But there are other options that you can add as well to improve performance a little bit further. Lets look at the “Advanced” options on the Content Delivery Networks settings.

If you look at the image above, you see that some fields are already filled. The main part in this area is Custom file list. After enabling MaxCDN on our site, we saw that almost all files were being served via CDN except for some plugin files such as OIO Publisher, SyntaxHighlighter etc. So we decided to add those to the list. OIO Publisher is a plugin that lets us manage ads on our site (Full Review). When adding ads through this plugins, we can upload images through the plugin which were stored in the plugin’s uploads folder. So now all those images were served through CDN. Syntax Highlighter adds JavaScripts at the bottom of our page which were being served directly. So we added the syntax highlighter folder, so all files are served via CDN. This area will vary from site to site as each site uses different plugins. Some users will not have to add anything in here, but it is just an option to know. Also if you notice in the image above, there is a Rejected files area where contact form 7 file is listed. If you are using contact form 7, then you do not want to serve the captcha file through CDN.

This will conclude our CDN settings setup. 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:

http://www.wpbeginner.com/wp-content/themes/wpbeginner/images/logo.jpg

will be replaced with:

http://cdn.wpbeginner.com/wp-content/themes/wpbeginner/images/logo.jpg

This concludes the setup of your W3 Total Cache Plugin. Your site should load a lot faster now. For the sake of testing, you can use YSlow to see what letter grade you get now compared to before. YSlow only recognizes the known CDNs names, so it will not recognize your custom subdomain. You will need to follow the tutorial on MaxCDN blog that shows how you can add your CDN to the list for your browser. This will be for the sake of testing the actual grade that your site gets.

Now that you have everything setup, it is best if you 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.