Ultimate Guide to Site Speed Optimization for WordPress

In this post, you’ll find everything you need to know, to speed up your WordPress websites. Here, you’ll find the best ways to tweak and optimize your WordPress site to make it’s pages load faster.

Why bother with optimizing loading times? On the one hand, Matt Cutts of Google has officially stated that Google takes loading times into account when ranking websites. If you have a slow-loading site, that can mean lower rankings in Google and less traffic. Bummer.

Much more importantly, site speed is probably one of the most important conversion factors of any website, simply because it’s first in line. People of the tech-age have short attention spans and your meticulously designed landing page will do no good if it loads slowly and most of your visitors leave before they even get to read your headline.

A study done by KISSmetrics analytics shows that if your site hasn’t loaded within four seconds, you’re already losing 1 in 4 visitors. After ten seconds, it’s closer to one 1 in 3. If you can slash your site loading time from 10 seconds to below 4 seconds, that alone can mean an effective increase of 20%+ in traffic.

Testing Your Page Loading Speeds

The first step in the optimization process should be a “before” test, so you can assess your site’s performance as it is, right now. The best free testing tool you can use is the one provided by GT Metrix.

Note that the tests are done for individual pages, not entire websites. I recommend that you test your homepage, your blog page (if you have one) and one or two of your larger pages and posts (one with many images and comments will be ideal). The goal is to test your most popular entry pages (your analytics program will tell you which ones those are) and some of your slowest pages, to get the best kind of data to work with.

Here’s a short video about interpreting the GT Metrix results:
[thrive_borderless type=’custom_code’]

[/thrive_borderless]
 

After implementing the steps described below, I re-tested the same page shown in the video. The page-size was reduced from 831KB to 428KB, the total number of requests went from 121 to 74 and the loading time went from 8.27 seconds to 1.98 seconds, which is an improvement of 76%.

The (Non-WordPress) Basics

There are a few basics to site speed optimization, many of which are directly reflected in the feedback that you get from testing your pages with GTmetrix. You can find a good overview of those basics here: High Performance Websites.

Many of these basics are automatically taken care of, when you are using WordPress. For example, WordPress properly separates stylesheets from page content, most plugins that add scripts add them to the bottom of the page code, where they belong and many other factors will also be taken care of, given that you are using a well-coded theme.

In the following, I’ve compiled what I believe are the relevant optimization tips for WordPress, specifically, ordered roughly from most to least important.

Hosting

Your hosting provider plays a very crucial part in how quickly your pages load. Content distribution services such as the one recommended further down in this post can bring very significant speed improvements, even if your web hosting service is very slow.

Moving to a different hosting provider might be necessary to get maximum speeds, but it’s not exactly a “quick fix”. Because of this, I have not covered the hosting issue in greater detail, in this post.

I have personally tested and gotten very good results with WP Engine, a hosting provider specializing in WordPress and site speed.

1) Reduce Plugins and External Calls

When using WordPress, it can be tempting to go on a “plugin binge” and load your site up with all sorts of fancy bits and bobs. Some themes also tend to be overloaded with features. In general, more plugins and more active features translate to longer page loading times. The first step in optimizing the speed of your WP site is to see if you can put it on a features- and plugins-diet.

To determine which features and plugins need to go and which ones get to stay, ask the following question: “Does this support my site’s conversion goal?”

Your site could have image sliders with 3D transition effects at the top of every page, Google maps widgets inside the posts and dynamic flickr image-galleries in the sidebar. Those would all be quite nice, but would any of them help you get better conversions?

To be able to answer this question, you need to determine what your conversion goal is. In some cases, your entire site will have just one conversion goal (e.g. visitor signs up for your product, service or membership). In other cases, you might have multiple conversion goals, but even then, you should have one main conversion goal per page. If your goals are to get people to engage with you and to get them to sign up to a mailing list (these would be typical conversion goals on a blog), then a flickr image gallery will only be a potential distraction, sending people away from your site.

With this in mind, go through your plugins list and cut the fat wherever it’s possible. Plugins that make calls to external sites are often the worst offenders, in terms of loading speeds. Also ensure that you are using only one analytics service and don’t have multiple tracking scripts loading.

The next two steps are quite easy to do and require no modifications to your actual site or it’s content. Even if you do nothing else, the following will dramatically reduce your page loading times.

2) Install the W3 Total Cache Plugin

W3 Total Cache is an excellent caching plugin for WordPress. Caching is the process of storing static parts of your website, so that they only need to be loaded once, instead of on every single page-load. Caching will speed up your website and will be especially noticeable for return visitors as well as visitors that browse several pages on your site. Install the plugin and then follow the steps below for optimal W3 Total Cache settings:

In the general settings, enable page cache, database cache and object cache and select the “disk” caching method, unless you’re using something other than a typical shared hosting setup.

Deactivate the “Minify” option in W3 Total Cache. I measured slightly improved page-loading times when I let CloudFlare (see below) handle the minification, instead of W3 Total Cache, so I recommend you do the same.

Here’s what the W3TC settings should look like:

In the detailed “Browser Cache” settings, tick the boxes to activate expire, cache control and eTag headers:

In the detailed “Page Cache” settings, make sure the option “don’t cache pages for logged-in users” is activated. This way, you will not have to switch into preview mode when you want to make changes to your template.

Finally, in the general settings, deactivate “preview mode” to actually deploy W3 Total Cache for all your site visitors.

3) Sign Up for CloudFlare

CloudFlare is a free service that aims to help you protect and speed up your website. I was a bit skeptical at first, but after a few months of extensive testing, I have come to the conclusion that CloudFlare is nothing but awesome. You can can sign up here and get started right away. CloudFlare features the best sign-up process I’ve ever seen and the instructions are so clear that I’d be wasting your time if I added a tutorial here.

Once you’ve signed up, your site will be served through CloudFlare’s content distribution network. Your data will be served to your visitors from the node closest to them in the distribution network, which increases page load speeds. In addition, CloudFlare identifies and keeps track of spam bots and malicious scripts, reducing the risk of your site getting hacked, reducing spam comments and saving bandwidth (in my case, bandwidth consumption is reduced by almost 50%).

On the settings screen for an individual domain in your CloudFlare settings, you can leave many of the options in their default settings.

Activate the minification of HTML, CSS and Javascript:

When you minify code, it simply removes the unnecessary white-spaces and line breaks, so that a browser can parse through all of the code more quickly. Here’s an example of one simple style element in CSS:

 #signupform {
width: 720px;
clear: both;
float: left;
background: #f6f3bd;
border: 3px solid #f4c14b;
padding: 20px 40px 0 40px;
margin: 44px;
} 

As you can see, that’s nine lines of code and a total of 145 characters, including all the spaces. The minified version of this bit of code would look like this:

 #signupform{width:720px;clear:both;float:left;background:#f6f3bd;border:3pxsolid#f4c14b;padding:20px40px040px;margin:44px;} 

Now, the code is reduced to just one line and 123 characters. Minifiying all of a website’s code can save hundreds, if not thousands of lines of text and make it that much more efficient for browsers to download. The only reason code is not written like this in the first place is because then it would be almost impossible (for a human) to keep an overview over what’s going on.

As I’m writing this, the Rocket Loader feature in CloudFlare is still in beta. I activated it and tested my site in all major browsers and since I could not detect any issues, I kept it activated. This feature sets up all of your javascripts to load asynchronously, which simply means that the rest of the page content doesn’t have to wait for the javascripts to load, before it can display and your visitors will be able to view your content, even if scripts are still loading in the background.

Remember to switch on the “Development Mode” (bottom of the settings page) whenever you want to make changes to your theme settings or edit your CSS, otherwise you won’t see the changes on your site, right away. After changes are made, click the “Purge Cache” button to make sure all visitors will see the updated version of your site.

Images are usually the largest files on a web-page and as such, they contribute to long loading times. Here are the steps you can take to optimize your images.

4) Solve the Gravatar Problem

As you saw in the short video at the beginning of the post, one of the big speed-issues on my example page was Gravatar. Gravatar is the service that automatically adds the avatar images next to the comments. A simple solution would be to deactivate avatars completely, but that will probably make your comments section look a bit bleak. Plus, the avatars help keep track of who’s saying what in discussions, so they are more than pure vanity.

A better solution is to set the default avatar to “blank”. This way, users who have set up an avatar will still get it displayed next to your comment, but users without a Gravatar associated with their email will get no avatar showing up, instead of one of the default avatars. With default avatars activated, your site needs to make an external call to Gravatar for every single image displayed and this can be a real speed killer.

A third option is to add your own default avatar and host it on your site. To do this, open your functions.php file and add the following code:

 add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/YOURICON.png';
$avatar_defaults[$myavatar] = "CUSTOMNAME";
return $avatar_defaults;
} 

Upload your own image for the new default gravatar to the folder of the theme that you are using (/wp-content/themes/yourthemename). In most themes, there’s an “images” folder that you can use. Change “/images/YOURICON.png” to the path and filename of the file you uploaded. Also change “CUSTOMNAME” to whatever you want to call your new default avatar.

Even if you simply upload the default “Mystery Man” icon and have it loaded from your own server instead of from the Gravatar servers, that will already speed up your site significantly (that’s what I’ve done on this site).

5) Choose the Right Image Format

The two best image formats to use online are JPEG and PNG. As a general rule, JPEG is better for photographs and complex images with many colors and PNG is better for images with sharp contrasts, lines and text. Also, PNG allows for transparancy in images, while JPEG does not. JPEG is a “lossy” compression format, meaning that you can reduce the size of an image, but it will be noticeable, as the image quality is also reduced. PNG is a lossless compression format, but can’t reduce complex image sizes to the degree that JPEG can.

When in doubt, you can always produce an image in both formats and compare quality and file-size side-by-side. Note that JPEG is not a “working” format, since every time you save a JPEG file, it gets re-compressed and the quality diminishes slightly.

6) Image Optimization with TinyPNG and smush.it

To further reduce the size of your images, you can process your PNGs with TinyPNG. TinyPNG does a lossy compression, but it does it amazingly well. It will often reduce image sizes by up to 70%, but the difference in quality is almost impossible to detect, even when comparing images side-by-side. I highly recommend running all your PNG images through TinyPNG before uploading them.

Another option (that also works for JPEG) is the WP smush.it plugin. This plugin will automatically run any image you upload through Yahoo’s smush.it, which is quite an efficient, lossless image compression service. I did not manage to find any visible difference between smushed vs. un-smushed images, even though smush.it will usually reduce image sizes by anything from 5% to 40%+.

Smush.it can slow down your image uploads and it doesn’t work with all hosting providers, but it’s worth a try.

7) Lazy-Load Your Images

This step is only relevant if you use many images in your posts. It can also be useful if you have thumbnail galleries displaying in your theme (e.g. related posts and recommended posts list with thumbnails). You can install the jQuery Image Lazy Load plugin to improve the browsing experience on your site. With this plugin activated, only the images above the fold will load (i.e. only the images visible in the visitor’s browser window), when a new visitor arrives at your site. As soon as they start scrolling down, the images will load, just before they come  into view.

This will not only speed up your page loads, it can also save bandwidth by loading less data for users who don’t scroll all the way down on your pages.

8) Use Image Sprites Instead of Separate Images

Images used in static elements of your site (background images, header, footer and sidebar images) should ideally be combined into sprites. This means that instead of loading many individual images, you load just one image, containing all of the graphical elements. Then, you specify which portion of the image to show for each graphical element.

Sound confusing? Here’s a simple example: many blogs have some “follow me” type social media buttons, linking to the site owner’s twitter, facebook and other accounts. Let’s say I want to display five such buttons in my sidebar and I’d also like each button to “light up” when you hover over it with the mouse cursor. To set this up, I’d need to upload 10 individual images (one normal and one lit-up version for each of the five buttons).

A much better alternative is to combine all of the ten images into one single sprite like the one on the left. There are three advantages to this. The first is that the image with all the buttons combined is slightly smaller in data-size than each of the images added up. The second advantage is that using sprites requires less code on your site, than using individual images. The third one is that now, when someone visits your site, only one single image needs to be loaded, instead of ten separate ones. The fewer individual elements need to be loaded, the faster your website is.

To find out exactly how to to do this, I recommend you read this detailed guide on creating image sprites.

To automatically create a sprite for your background images, you can also try this tool.

The size and structure of your database can also affect your site’s performance. Here are my two recommendations for taking care of your database:

9) Install the Revision Control Plugin

Left to it’s own devices, WordPress will store every variation of every post or page you’ve ever created. When you’re writing a post, every time you click on “save draft”, the current version will be stored indefinitely. Even if you just edit a post to fix one simple typo and then update it, you’ve now got two versions of that entire post stored in the DB.

Revision control fixes this. I recommend that you set it to store a maximum of two or three revisions per post or page. That way, you still have something to fall back on, in case you make a mistake, but your database isn’t unnecessarily bloated with dozens of stored revisions.

10) Install the WP-DBmanager Plugin

WP-DBmanager is a plugin that can backup, optimize and repair your WordPress database. This makes it useful for security purposes as well as helping you keep your database lean and mean.

In the “DB Options”, I recommend that you set it to automatically optimize your database every 2 weeks to every 2 months, depending on how often you update your site with new content. Also set it to automatically back up the DB every once in a while.

Testing Your Results

Once you’ve implemented any or all of the changes recommended above, re-test your pages with GTmetrix. Also test your site in every major browser, to check all of your pages and all of your site features. In my experience, especially Javascript powered features seem to be prone to conflict with certain plugins and settings.

You can use Browser Shots to test how your site renders in various different browsers. Before testing, flush the cache in both W3 Total Cache and CloudFlare, to ensure that all of your latest settings are in place for the test.

If you have any questions or additional recommendations, I’d love to hear about them in the comments! I’d love to hear about your experiences/results with using this guide to speed up WordPress sites of your own, as well.