Skip to main content Skip to secondary navigation Accessibility Feedback

High performance WordPress

This is part 3 of Wicked Fast Websites, a three-part series that explores why web performance matters and what you can do about it.

WordPress is a powerful tool, and it brings with some unique performance challenges. In part 2, we looked at how to build high performance websites. This article will explore some WordPress-specific techniques and plugins.

Markup Order Matters #

Where you place styles and scripts in your markup can make your site render faster. WordPress provides two functions for loading styles and scripts: wp_enqueue_style() and wp_enqueue_script().

wp_enqueue_style() loads your stylesheets in the header by default—which is where we want them—so you don’t need to modify anything here. wp_enqueue_script() also loads scripts in the header, and we want them in the footer. Here’s the full function:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

That last argument tells WordPress whether or not to load the script in the footer. It’s false by default. Set it to true.

Minify & Concatenate #

Every HTTP request adds additional load time, so you should combine like files. Whitespace in your code can double (or more) the size of your files, so you should remove it.

In WordPress, plugins make this a bit more challenging. Plugins can load multiple, unminified scripts and stylesheets. You can’t go and manually concatenate and minify them, because every time you update your plugins, your changes will get wiped out.

Fortunately, plugins also make this easier.

MinQueue is a fantastic plugin that will minify and concatenate scripts and styles that are loaded using the wp_enqueue_* functions. There are several other plugins that do this as well, but I’ve found MinQueue is the best balance of features, control, and ease-of-use. It even includes cache busting by changing the concatenated file name when you update one of the included scripts or styles.

Minifying your HTML #

Minfying your markup would be an absurd task if you had to do it manually. Fortunately, there’s a plugin that handles that for you. It even drops a handy little comment at the bottom of the markup telling you how much weight you’ve saved. Check out HTML Minify on GitHub.

Google-Hosted jQuery #

HTML5 Boilerplate uses a smart implementation of Google’s hosted version of jQuery that provides a local fallback if the Google CDN is unavailable:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

In WordPress, though, you should be using wp_enqueue_script() to deregister the built-in version of jQuery and register and load Google’s version.

I created a plugin (forked from some great code on GitHub) that replicates HTML5 Boilerplate’s implementation the WordPress way: Google-Hosted jQuery.

Better JPGs #

A JPG compression level of 70 is considered high-quality for the web. WordPress uses a 90 compression rate, which results in substantially bigger files. It also creates baseline JPGs instead of progressive ones.

Image Compress & Sharpen is a plugin that let’s you set your own compression rate, convert baseline JPGs to progressive ones, and if you need to, sharpen your compressed images so that they stay sharp.

If you have a bunch of images you’ve already uploaded and want to recompress them with your new settings, try using the Regenerate Thumbnails plugin.

Adaptive Images #

Adaptive images hold a lot of promise, but the solution needs to be future compatible and not require you overly complex markup. Photon is an extension for Automattic’s JetPack plugin that intercepts image requests and serves resized versions adjusted to fit the user’s screen.

If you’re comfortable with your images being hosted and served from WordPress.com, it’s a great tool.

Gzipping & Expire Headers #

Enabling gzipping and setting expire headers requires you to modify your .htaccess file. If you’ve never done it before, it can be a bit intimidating.

This is what a typical WordPress .htaccess file looks like:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /your-site/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /your-site/index.php [L]
</IfModule>

# END WordPress

Add your changes after #END WordPress.

Prebuild Your Site #

Every time someone visits your site, WordPress needs to create an HTML document by compiling your templates and database content into markup. On inexpensive shared hosting, this can add a lot of latency. Third-party API’s can slow things down even more.

One of the easiest ways to fix this is by telling WordPress to prebuild the HTML documents ahead of time, a process known as cacheing.

There are a handful of plugins that do this, but my favorite is WordPress Quick Cache. Most cacheing plugins have a ton of confusing settings. Just install QuickCache, switch it to “on,” and you’re good to go. It prebuilds your entire site once an hour every seven days, but you can adjust it to happen more or less frequently.

Update: And it automatically updates the prebuilt files whenever you make changes or someone leaves a comment.

The one downside to this is that new comments won’t be seen by others until the next rebuild. The Quick Cache Comment Garbage Collector plugin fixes that by rebuilding just that post or page when a comment is submitted.

In Summary #

  1. Use the wp_enqueue_style() and wp_enqueue_script() functions to control your markup order.
  2. Use MinQueue to minify and concatenate your scripts and styles across multiple plugins.
  3. Use Minify HTML to easily minify your markup.
  4. Use Google-Hosted jQuery to include Google’s CDN of jQuery on your site the WordPress way.
  5. Image Compress & Sharpen will create smaller, faster JPGs, and Regenerate Thumbnails will let you recompress images you’ve already uploaded.
  6. Photon makes it easy to serve adaptive images.
  7. Enable gzipping and set expire headers after the WordPress-specific code in your .htaccess file.
  8. Use WordPress Quick Cache and The Quick Cache Comment Garbage Collector plugin to dramatically improve server response times.

Working with WordPress can make performance a bit more challenging, but some great plugins and functions also make it easier to build high performance websites.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests