##Introduction In this tutorial, we will be talking about the Wordpress caching plugin: W3 Total Cache, we will explain: what it is, what it does, why you should use it, how to install and configure it and all its elements, along with what it has done and improved after configuration. We will provide step by step instructions for you to fully configure and use the plugin.
##What it is and why you should use the W3 Total Cache Plugin
The W3 Total Cache plugin is a plugin for WordPress that incorporates many methods to speed up your loading times on your WordPress website, and therefore improve user experience. Loading time directly correlates with conversions, and a faster load times can drastically increase them, we, as website owners, often prefer more aesthetically pleasing designs and interesting elements to make the website more pleasing, however this can slow down the loading time, and according to research, website visitors tend to care more about the loading time of your site, to decide to stay, come back or purchase from the website. However this doesn't mean you have to cut back on what have on your website, you just need to implement loading time improvement methods, and if you use the content management system: WordPress, you can do this using the W3 Total Cache Plugin.
What's also important is that you don't just consider desktop users, people are using mobile devices for more things than ever before, and loading times can often be considerably different for mobile and desktop.
##Website Loading Time facts:
- 47% of consumers expect a web page to load in 2 seconds or less
- 40% of people abandon a website that takes more than 3 seconds to load
- A 1 second delay in page response can result in a 7% reduction in conversions.
As you can see from the above facts, loading time is not something that should be let slide, or not considered as a priority on your website.
##An Example of a site without W3 Total Cache. Below you will see the waterfall of a site, taken using webpagetest.org before the implementation of W3 Total Cache, at the end of this tutorial, we will also show you the waterfall of the website after implementation. A waterfall is a visual image of what your browser will download from the web server upon accessing the site, it shows how long each element takes to connect to and download, and is a very good tool for analyzing and improving your website load times.
Looking at the above image, you can see there are lots of files, and the total load time is a huge 5.27 seconds. With this kind of load time, and with the facts we told you about earlier in this tutorial, im sure you can imagine that this is going to be causing drastic reduction in conversions.
With this tutorial, using W3 Total Cache, we will reduce the amount of files, make them smaller, and cache them, which at the end of this tutorial you will see the huge improvements to this site loading time, and the huge improvements that you can also do with help from our tutorial.
##How to Install To begin with configuring W3 Total Cache plugin for WordPress, you will need to install it onto your serve and WordPress installation, below we will show you how.
Firstly, log into your WordPress admin area, and navigate to the plugin finder and install section, which you can get to by on your sidebar going to Plugins > Add New. On the plugins page type in W3 Total Cache into the search bar in the top right, and press enter.
After the search has completed, you will be met with a list of plugins that match the criteria, the W3 Total Cache will most likely be the first link, and will look similar to the below image. Just click “Install”, it will then be downloaded, and after will show you a message on screen, where you will need to click “activate”. As you will see from the below screen shot, the plugin has already been installed due to the “installed” button, where for you there will be “install”.
##The Different Sections and Configuring This section of our W3 Total Cache Tutorial, will be all about the different methods within the plugin, which we listed above, and configuring each of these.
First to get to where you configure the plugin, in your WordPress admin area, this time, instead of the sidebar, you will need to look at the top bar, on the top bar it will say “Performance”, click this, and it will take you to the plugin configuration. If there is not a “Performance” button, please ensure the plugin is activated. To do this, go to, in the sidebar, Plugins > Installed Plugins, and then in the following menu, look for W3 Total Cache, once you found it, click “Activate”. If you do not find the plugin, please repeat the steps above in the section “How To Install”.
When you first get to the plugin configuration screen, you will see some premium services and add ons you can purchase, they are not at all required for the use of the plugin, and for the purpose of this tutorial, we will skip past explanations on these, and move forward with the configuration without these premium extras.
You will now see a section in the sidebar of your WordPress admin area, these are the different sections that are in the plugin, and in this tutorial we will be going through these from the top to the bottom, starting with General settings.
###General Settings. These options in here cover the plugin in general, and is aimed to allow you to utilise the plugin without necessary advanced knowledge, and also set it up quickly with the default settings. Sometimes you want to fine tune the settings or change certain aspects if you come across issues, so the other sections were created to allow you to do that.
The first part in here is the simple button to turn all caching on and off, with one tick box, however often you will need to also fine tune the setting after as well, for the purpose of this tutorial, we won't tick this box, so we can configure the settings to our liking. Underneath this box you will see a button where you can enable “Preview mode”. We advise you to enable this before starting your configuration, so you can ensure your site works as it should after all settings have been applied. It is very important, that you turn off preview mode after you have finished configuring and ensuring everything works as it should. To preview the site, you will notice after turning this on that a “preview” button has appeared, after configuring you can go back at any time, which we recommend to do frequently so that if anything goes wrong, you will be able to find out what more easily, than if you were to preview it after you have configured everything.
The page cache is when the website page, or HTML, gets stored in the cache. In this section you will see different page cache methods. Depending on what your website is ran through, will change what you want to put here.
So for a Shared Server, which is when many websites are ran from the same node, ran through different ports or/ and IP's. The resources are not dedicated for each website on the shared server, all the resources are shared collectively between all. Often this can be a far cheaper way for your website to be online, but also means if one website is DDOS attacked, or one website is using more resources than the rest, it will slow down all the websites. These shared server environments are often subject to overloading because of this.
For Virtual or Dedicated servers, the resources are dedicated in a slightly different form. For Virtual, there will be x amount of virtual servers on one node, however they operate in their own environment, which allows for more control and have dedicated amount of RAM per virtual server, however the CPU is still shared between all virtual servers. For a dedicated server, your website is the only website on the node, and you have complete access to all resources without having to share them with anyone else, however this will be far more expensive than a shared server environment.
You will also notice that there is a option for “Multiple Servers” using a method called Memcached. This is a distributed in-memory caching system, thats stores key-value pairs in RAM. Basically what this means is that instead of running x amount of web servers, which are each reading from their own limited cache, all of them read and write from a cache that they all share. What this means is that if one website requires the same file that is used on another website, it can instead of having its own, just use the other websites. As from this the advantage can be seen as you have less data being stored in the cache as there are no duplicates, due to all the servers sharing one.
For Shared Servers, we recommend, “Disk: Enhanced”, which is a version of caching better than basic, due to it serving cached pages by using URL rewriting, which uses the htaccess file, and skips PHP and WordPress entirely, which is faster and more efficient, however can sometimes cause problems, so if you get some problems use “Disk: Basic” instead.
For Virtual or Dedicated servers, we recommend XCache option, as this is often considered the fastest and most stable PHP Opcode cache, and is also fully support by both Windows and Linux.
For Multiple Server, as discussed earlier, if the site shares resources with more than a single server, and Memcache is available by your host, then you should use this option.
You should be slightly careful with automatic minification, as it can cause problems, so you will want to check regularly as mentioned at the beginning of this tutorial, to “preview” the site, to ensure everything is working as it should after changing or setting each option. Tick the enable box in this section.
Then move down to minify mode, now you will see either Auto or Manual options, Auto will likely suffice for many websites, sometimes if you hit issues as mentioned above, changing this to manual and then you can specify the files that you want to be excluded or specifically minified. You would do this in the “Minify” settings tab on the side bar under “Performance”.
###For the options after that: Minify cache method, you will not to keep this the same as your Page Cache method, which in this case is Disk, as we are on a Shared server and chose “Disk: Enhanced” in the previous section.
- HTML minifier, it will be safer to keep this on default, HTML tidy, makes the code, well, more tidy, by removing unnecessary code and moving it around. However this can often cause you issues, and you will likely be able to get great loading times without using this.
JS Minifier, you will also want to keep this on default, the other options can help you fine tune your load times further, and can also help you to overcome problems if they arise.
CSS minifier, as with the above, default will be best, with the others to fine tune or use to combat and fix issues that arise after enabling this option. As they are in theory the same, as they aim to minify the CSS, however doe it with different methods. After saving this option, preview the site, if the layout has changed, it may mean that the CSS has been wrongly minified and applied.
###Database Cache This involves taking the database at its current state, and caching the database objects. This helps to reduce your post, page and feed creation time, it can be used alongside or instead of Object cache. As with the other caching methods, it is best to keep the method the same as the others. So in this tutorial, we have chosen Disk, so here we will chose Disk again. Along with selecting this, please also tick the Enable box.
###Object Cache This cache is used to increase the loading time of your website by caching common operations. For example, the Logo is normally accessed on every page, so this would be included in the object cache. It also greatly increases performance for highly dynamic sites that use the Object Cache API. Again the object cache method, should be set at the same as the others.
###Browser Cache This enables the site to be downloaded into the site visitors web browser cache, this will be enabled as default, and you should leave it enabled, it will also add headers for expiry, so the site visitors browser version is not outdated compared to the website, and will also enable HTTP compression, which is used to compress data before it is sent from the server, hence making the packets smaller and therefore quicker to download.
###CDN This section will explain how to instal and enable CloudFlare on your website. CloudFlare is a type of Content Delivery Network (CDN). What it does is takes your website and protects and accelerates it using various methods, it will protect you from DDOS attacks, and will serve your site, even if your web server goes down! It does this by taking your website, and caches it on all their servers around the world. Then when someone accesses your site, they will be displayed your cached website on the CloudFlare server nearest to them. You should note, that they do have a free plan, however with less features than their paid plans. Depending on your requirements, will decide which plan you require, you can find the plans here: https://www.cloudflare.com/plans. Lets install CloudFlare.
Navigate to Extensions in the W3 Total Cache sidebar and click on Activate on the CloudFlare extension.
After activated, you will see 2 options, either de-activate or settings. Click on the settings option.
After clicking settings, it will take you to the settings section where you will configure CloudFlare. Here you will what to tick the Enable box, and then enter your CloudFlare details, which you will need to create on the CloudFlare website, here: https://www.cloudflare.com/sign-up
You can find you API key here: https://www.cloudflare.com/my-account.html Then you will need to fill out your domain and other options.
####Security Level This option can be left on medium, or lower, its changes how strict the website is against visitors. So for example, if you are expecting potential DDOS attack, or are being attacked, you should raise the security level to “I Am Under Attack”
For our recommendation on Security level, Rocket Loader, Minification and Development mode, please see the picture below.
Once set, remember to click “Save all settings”
Now after you created an account you will notice that you now have the option to add a website. Please enter your website domain into this field, and click “Add Website” and then wait.
After the scan is complete, click the continue button that you will see near the bottom of the page. You will then see a list of all the DNS records that the scan as found. Here you will want to confirm that everything is correct, and everything is there. If it is not, you will need to navigate to your DNS records, which are located on your cPanel, under “Simple Zone Editor”. After navigating here, you will see all your DNS records, please cross reference this with what the CloudFlare scan has shown you, if the scan is missing any, please input them manually into cloudflare, in the option at the bottom, which looks likes this:
Decide which domains and subdomains you want to use CloudFlare, by clicking on the cloud to the right of the record so it turns orange. So it looks like the below image.
What's done, click the “Ive added all missing records, continue” button. On the next screen, select your settings that you would like. Then click “Continue”.
The next screen you will see is the name server that you need to change. Navigate to your Domain Name Server records (not the records we were talking about in step 6) , which will be located on the domain name registrar where you purchased your domain from, or where if you transferred your domain to a different host, then they will be there. Change the name servers as required.
Once changed, go back to CloudFlare and click the button confirming you have changed the name servers.
Done! You're now all up and powered by CloudFlare! Sometimes it can take a while for propagation of your Domain Name Servers to complete, up to 48 hours. However everything is done your side!
###Reverse Proxy This is a more advanced option, and may not be required for your needs, however we will cover it to ensure you know what it is, and if you want to enable it. It is most of use when there are lots of comments on your website, and also requires a Linux server and you will need to install it.
Varnish is also a type of caching, it stores copies of pages for users that are not logged into the site, which in most cases will be the majority of users. Then when a request comes to your server for the page, Varnish then sends the pre-built pages that has been stored in its cache much faster, as it doesn't need to use Apache, PHP and WordPress to build the page on each request.
The option here is just for Varnish purging, which means to clean the cache, and to connect your WordPress website with the varnish instances that you have by inserting the IP addresses in the box blow. We will leave all of this off and empty in this tutorial.
###Monitoring This section is about configuring a performance and website monitoring tool called “New Relic”, which can be found here: http://newrelic.com/ . It is a tool that enables you to monitor the performance of your site, but not only about how fast your site is loading, but also about customer experiences.
Let us explain a little further. When someone comes onto your site, they will browse your website and then leave or make a transaction (in other words; buy something). When a visitor makes a purchase, this is called a conversion, as the visitor has converted into a customer. This tool can help analyse where people leave the website and the paths they take from coming on the website. So for example:
Customer A - Comes onto the site, browses a few pages, and then leaves on a specific page. Customer B - Comes onto the site and goes the same path as customer A and leaves on the same page.
This will now show you through this tool, that people who go this path on your website are likely to leave and not convert, this then enables you to make changes to that path, to help change this.
Customer C - Comes onto the site, and goes a different route than A and B, and then makes a purchase.
This then shows that the path that customer C went, has been better optimised, and the visitor has had a better experience than A and B, so therefore made a purchase.
The tool then helps you analyse this, along with the changes of your sites loading speed other time, to maximise your conversions.
###Licence This section is where you apply your licence key if you have upgraded to a premium package. ###Miscellaneous This section contains a few extra settings, that you can enable or turn off if required. You can also setup the use of the Google Page Speed dashboard widget, which is a small widget that can be placed on your WordPress dashboard, that shows a simlified version of the results that you can get from inputting your site into here: https://developers.google.com/speed/pagespeed/insights/
You should keep the “Verify rewrite rules” enabled, and the “Enable FIle Locking” disabled, the “Optimize disk enhanced page and minify disk caching for NFS” option, can be turned on if you are using a Network File System, otherwise should be left off.
###After W3 Total Cache and CloudFlare This concludes our tutorial, we hope you found it helpful, and you were able to fully use it to help reduce your load times for your WordPress enabled website! Below you will see the work after all the edits were performed in this tutorial. As you will see the load time has been reduced to just over 3 seconds, and the amount of files to be downloaded reduced considerably.