Optimizing your blog – part 1: Caching

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.

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”.

Click on “General Settings” in the new menu that slides out from the W3 Total Cache “Performance” menu.

[/tab]
[tab]

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”.

Scroll down to Browser Cache, select the box to activate, then click “Save All Settings”.

[/tab]
[tab]

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”.

[/tab]
[tab]

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 “CSS & JS” and select the settings as shown. CSS are the stylesheets (Cascading Style Sheets) used to customise fonts, colours, background images and so forth. JS is JavaScript – the scripts served up by your site.

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!

[/tab]

[tab]

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.

[/tab]

[/tabcontent]
[/tabs]

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.

Comments

Again fantastically thorough and easy to understand. It’s really great of you to put this together Charles. Again…one of these days I’ll have to give this self-hosting thing a try. I hope you have a great weekend. Is the weather warming in your neck of the woods at all. Still a bit too cold for my liking here, but I just keep thinking we’re at the turning point. Soon it has to feel like summer! 🙂

Thanks so much for this very informative post, Charles. This is exactly what’s keeping me from hosting my own blog, the technical stuff scares the bleep out of me. Plus I’m really super happy with the way WordPress handles my info. If I do switch over, you’ll be the first person I will call on for help ;)!

Hi Eva, I’d be happy to help if ever you should decide to give it a try :). With something I invest as much time into as my blog I don’t think I would feel happy entrusting my photos, data, all my posts etc. to a third-party.

Hi Laura, I never used Quick Cache, though I think SuperCache is based on Quick Cache and a bit more developed. TotalCache I find amazing – it’s one of the most well-developed, comprehensive plugins I’ve ever seen, and it’s not for nothing that some big companies use it.

Hi Marta, I’m not sure if you’ll be able to use the tips from this specific post, since as far as I know you don’t use WordPress (do you?). I will have other posts in this series later which you will certainly be able to follow though! 🙂

woahh, LOVING all the tips so far. Thanks for sharing Charles, always so helpful! There’s so much I want to do with my site, but urgh I just lack the patience to make sense of all these technical jargon and tips, so this is really helpful. The sun, also, is very distracting though 😀 I can’t get any work done these days!

Also, abit out of point, but I will be in paris mid july 🙂 any recs? x

I’ll be there from the 18 to 22! Yes! We should! I’ll have my sister and dad along with me though, so I’ll have to check with them, but I’m sure I can sneak away for a bit or we can all have a good lunch/dinner together 🙂 You have my email don’t you? x

Thank you Maureen (and John!). My old host really didn’t play nicely with W3 Total Cache. My site ended up being much slower with it activated (and it was already really slow!). SuperCache worked better there but lacks a lot of the functionality I liked, so I’m pleased I could get W3TC working better on my new host!

Hi Charles! As you know, I don’t use wordpress but still enjoying following along. I gather what I can as I go. Hope you had a dandy of a weekend :). Things are finally (dare I say it?) warming up here (it was feeling more like April than June for a while… hoping to get to the lake this weekend – yay).

Charles, if only I asked you about the caching when I was looking for explanations on internet a long time ago… I finally found them but in comparison you explain it in such a clear way! I haven’t installed the plugins though. Thank you for recommendations.

Hi Sissi, as I mentioned previously – your site usually loads really fast… there’s probably not so much you can do to make it faster still, though I do think a caching plugin is always a good idea! Let me know if you have any other questions and decide to give it a go!

Hi MJ – normally you shouldn’t need to manually purge the cache. Unless you changed it, the plugin will, by default, purge the cache when a post is published or updated. You may want to consider flushing the cache when you install a new plugin. Basically – cache-kills should be done whenever changes have been made to a site which aren’t being reflected to the end-user. For example, if you change the logo of your site and users are still seeing your old logo… clear the cache and it should be fine!

As a side-note: as the site admin, by default, you’re probably not seeing cached pages yourself, so changes might appear instantly for you. Try accessing your site on a different web browser where you’re not logged in to WordPress to see “what the visitor sees”. 🙂

Hi Ivy, have you followed the steps in the guide above under the heading “Let’s get caching!” (Near the bottom of the post). You just need to go through the 5 tabs and follow the instructions there to get basic caching set up! Let me know if you’re still having problems…

Thanks for your reply. I did not realize that there were tabs in the instructions but thought it was merely a screenshot. Unfortunately the Page Cache Configuaration and the Browser cache configuration screenshots are too small for me to read.

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Notify me of replies to MY comments

Welcome! My name is Charles and this is FiveEuroFood. My goal with this site is to offer you recipes which reflect that cooking tasty food from scratch is not only easy and fun, but cheap as well. Read More →

What’s Hot…

Navigation

Like this?

By continuing to use the site, you agree to the use of cookies. more information

This website uses cookies. By continuing to browse this site you are allowing FiveEuroFood.com to store cookies in your web browser as well as employing the use of technology which tracks interests and browsing habits in order to serve web advertising. For more information, please refer to our privacy policy here: http://fiveeurofood.com/privacy-policy/