Front-end Performance Tuning My WordPress Site

In my last post, I wrote about managing critical CSS and just how critical performance is. As you may be able to see by now, performance is one of my favorite topics.

Back in September of last year, I got a chance to see Tim Kadlec give his talk, Reaching Everyone, Fast at From The Front. I walked away with a few pretty great tidbits from the talk that left me inspired. So after I got back home, I decided to spend some time improving the front-end performance of this site.

Reducing Requests

One of the first things that I always look at when diagnosing poor performance is the number of requests on a page, along with the size of those requests. In fact, you’ll notice that a lot of the steps that I took were directly related to my desire to reduce the number and size of requests that my site was requiring visitors to make.

In my case, I was loading up some fairly large featured images (though they were using picturefill to load the appropriate size for the device, they still accounted for around 70% of my total page weight) for each of my posts on the homepage.

I decided to not to display featured images, both as a design decision and in order to shave some page weight. I’m still not totally sold on not displaying a featured image, but haven’t been convinced to go back quite yet.

Conditionally Loading Scripts

One thing that I noticed, when digging into the console, was the fact that I was loading a lot of scripts on the homepage that I wasn’t actually using. So, I inventoried which templates each script was needed for and set up each script to only load where it was needed.

For example, Disqus, my commenting system of choice, actually loads its scripts on every page. That’s not necessary, since the only time I’m actually displaying Disqus is on single article pages. After a quick peak into the Disqus plugin code, I found a couple of places where they were enqueueing scripts. So I threw this function in my functions.php file.

function jonbellah_scripts() {
    if ( ! is_single() ) {
        // Prevent Disqus from outputting unneeded js.
        remove_action( 'loop_end', 'dsq_loop_end' );
        remove_action( 'wp_footer', 'dsq_output_footer_comment_js' );
    }
}
add_action( 'wp_enqueue_scripts', 'jonbellah_scripts' );

Removing Query Strings

Resources with a query string, a “?” or “&”, in the URL are not cached by some proxy caching servers. Removing the query string from the URL can help to improve performance.

function remove_query_strings( $src ) {
    if ( strpos( $src, 'jonbellah' ) ) {
        $parts = explode( '?', $src );

        return $parts[0];
    } else {
        return $src;
    }
}
add_filter( 'script_loader_src', 'remove_query_strings' );
add_filter( 'style_loader_src', 'remove_query_strings' );

Switched My Host

One of the things that I discovered when I was digging into the numbers was just how slow my server was. Even after making a lot of these performance improvements, I was still not seeing the greatest times. I decided to ditch my existing host and sign up with Media Temple.

After a couple of weeks on Media Temple, I decided to go ahead and cancel my previous hosting and migrate all of my sites over. I’ve been extremely happy.

Measuring the Difference

Now here’s the key: as you can see from the screenshot in the tweet above, it’s always a good idea to set a baseline by running your site through some performance tools before you start making any changes.

Just a quick note: some things on this site have changed since this comparison was taken, but performance optimization is something I try to pay close attention to when making new changes.

Doing so will allow you to quantify exactly how much your effort impacted your site. Always make sure you have something to measure your effort against.

There are a few tools that I recommend starting with:
Google PageSpeed Insights
Pingdom
Web Page Test

I also recommend measuring more than just the actual performance gain, but also how that performance gain impacts your conversion rates.

Jon Bellah I am a full-stack web developer, speaker, and occasional writer. I live in the beautiful city of Denver, Colorado. I am currently employed as a Lead Front-End Engineer at 10up. You can follow me on Twitter at @jonbellah.