Optimize WordPress Loading Time

Jeremy — Sun, 17 Feb 2013 20:43:07 +0000

Something that goes without saying is that the load time of a page is important. Google takes load time into consideration with it’s indexing algorithems. It’s not as big of a consideration as say, relevance, but it matters. In the grand scheme of things, what do a few seconds matter? Turns out they could matter quite a lot.

According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds.

If that’s the case, then sites with a lot of content running off of a CMS would probably be advised to minimize the size and number of requests being made to load their pages. That’s where this article comes in. I’ve recently redesigned my own site while still using WordPress and at the end of the process spent some time doing just that, minimizing requests.

Database Requests in Themes

If you’re developing a theme for mass distribution then it’s going to be difficult for you to cover all the possibilities that might be required of a theme and cut down on database requests. If, however, you have purchased a theme or are developing your own you can do your best to reduce the number of times your theme needs to make a request of the database. One of my favorite ways to do this is by reducing the number of times you call bloginfo().

If you think about the number of times a theme might need to use this function it can get rather extensive. There are parts of the that will only call it once, like charset, and there are parts that you’ll need over and over again like ‘stylesheet_directory’. These parts in particular can be lessened by storing those parts in a variable or in an array and reusing that instead of making the call every time you need it.

Below is a sample of some code at the top of my functions.php file:

// ===============================
// Reducing database calls
// http://jeremyhixon.com/sandbox/snippet/reducing-database-calls-using-bloginfo/
//
// Global variable used to reduce database queries on values commonly requested in themes.
// Use "global $bloginfo;" at the beginnng of any theme file and/or function to be able to access the values.
// ===============================
global $bloginfo;
$bloginfo = array(
	'name' => get_bloginfo('name'),
	'description' => get_bloginfo('description'),
	'admin_email' => get_bloginfo('admin_email'),
	'wpurl' => get_bloginfo('wpurl'),
	'stylesheet_directory' => get_bloginfo('stylesheet_directory'),
	'stylesheet_url' => get_bloginfo('stylesheet_url'),
	'rss2_url' => get_bloginfo('rss2_url'),
	'charset' => get_bloginfo('charset'),
	'language' => get_bloginfo('language'),
	'text_direction' => get_bloginfo('text_direction')
);

This code creates a $bloginfo array that I can load at the top of every one of my theme files by stating global $bloginfo; and then use it as many times as I need without creating any additional database queries. This can certainly be trimmed to suit your needs. As I said before things like ‘charset’, ‘language’ and ‘text_direction’ will only be used once if at all.

Compression, Expires and Caching

A few more server side tweaks here, this time using Apache. In this instance we’re using a little gzip compression and some Apache settings to control when the browser updates it’s copy of the files we’re using in our theme. These tweaks are super easy, as long as your server is configured correctly, as they all take place in the .htaccess file.

Gzip Compression with mod_deflate

# Use Mod_deflate to compress static files


SetOutputFilter DEFLATE

The above code checks for the mod_deflate module and then, if it exists, runs through all the files that should be static on your site and sends them through the “DEFLATE” filter. This will, essentially, compress them before sending them to the browser. In my case I included all my JavaScript, CSS, icons, text, HTML and PHP files.

Expires


ExpiresActive On
ExpiresDefault "access plus 1 year"

Above, we’re sending a note to the browser informing it that after it’s downloaded files from our server that it won’t need to download them again for another year. What’s up there is a very harsh setup as it’s not specific to any one kind of file. But that’s what I use on my CDN to speed things up. You may also set specific rules for specific mime types such as:

ExpiresByType application/javascript "access plus 1 week"

Caching



Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT"

Here we’re setting the “last-modified” header for any of the files that fit into the FilesMatch parameter to a date very far in the past. This gives the browser the impression that the file hasn’t changed in some time and, thus, doesn’t need to download it again once it has it stored locally. The targeted files in this case are media files that, typically, don’t change, like images and videos.

Optimize Images

One of the more mundane aspects but also one of the more essential and certainly one of the most often overlooked tweaks is image optimization. Photoshop has it’s “Save for Web” dialog. When you upload an image through WordPress’ media manager it gives you a status during the process of “crunching”. But I’m not just dead sure that this is enough. When it comes to really squeezing the last little bit of file size out of an image I only use one tool, ImageOptim.

Even a file that’s been “saved for web” and “crunched” will be further reduced in size by ImageOptim. It finds the optimal compression format for your image and also removes comments and color profiles. It works with PNGs, JPEGs and even GIFs.

Polyfills

Another great way to minimize the request size, polyfills are something I initially began considering because of a “mobile first” website I was developing. The one I have been using is called Picturefill by Scott Jehl. What Picturefill essentially does is take advantage of media queries to look at the size of the viewport loading your site and then load an image appropriate to that size. There is no image loaded initially so if the user visits on a mobile device with a very small screen Picturefill will load a much smaller image. This takes less time to load, and thus, speeds up your site.

Combining CSS and JS Files

More on the front side of things we have our many, many stylesheets and javascript files. WordPress is notorious for plugins and plugins are notorious for having their own styles and scripts. It might take some work to clean all these up but the benefits are astounding.

CSS

Log out of your WordPress site so that you see what your readers get when they visit your site. View the source of your page and take a look at the of the page. Make a note of all the references you see. Create a file called style.combined.css in your theme folder, wherever you like to put your CSS files. This will serve as the point where we consolidate all of our CSS files into one.

Go through each of the stylesheets you found and copy/paste them into the file you created. Try and keep them in the order they are in the source if you can as well. That will keep you from having any unfortunate and unexpected styling changes when you’re done.

After combining all the CSS into one file it’s time to go through and remove all the stylesheets you were pulling from. This could be time consuming. Some plugins like Contact Form 7 have globals that you can set to turn off the inclusion of it’s included stylesheets and scripts. Most will probably not have such an option so you’ll have to remove them yourself. If you follow the instructions on this article it should prove fruitful. If after following the steps in that article you still have styles that won’t go away, you may have to dig around in the plugin files themselves to remove them. If you can avoid this I would because as soon as you update that plugin next the style will, most likely, come back.

Once you’ve cleaned up the styles add in your style.combined.css file in whatever fashion you choose and thoroughly test the site.

JS

Combining JavaScript files can be a little trickier. You have to do a lot of testing for this part to make sure that you include everything and get it in the right order. Go through the same process of finding all the

Jeremy Hixon