Thanks to Dan Shurley, in our office, for penning this week’s post on WordPress and page speed…
“Speed provides the one genuinely modern pleasure.” –Aldous Huxley
“There is more to life than increasing its speed.” –Mahatma Gandhi
Two years ago Google announced it would begin using page speed as a ranking factor. This decision caused lots of people in the blogosphere to speculate and, in the case of webmasters with slower loading sites, to panic. Retrospectively, the Google team has been clear and consistent about its decision to include page speed in its ranking algorithm. They’d like the rest of the web to be like them, lean and mean. And from their standpoint, this makes great sense. For every extra half-second of load time, Google experiences a 20% loss in traffic. They’d also like to make their job of crawling billions of web pages a day easier and more efficient. Of course Google’s job is to point us to content and stay out of the way, not make editorial decisions. Google may not approve of your decision to load a high resolution, 5MB background image of the last thing you ate, but they can’t punish you for it. They’ve insisted that page speed is only 1 of over 200 factors they deem “theoretically interesting” in determining a page’s rank, way down on the list after relevancy, reliability and accuracy. But if Google likes page speed, you probably wouldn’t mind making a little effort to be in their good graces. It is in this spirit that we chose to write a post specifically addressing the task of optimizing WordPress for page speed. Besides the SEO concerns, though, a website that loads quickly instills confidence. Users like page speed. Studies have shown this is especially true of online shoppers, who, on average, bounce after 4 seconds of page loading.
Still with me? The good news is that you’re probably not anticipating the billions of hits a day that Google or Amazon receives, so I’m going to cut you a little slack. This article is not about tweaking a mega-content provider or online retailer for better performance. Instead I’d like to demonstrate ways that even a small WordPress site can benefit from a little fine-tuning and more importantly, smart content optimization.
Render, Reuse and Reduce
If you’ve blogged on WordPress or gone one step farther by developing your own WordPress Theme, you’re aware that one of the platform’s strengths is the way it dynamically renders web pages. In terms of page speed, this presents a unique challenge. How to exploit WordPress’ ability to render pages dynamically without creating too much overhead, resulting in slow loading pages that make lots of calls to the server? One solution is to cache the rendered HTML pages and show users a mostly static version of your site. Occasionally you’ll be adding new categories, tags, images and posts, but for the most part, user comments will be your main source of dynamic content. Caching works because there is often a large window of time where not much changes on your site. Take a minute to think about whether this makes sense for your site, the content you provide, and your publishing timetable. If you’ve decided that caching is right for your situation, you’ll be pleased to learn that there are quite a few caching plugins available for WordPress.
Built for Speed
WordPress may not have been built for speed on a large scale, but for every core element that’s lacking, the community of developers has stepped in with awesome plugins. W3 Total Cache was developed by Frederick Townes to improve the performance of a little social media aggregating site he founded called Mashable. That means that this plugin has been stress-tested on a content-provider that serves millions of visitors a day. As its name suggests, W3 Total Cache is the complete package, and very easy to use. First we’ll need to get familiar with the levels of caching that the plugin provides. Here’s a breakdown, starting from the simplest.
Page Cache
There’s no sense in re-rendering HTML pages that don’t change very often. Page Cache takes a snapshot of your site quite often, often enough that you’re not likely to notice a difference. By default a set of cached pages is created every 900 seconds. During that interval your visitors will be looking at a static cached version of your site. You can shorten this interval if you’d like, depending on how often you think you’ll be updating or adding content. With this first step you should see a tangible boost in page speed.
Minify
You may already be calling upon a minified version of the jQuery library, or have minified your own JavaScript and CSS. Minification compresses your code by stripping out the whitespace and comments. This step can achieve a size reduction of around 20%. This may seem trivial, but it’s an important step in pruning your page size. According to Vid Luther of zippykid, a WordPress-exclusive hosting service, more than half of the battle is reducing page size. “Servers are actually pretty badass these days. There’s really no need to change your server. Change your HTML, render good HTML and your pages will load fairly fast.” Minifying your code is one way to render leaner HTML. I’d argue that minification is a necessary final step in the Model-View-Controller (MVC) development process, a universally adopted coding practice where the markup and presentation layers are kept out of each other’s way. What happens is that big chunks of CSS and JavaScript code remain hidden away from the HTML throughout the development process until the page is actually rendered, often resulting in pages bloated with unnecessary scripts and a sprawling CSS file. Minification helps, but there’s more to rendering good HTML than compressing your files. More on that later.
Database Cache
If you’re on shared hosting, this is the option for you, and a good starting point. We’re moving deeper down the stack of stuff to optimize, caching parts of the database that don’t change often. Note that by enabling database caching you’re decreasing the response time of your site. This plugin suggests only enabling database caching if object caching is not available. Depending on your hosting environment and the level of control you have over your server, there may be a better option. If you’re on a Virtual Private Server (VPS) or a dedicated server, you can delve even deeper with object caching.
Object Cache
You’ve ditched your shared hosting plan in favor of a dedicated server or VPS, giving you more granular control of your hosting environment. This is as deep as we’re going within the scope of this article. Take a look around. It’s dark down here. With object caching we’re actually precompiling the PHP libraries and code that render our dynamic pages. Object caching involves storing the “opcodes” created by this precompiling process for reuse. Why get involved in this scary back-end stuff? The reason is that PHP is a scripting language compiled on the go each time a server request is made, unlike traditional programming languages which compile code once in advance. Object caching eases the strain we place on the server by making it interpret all that PHP code over and over again. It follows that since WordPress runs entirely on PHP code, this option is like a small hit of crack for our hardworking server buddy.
Final Thoughts
There are even more advanced measures that can be taken on the server-side, but I’m going to defer to Vid Luther’s wisdom and trust that my server is doing its job. Sure, I could ditch Apache in favor of nginx, a lightweight server that ships with less baggage, but I’d be in over my head. I could get hooked up with a Content Distribution Network (CDN), but as Luther advises, CDNs shouldn’t be thought of as catch-alls. “Some sites see improvements, some are actually faster without a CDN.” Again, scale is a major factor here, as is the nature of your content. If possible, you may want to reconsider serving up those huge, high quality images, or relying on an array of third-party hosted social media buttons. Optimizing well is largely a matter of making judgment calls, knowing what to optimize and why. To this end Google Analytics is your best friend, allowing you to target pages that load the slowest and make the appropriate adjustments.
I’ll leave you with this simple list of actions you can take immediately to optimize your site, along with some of the reading material I consulted in putting this article together.
- Switch to a VPS. If you’d prefer a more managed experience, there are a number of WordPress-tailored hosting options like zippykid and wpengine
- Reduce the size of your images, or try image sprites and tiled backgrounds
- Cache pages and database options with a plugin like W3 Total Cache or WP Super Cache
- Minify your JavaScript and CSS
- Advanced: Precompile your PHP code with W3 Total Cache’s Object Cache option.
Further Reading