Everyone wants to speed up your WordPress site. Apart from good WordPress web hosting and well-coded plugins, you need to ensure that you are using proper caching and have CDN. I use W3 Total Cache plugin for my setup. For your sake, I have decided to create a step by step guide on how to install and setup W3 Total Cache and MaxCDN for beginners.
How to Install and Setup W3 Total Cache and MaxCDN
In this post, I shall show you how to install W3 Total Cache and set it up properly to get the benefits. I shall also show you how to combine CDN service with W3 Total Cache to make load your site more fast.
Before you start, I suggest that you should check the performance of your website by using Google Page Speed and Pingdom Tools. Then you will be able to compare them.
Below is the screenshot of our Pingdom results:
Let’s start with our setup of W3 Total Cache.
What is W3 Total Cache?
W3 Total Cache is the fastest and complete WordPress performance optimization plugin for site. Trusted by popular sites including smashing Magazine, Mashable and AT&T and million others. W3 Total Cache improves the user experience by caching every aspect of your site, improves the server performance, reduce the download times and provide transparent CDN integration.
Installing W3 Total Cache in WordPress
Before going through installation of W3 Total Cache, you need to make sure that you have uninstalled rest of the caching plugins like WP Super Cache. If you will not do it, you may experience issues during the activation.
I have written a thorough guide for you that explains how to install a WordPress plugin in WordPress.
Go to your WordPress admin panel and click on Plugins > Add New. Search for “W3 Total Cache” and you will find the results like the image below:
Click on the Install Now button and then activate the plugin.
Settings and Configuration of W3 Total Cache
W3 Total Cache plugin is a very powerful plugin that is why it is replete with options. It can be a good thing or a bad thing. If you know how to use these options, they are gold mine for you. For beginners, these options can be confusing and tricky. I shall visit each of these options in detail, so that you will be able to setup W3 Total Cache in a proper manner.
Let’s start with general settings.
General Settings
Go to the General Settings page by clicking the performance menu button in your WordPress dashboard. This is where you will set it up by configuring its basic settings. Do not go to promotional dashboard page of this plugin and stay on the general settings page.
What is Page Cache?
The first option that you see on the page is PageCache. It is responsible for making static cache pages for each page which is loaded. So it is not being dynamically loaded upon each page load. By enabling it, you will definitely decrease the load time. See the screenshot to see how page cache works:
As you can observe usually when a visitor comes to your website, WordPress runs MySQL queries and PHP scripts to the database to find the requested page.
Then PHP parses the data and generates a page. It takes the server resources. When you turn on the page caching, it allows you to skip all the server load and show a cached copy of the page when a visitor requests it.
Most beginners use shared hosting, the Disk:Enhanced method is highly suggested. You should check the Enable Page Cache box and save the settings.
For most of the people, that is all what you need to do with page caching. This post is for beginner level users, so I shall skip the advanced settings of page caching because the default options are sufficient for the beginners.
I shall also skip through Database Cache, Minify, and object cache. It is due to the fact that all servers do not give optimized results with these settings. The next option is the browser cache.
What is Browser Cache?
When a visitor visits a site, his web browser downloads all the CSS files, JavaScripts and images and other static files in a temporary folder to enhance the user experience. This is the way when this same user will visit the next page, it will load faster because the static files are save in their browser cache.
In W3 Total Cache, the browser cache option sets a time limit on the browser cache. Consider you do not change your logo on daily basis. Static files that cached for 24 hours will not hurt you. Just check the Enable under Browser Cache option and click save all settings.
After doing that, now visit the Performance>Browser Cache page for further settings.
As you can observe in the image above, I have enabled almost everything except 404. When you will save the settings then all the settings below will take care of itself automatically.
What is a CDN?
CDN stands for content delivery network that enables you to serve your static content from many cloud servers rather than one hosting server. It allows you to reduce the load of server and also speeds up your site. I have also created an infographic post on What is CDN and Why you need a CDN for your site. I suggest that you should go through it, it will enlighten you and will help you to make decision.
W3 Total Cache supports Amazon S3, MaxCDN, Reckspace cloud and Amazon cloud front.
This section will only apply to those websites which are using CDN or planning to use it in future.
First of all, you need to create a pull zone in your MaxCDN dashboard.
Log in to your MaxCDN account, click on Manage Zones and then Create Pull Zone Button.
You will be asked to give details for your pull zone in the next screen.
- Pull Zone Name: Provide any name to this pull zone so that you can identify it in your MaxCDN panel.
- Origin Server URL: Now enter the URL of your WordPress website that starts with http:// that ends with a slash / at the end.
- Custom CDN Domain: enter any subdomain like cdn.greenhatexpert.com
- Label: Give description for this pull zone.
- Compression : You can save bandwidth by enabling compression so it is highly suggested that you check this box.
A screenshot of how the above mentioned settings will look like:
Click the create button to create the pull zone in MaxCDN. On the next screen, you will see a URL like “wpb.greenhatexpert.netdna-cdn.com” copy and save this URL in a text file using notepad because you will need it later.
Now, I have created a pull zone, the next step is to set up content zones. Do this by visiting your MaxCDN dashboard. Click the manage button next to your pull zone which you just created. Click the settings tab on the next screen.
The objective of creating content zones is to add subdomains, so that I can improve user experience by queuing content from different subdomains into the browser of user. Click on the button named custom domains and add multiple subdomains.
See the screenshot below:
After adding custom domains simply click on the update button. To set up CNAME records for the subdomains is the next step. Most of our recommended WordPress hosting providers give a cPanel to their clients to manage different settings of their hosting. I shall describe how to set up a CNAME record in cPanel.
Log in to your cPanel dashboard and click on simple DNS zone editor under domains.
You will see a form with two fields on the next screen. Now enter the subdomain name you entered while creating the content zone. For example, you will put cdn for cdn.greenhatexpert.com.
cPanel will automatically fill the full domain. In the CNAME field, enter the URL given by MaxCDN when you created the pull zone. I asked you to save the URL in the notepad.
Repeat the process for all your subdomains like cdn1, cdn2 etc. you need to remember that the name field will change every time and the CNAME field will always have the URL given by MaxCDN for your pull zone. After creating CNAME records for all subdomains, now it’s time to go back to WordPress and setup MaxCDN with W3 Total Cache.
Go to Performance > General Settings.
Scroll down until you find CDN configuration box. Check enable and select MaxCDN from CDN type drop down menu. Click the save all settings button to save changes.
After saving the settings, you will get a notification to give information for ‘authorization key’ and ‘replace default hostname with’ fields and select a pull zone. Click on ‘specify it here’ link and W3 Total Cache will redirect you to the CDN page.
Click on the authorize button on the next screen. It will take you to the website of MaxCDN to generate an authorization key. Copy and paste the key back in W3 Total Cache. In ‘Replace site’s host name with’ enter the subdomain you created earlier.
Save all settings. Your website is now configured to serve static files using MaxCDN. Now if you will load your website, the image URLs should be served from the CDN subdomain instead of your actual site domain. For example:
https://www.greenhatexpert.com/wp-content/uploads/2010/08/w3totalcachecdnconfig.gif
would be replaced with:
http://cdn.greenhatexpert.com/wp-content/uploads/2010/08/w3totalcachecdnconfig.gif
now if your static files are not loading using CDN, it means that you will need to specify it in the custom files list setting in W3 Total Cache. When you go to the CDN settings page, you will see the advanced option:
Now simply add all the files and folders which you want to include for CDN. If you see, there is a rejected file list. When you make small design changes, your style.css will not update instantly. So you can put that in a rejected file list for the time that you are making changes. If you want to get rid of it in one time, you can do that from your MaxCDN dashboard.
Everything that I have covered till now, it will work great on most of the hosting accounts. However, W3 Total cache has many other options. I shall try my best to explain them what they are, and why we do not enable them on all websites.
Minify
Minify reduces the size of your static files to save every kilobyte which you can. At times, generating that minified file can be more resource intensive than the resource it will save.
I am not saying that it is a horrible function.
I am saying that it may not be the best fit for every server. There are some people who complain about it. HostGator also recommends to leave it. So you need to listen to your web hosting provider.
Database Caching
Database caching reduces the server load by caching SQL queries. This eliminates the processing time of querying the database. When I started using it, it seemed to put a lot of load on our server. Some of the host recommend to turn it off. They turn on built in SQL caching for you.
Again, you can use this option at your own risk. Try it to observe what impact it shows on your site load time. Then simply turn it off, if the impact is not clear enough. Most hosts do not suggest this for shared hosting accounts.
Object Caching
If your site is dynamic, then using the object caching will be helpful. It is used if you have complex database queries which are expensive to regenerate. For most beginners, ignore it.
After configuration or setting up, you need to create a backup for your W3 Total Cache configuration.
Want to backup your WordPress site?
Also, see our guide on Best Backup Plugins.
After all, you spend a lot of time to go through this post and configure it.
You need to go to W3 Total Cache’s general settings page.
There is a section for import/export settings. Click to download the settings file from your server.
I hope that you have liked this post.
Still not using CDN? I recommend you to kindly read our post about why do you need a CDN?
Do not forget to share this post.
Arsalan Rauf is an entrepreneur, freelancer, creative writer, and also a fountainhead of Green Hat Expert. Additionally, he is also an eminent researcher of Blogging, SEO, Internet Marketing, Social Media, premium accounts, codes, links, tips and tricks, etc.