The single easiest thing you can do, which incidentally also has the most profound effect at speeding up your site, is serving cached content to your visitors. By this I mean ensuring that content is more quickly and easily available both from your site, and from the visitor’s computer. Best of all, this isn’t even difficult. In its simplest form it can take mere minutes to install, configure, and activate a caching plugin and once you’ve done this you and your visitors will almost certainly notice fantastic loading time improvements.
So what’s this caching all about?
Remember my graphic from the previous post? Let’s break it up a bit – just a teensy bit – so you can get a more accurate picture of which files might actually be loaded when someone visits your site. As I mentioned, this is an extremely simplified view – the total number of files loaded and database calls can vary wildly depending on your theme and content, but this will give you an idea:
As you can see, there’s a whole mess of files that need to be loaded, content to be fetched from the database, stylesheets applied… on top of all that, don’t forget there’s the internal scripts, images and external scripts to be loaded and processed.
Wouldn’t it be great if we could tidy up that mess a little? Well… we can. It’s called page caching and it will do something like this:
To put it simply, caching your website will mean that each of your posts and pages will be stored as one single “compiled” file. When a request is made to that post, the visitor will be served that file. The page doesn’t have to be dynamically generated from the jumble of core files and stylesheets and this will represent a significant decrease in your load time. The page will stay in the cache on your server until it expires, or until it’s changed. Whenever someone leaves a comment on your site your cached copy of the page will be purged. The next visitor to that page will cause a new cached copy to be regenerated (unless your cache is set to pre-load, in which case this will be done automatically), and this way the content, or comments, are never out of date.
Awesome – but what was that about content from the visitor’s own computer?
There is another type of cache – perhaps one many people are more familiar with – and that’s one which you have in your very own web browser. Your browser will store a copy of files from websites on your local computer – be they images, scripts, stylesheets or other web content (pages for example), but did you know that you can set expiry times for the content you’re serving from your website? Imagine you have a regular visitor to your website – if you don’t correctly set the expiry time for your content then this visitor could potentially be having to download a whole load of unnecessary files every time they visit, when they could already have them on their computer.
Image courtesy of photoexplorer / FreeDigitalPhotos.net
So, how do I fix this?
The two most well-known caching plugins are W3 Total Cache and WP Super Cache. The latter is very good, and exceptionally simple to set up. If you are interested only in caching your WordPress installation with a minimum of effort, and few other features then this is definitely a great option. I personally prefer W3 Total Cache because it has a massive number of features and is extremely powerful, as well as offering options to configure Browser Caching (ensuring visitors’ browsers cache your content for longer) and stylesheet and script minification (something I’ll cover later). For the purposes of guiding you in setting up caching I’ll be using W3 Total Cache. I should mention though that your mileage may vary depending on the caching plugin used. Some interact better with different web hosts, due to the way that the host configures their servers.
Let’s get caching!
As always, before you make changes to your WordPress site, ensure you have an up-to-date backup of the database and the files.
Install and activate W3 Total Cache from your Plugins menu in WordPress. In your main menu on the left you’ll now see a new option called “Performance”, just underneath “Settings”.
[tabs slidertype=”left tabs”]
Page Cache configuration
Browser Cache Configuration
Click on “General Settings” in the new menu that slides out from the W3 Total Cache “Performance” menu.
Once on the General settings page, check to activate Page Caching, and choose “Disk Enhanced” if available. If you’re on a VPS or Dedicated Server then you may have other options available to you – if that is the case then choose the one which is available, since those options are even better than “Disk Enhanced”.
Next, in the side menu shown in step 1, select “Page Caching”. Select the options shown under the “General” section as per the screenshot. As you get more accustomed to the plugin you can modify the settings to better suit you, but for now, these are a good starting point.
Scroll down to the “Cache Preload” section and select the options shown in the screenshot. You’ll need a plugin which generates a sitemap of your site. Feel free to use the one suggested here if you don’t already have one, and enter the address to the sitemap in the required box, then click “Save all settings”.
Now, in the side menu shown in step 1, click on “Browser Cache”. Select the settings under the “General” section as shown in the screenshot. These settings will encourage the visitor’s browser to cache your content on their computer.
Scroll down to the section “HTML & XML and select the settings shown in the screenshot. GZip compression should be enabled (but may not be) by your web-host. It enables the server to compress text-based files before sending them to the visitor.
Scroll down to the section “Media & Other Files” and set the options as shown. This will apply the caching properties to anything else served up by your site: videos, music – and most importantly for many bloggers – photos. Click on “Save all settings” and that’s it. You’re done!
Help, caching is enabled but I see no speed increase
If your site is like mine and configured in such a way that “index.php” appears in the address of every post and page then you may find that by default, pages and posts will not get cached. You can resolve this in W3 Total Cache by clicking on “Page Cache”, under the “Performance” menu, shown in the first step above, scroll down to the box entitled “Never cache the following pages:” and remove “index\.php” from the box. Click on “Save all settings”, empty the page cache when prompted and you should find the issue resolved.
With these settings, the page cache will be cleared whenever someone makes a comment, or when a new post or page is created. What you will need to do is remember to empty the page cache when you make manual changes to your site, or install or uninstall a plugin. W3 Total Cache will prompt you to do this automatically in many cases.
If you’re logged into WordPress you probably won’t notice any major speed increase yet. Caching plugins usually don’t show cached pages to logged in users, but if you log out, or use a different browser you should already see the pages loading more quickly. As I mentioned before, some caching settings may work more or less well depending on the type of server your site is hosted on. As you will see from the settings in W3 Total Cache, there is a great deal more that can be done. Some of these options I will address in a later post, but other more advanced options I will let you research yourself if you’re so inclined.