OK, so first off I don’t actually consider myself a slacker when it comes to WordPress, but you probably got here because you’re looking for a quick and easy way to speed up your WordPress website. If that’s the case, you’re in luck because I’m about to share my one-two punch for speeding up my WordPress sites that’s been working pretty well for me lately. (OK it’s a bit more than a one-two, but I promise it’s pretty darn easy!)

The Goal: Achieve a faster website with minimal effort

Let’s get our goals straight from the beginning here. I’m not looking to micro-analyze every single detail regarding performance or achieve a score of 100 of Google’s PageSpeed Insights. That type of stuff just doesn’t cut it in the real world where we all have limited time and a limited scope of expertise. This stuff can get complicated very quickly, and I don’t want a complicated solution. I want a quick and easy process that I can apply to all sites that I build to give them a boost in speed.

Why you should care

Let’s also discuss for a moment why this is important. Do you care about your bounce rate? Do you want people coming to your site to actually stay and interact with your content/brand/business? Do you want to be prepared in the event of a sudden traffic spike so that your website doesn’t explode? Do you care about your website’s SEO, and how its page speed factors into its ranking? I could go on, but the benefits derived from performance optimization are well documented throughout many corners of the interwebs. ‘Nuff said.

What we’re going to do

Though the steps outlined below we will accomplish the following items that will improve performance:

• Server-side caching of pages/posts
• gzip compression of files delivered to visitors
• Client-side browser caching
• Compression and minification of HTML, CSS, and JavaScript files

Enough already! Just tell me how it’s done!

Alright then, let’s do it!

But first…

If your web host is incredibly slow there’s probably no amount of performance optimization that can help you. Switch to a better, more reliable provider and then come back here afterward. Don’t worry, I’m not going anywhere.

1.) Install and configure the Quick Cache Comet Cache plugin

EDIT: March 10, 2016 – Quick Cache changed it name to Zen Cache, but is now changing it’s name again to Comet Cache

Install the freely-available Comet Cache plugin. If you do just one thing, do this.

What is caching?

There are a ton of people who understand it and can explain it more eloquently than myself, but essentially it bypasses time-consuming database queries by storing the pages/posts of your website as static files that can be quickly pulled up and sent out to your visitors. This is an especially good thing to do if you think your site may get a spike in traffic that will really give your web server a run for it’s money.

Why Comet Cache?

Because it’s so dead simple! It doesn’t scare me with zillions of different options like W3 Total Cache that all seem like they’re going to break something. I’ve also noticed that the caching directory that Comet Cache writes files to doesn’t seem to generate as many files as W3 Total Cache does. Perhaps that can be adjusted by playing with some of those confusing W3 Total Cache settings, but I never felt like figuring it out. To me, Comet Cache just seems leaner and meaner, and most certainly has less room for user error.

After installing Comet Cache there are only two settings you need to apply:

1. Enable caching
2. Set an automatic expiration time. (I like to do 3 days)

There really aren’t many options available with Comet Cache so I trust that you’ll figure out how to do these two steps pretty easily.

Disclaimer: The free version of Comet Cache does not integrate with CDNs the way other caching plugins do. If you need CDN integration, look elsewhere or upgrade to the paid version. This may be a deal breaker for some.

2.) Some .htaccess goodness

Those who have astutely studied the Comet Cache options may have noticed the highly recommended gzip compression option. Unfortunately this can’t be set via Comet Cache itself. Instead it needs to be pasted directly into your .htaccess file, so you’ll need do to do that either via FTP, or you can use the excellent WordPress SEO plugin by Yoast which has a setting that allows you to directly edit your .htaccess file.

Warning! Make a backup of your .htaccess file first.

Paste the following code into your .htaccess file:

[code]<IfModule deflate_module>
<IfModule filter_module>
AddOutputFilterByType DEFLATE text/plain text/html
AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
</IfModule>
</IfModule>[/code]

I don’t know a ton about gzip compression, but in a nutshell it increases speed by compressing files from your web server and delivering them to your visitor more efficiently, so that sounds like a good thing to me. Exactly how much this helps I couldn’t say, but considering it only takes a minute of effort I figured it’s worth it. Here’s a more in-depth article about gzip compression.

Now if you were to run your site thought Google’s PageSpeed Insights test at this point you would likely get a message telling you to “leverage browser caching.” And you’re probably going to be like, WTF Evan! I already took care of the caching part, right?!

Well, sort of. Comet Cache handles your server-side caching, but browser caching is different. The good news is that it’s also a 1-minute job of a quick copy/paste into your .htaccess file, so let’s do it. There are different ways this can be configured, but I’m going to show you how I like to roll:

 

[code]<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 week”
ExpiresByType image/jpeg “access 1 week”
ExpiresByType image/gif “access 1 week”
ExpiresByType image/png “access 1 week”
# ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
# ExpiresByType text/x-javascript “access 1 month”
# ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 week”
# ExpiresDefault “access 2 days”
</IfModule>[/code]

 

I’m a mere mortal and I didn’t come up with this code myself. I stole it all from Thomas Griffin right here. He can explain it better than I can, but essentially we’re telling the web browsers of the people who are actually visiting your site to hold your image, css, pdf, files, etc… in their cache for a set amount of time. In theory, this won’t make the initial page load of your website faster for visitors, but it will make subsequent page loads faster because some of the necessary files will already be stored on the user’s computer. (PS – Thomas Griffin also has an awesome WordPress slider plugin that I frequently use.)

3.) Minify CSS, JS, and HTML using the Autoptimize plugin

Install and configure Autoptimize. It’s a minification plugin. What that means is that it’ll take all of your CSS files and combine them into 1 single CSS file with all of the extra spaces removed to make it as small as possible. It’ll also do the same for all of your JavaScript files, and the HTML of the page itself. Personally, I don’t go for the HTML minification because I like the source code to look pretty, but that’s just me being weird.

The settings are super easy. According to your personal preferences, check the boxes to:

• Optimize HTML code
• Optimize JavaScript code
• Optimize CSS

This plugin can be a little hit or miss so YMMV. On some of my sites combining all of my JavaScript files into 1 single file has caused errors that I couldn’t quite track down, so I’ve had to forgo the JS minification. There are options to exclude certain CSS or JS files from being compressed and minified, and I’ve used that on other occasions when I’ve been able to track down the offending script. These situations seems to be the exception of the norm. When things work out it’s pretty rad and can cut down significantly on the total size of the page.

There’s a note about the plugin never automatically clearing your cache files, but in all but one instance I’ve never found the size of the cache to become very large. (Time one time the cache did continue to grow was on a site I adopted and did not develop myself. There was something funky going on with the JavaScript that was creating a unique JS file on each page load. Eventually I gave in and disabled all JS minification on that site after not being able to track down the problem.) In short, I’d keep an eye on your cache folder for the first week or so after installing Autoptimize. If it isn’t growing crazy huge you should be good.

Note that if you’re following along at home, you’ll need to clear the cache within Comet Cache after configuring Autoptimize in order to get everything working right.

4.) Profit

OK, not really. But maybe. If the goal of your website is to sell more products or generate more leads, improving the performance can very well lead to more money in your pocket.

If you try out these steps and have questions post in the comments below. This technique isn’t perfect by any means. It’s just something that’s been working for me lately, and like everything, it’s a work in progress. Let me know how it goes for you.