Optimizing Page Speed in WordPress

Almost three years ago, I was the Web Developer for DCC Marketing, primarily working in WordPress.  While I could put together a nearly pixel-perfect theme together fairly quickly, I didn’t have time for important things like search engine optimization, accessibility, and page speed due to the number of sites I was managing.  When I made the move to focus more on digital strategies over a year ago, we were able to bring in Chris, who was not only a much better developer, but had a passion for establishing best practices on the web.  This freed me up to focus more on SEO and site optimization, but when I turned my attention to our own site, we were in pretty bad shape.  After almost three years, it was in need of a major overhaul, especially as our blogs were driving a majority of the traffic, yet not contributing to our overall search impact.  Everything was slow, clunky, and frankensteined together.  In the meantime, we were building premium web services to clients and writing about best practices on the web while we didn’t have our own house in order.  So Chris, Brian, and I spent a few months rebuilding it from scratch, focusing on user experience and search engine optimization (while trying to maintain the flash of the original).

We launched this new version almost exactly a month ago and ever since then, I became obsessed with how we were ranking.  Despite taking advantage of 301 redirects, we took a big hit going from a single page site with an external blog to everything integrated.  Since then, we’ve been working on testing and tweaking almost every day and our keyword ranking has been growing faster than we expected.

A Starting Place

This morning, however, we finally turned our attention to our page speed – something we knew was important to tackle but kept getting put off as we worked on other optimization.  We knew there were some things we wouldn’t be able to impact, such as all of the things that Revolution Slider requires and will be making a decision regarding that at a later date, but in the meantime, we knew that a 5+ second load time and a 3MB+ page size was entirely unacceptable.

Optimizing Page Speed in WordPress

Images

The easy thing to tackle was images.  Some of the larger images, particularly on the front page, were pretty close to 1MB each and the blog images were adding up as well.  We started with installing WP-Smush and Optimus to optimize everything on our media library and anything we upload going forward.  We were very careful in installing additional plugins, as we didn’t want to replace one problem with another, but after crunching away for an hour, we ran our next test and saw a huge difference.  Keep in mind this is just for the home page, which was our biggest offender.  We cut our load time and page size almost in half, but we were itching to get it under 2 seconds at the most.

images

CDN and Caching

Next, we enabled and tweaked WP Super Cache (which we install on almost every site we build) and subscribed to KeyCDN, a content delivery network (CDN).  Webopedia describes a CDN as:

… a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.

We chose KeyCDN on a reputable blogger’s reputation and their insanely low cost ($0.04/GB/month).  After some configuring, we were able to get under that 2 second mark.  The next step was to see what we could do about that performance grade.

Optimizing Page Speed in WordPress

Query Strings

We knew we were on the right track, but were seeing some issues coming up in Pingdom (where all of these tests were placed) that said we needed to “Remove query strings from static resources.”  After some research, we found that this was, in part, due to how we were caching the site and given our results, didn’t want to risk losing what we’ve already worked on if we didn’t have to.  Some more digging online found this handy addition to our functions file:

function _remove_script_version( $src ){
	$parts = explode( '?', $src );
	return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

This brought our performance grade up to a 99/100, killed two requests, and didn’t set us back too badly in load time.

Optimizing Page Speed in WordPress

What’s Next

We had already been through Google’s PageSpeed Test, which is how we found that Revolution Slider was causing some problems on our mobile results, such as “render-blocking JavaScript and CSS in above-the-fold content” and some errant JS and CSS files that aren’t minified.  We have to decide whether to live with those results or replace that element of our site altogether.  The Instagram feed also is slowing things down a little, although not enough to make enough of a difference in total results.  We are also considering moving to a more premium caching plugin with additional options.  The eventual goal is to get the page size under 1MB and the load time closer to the one second mark.

That said, for a few hours of research and tweaking, we’re both very happy with the progress we’ve made.  Google has clearly indicated that this will have an impact on your SEO, so we knew it was another thing to check off of the list.  We’ll now be watching our search engine performance to see what kind of impact this has and will update accordingly as we make more changes and see improved results.