WordPress Optimization

I’ve been developing themes for WordPress for a couple years now, and the thing that I always notice with my own installations – and especially others as well, is speed and performance of the Front End. I often see post after post about different techniques of WordPress Optimization, but I rarely ever see the techniques that I’ve recently found. I’m not sure if people just haven’t gotten around to applying those techniques, or maybe WordPress devs don’t care as much about performance as they should.

Quick and Easy WordPress OptimizationThe Lowdown

As a Front End Developer, ensuring your website has great performance and tight optimization is absolutely crucial. In recent years as internet speeds increased, that wasn’t quite as much of a concern. But now that mobile has such a huge market share, it’s becoming a big deal to think about once again. Most mobile users (particularly those using phones and tablets with 3G and 4G connections) have a data plan, and most of those have limitations of 2Gb/month, or 3Gb/month, sometimes higher, and sometimes even as low as 200Mb/month. A typical website probably won’t ever come close to 200MB in size, unless you’re loading a 30 minute video straight on the page.

WordPress Optimization with GZip

The quickest and easiest way to WordPress Optimization is to enable GZip on your server. There’s a website I recently stumbled upon that checks if GZip is enabled, as well as checking if Google and Bing are indexing your site, among several other fun features. The website is called ismyblogworking.com. If you have GZip enabled, awesome! If not, here’s how you do it:

Open up your ftp and find the root folder where your installation of WordPress is located. In that folder should be a file called .htaccess. Open that up, and you should see the following lines:

# BEGIN WordPress

RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]

# END WordPress

To enable GZip, copy and paste the following code directly after the # END WordPress line.

#Gzip

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript

#End

Essentially what this does is compresses the HTML, CSS, JavaScript and plain text so that your server uses less bandwidth. It compress everything similar to when you throw a bunch of files into a .zip file, so everything comes through smaller and you get a quicker page load. On this site, it wasn’t huge to begin with, only about 20k of data. After GZipping it, it turned into about 5.5k of data, which is a 73% improvement. Not bad!

WordPress Optimization by Minification

Hey, that rhymed!

Another easy way into WordPress Optimization is by using a powerful plugin called W3 Total Cache. The main benefit of this plugin is that it caches EVERYTHING. It utilizes browser caching, page caching, object caching, and database caching, which by themselves are pretty awesome. Browser caching stores data on a user’s computer so that the first time a user loads the page, it saves images and things so that instead of re-downloading them on the next visit, it just pulls up the cached file. Most times when something is cached, it will have an expiration date – like my orange juice that expires today! (I should probably toss that soon.) That way if the particular resource gets updated in the future, the user will at some point see the updated file.

The best part (in my opinion) of W3 Total Cache though, is the ability to minify all your front end files. Not only does it minify them, but it also can COMBINE them for you. Example: you load up 3 stylesheets, and W3TC combines all three of them, removes the original links to them, generates a new link with the combined file, and serves up that instead. It does the same thing with JavaScript too!