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
Enough already! Just tell me how it’s done!
Alright then, let’s do it!
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
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:
- Enable caching
- 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:
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 font/otf font/opentype application/font-otf application/x-font-otf
AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
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:
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 application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 week”
# ExpiresDefault “access 2 days”
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
The settings are super easy. According to your personal preferences, check the boxes to:
- Optimize HTML code
- Optimize CSS
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.
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.