WordPress Page Caching
In the previous post, I talked about some of the ways in which your WordPress site can slow down. As a template system, WordPress does a lot of work behinds the scene to create the HTML pages your customers actually see, and there are lots of areas where performance can start to degrade. In the next few posts, I’ll talk about some of the ways I’ve improved WordPress performance. I’ll use one of my client’s production sites as a test case, and I’ll use the Google page speed analyzer to track performance with each step.
To get a baseline of where the site is starting from with performance, I run it through the analyzer as-is with no tuning. If you’ve never used the analyzer, you provide it a URL for any page on your site and it gives back 2 scores, one for mobile and one for desktop. As we all know, Google is placing ever higher importance on sites being mobile friendly so it’s important to create all your content with this in mind. When I run the client site through the analyzer for a baseline I get the following scores:
Mobile: 17, Desktop: 21
Yikes. Not great at all, but luckily we have lots of areas to improve on, the first of which is WordPress page caching. Remember that every time WordPress generates HTML, it’s doing so via a series of database queries to assemble content and format it. For most pages you serve, the HTML doesn’t change all that frequently (if ever), so doing all those database queries and formatting for every single user is wasteful.
WordPress Page Caching
Enter one of my favorite plugins: W3 Total Cache. This plugin is an absolute must have for any WordPress site, and the free version offers just about every feature you’ll need. I have tried out several plugins, but this one is the best combination of functionality and compatibility with the various themes I use for client sites. The biggest thing it does for you is save the final HTML for every page and post on disk, and serve that back to users instead of letting WordPress generate it every time. Only when you save or update the post does the HTML get regenerated. You can also force a cache flush from the admin console, which is recommended anytime you upgrade WordPress, your theme, or plugins.
After installing the plugin and enabling page caching, I see how the score has improved with the page speed analyzer. Note that I visited the site beforehand with my browser to force the HTML to be generated, ensuring that the analyzer tool got served the cached version:
Mobile: 43, Desktop: 38
Now we’re getting somewhere. The score has doubled in both cases, simply by caching the HTML instead of regenerating it for every request. Now our customers are happy, and more importantly, our servers have a few extra cycles to do other important things. And keep in mind, this is just with the basic settings of the W3 Total Cache plugin. Let’s take a look at some other things it offers:
Minify
Most modern web sites use lots of stylesheets and JavaScript behind the scenes to look fancy and do useful things. While it is often helpful for these CSS and JS files to have whitespace and line returns for our brains, computers don’t really care. And every extra character in those files is more data that has to be transferred between your WordPress site and customer’s computer.
Minify settings all you to remove all the whitespace and new line characters, and in some cases other wasteful characters like comments, so that your file sizes will be as small as possible and reduce transfer times to your customers. I’ve personally had mixed results with these, because a lot of the themes I use include CSS and JS files from external sites. The minify settings are great for files on your server, but when you include files from external sites, you’re at the mercy of that server’s settings. In practice most authors of CSS and JS will provide an minified version of their code, but I have seen plenty of cases where theme authors do not reference them.
CDN
A CDN is a Content Distribution Network, and the goal is to strategically place static web content (images, CSS, fonts, etc) on multiple servers around the world. Normally for small businesses, all of this hosted in a single place on a single server. If that server is on the west coast, visitors from New York will likely have longer page load times than visitors in Los Angeles. By using a CDN, you can push all of your static content to servers in LA, Denver, Dallas, Chicago, New York…you get the idea. The CDN then handles the work of deciding where a request is coming from, and serving the content from the nearest server. This is all transparent to visitors, but can make a huge difference in performance.
CDNs are overkill for most small businesses, but as you scale it may be worth the investment. W3 Total Cache doesn’t act as a CDN itself, but it does integrate nicely with some of the well known CDN services. You can expect to pay around of $75/month for a CDN service.
Browser Cache
This group of options enables various HTTP response headers which give clues to the user’s browser about how to treat content. Most web browsers have some notion of caching, so these headers can be helpful in determining what the browser caches and what it has to ask for with each request to your site.
Database Cache
The Database caching feature simply caches the results of database queries to prevent multiple executions of the sample query that will likely return the same results. I believe that page caching alone is probably sufficient without this, since most of the queries that are running are used to build page content. However there are some queries that are not related to content, so you might be able to squeeze out a few points of performance here.
Summary
WordPress page caching is by far one the quickest ways to boost your site’s performance, and using a plugin like W3 Total Cache makes it incredibly simple. I’ve started using this plugin for all my client sites as well as my own, and the results have awesome. In the next post, I’ll continue to discuss WordPress performance and other ways to improve it.
