Optimize WordPress Loading Time

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 <head> 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
// https://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
<ifmodule mod_deflate.c>
	<filesmatch '.(js|css|ico|txt|htm|html|php)$'>
		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.


<IfModule mod_expires.c>
	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'


<IfModule mod_headers.c>
	<FilesMatch '\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$'>
		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.


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.


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 <head> of the page. Make a note of all the <link rel="stylesheet"> 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.


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 <script> elements in your page’s source and make note of them (in order). Once you have your list create a scripts.combined.js file and begin to copy/paste the code from the files on your list in.

Once you have all your scripts wrangled into one file start doing the same with the scripts from your list that you did with the styles in the previous step. The same process’ should apply because the above article also covers the removal of scripts being placed by plugins.

Another step you can take with JavaScript files is to load them asynchronously instead of the direct method of inclusion used by the WordPress theme and plugin development best practices.

// ===============================
// Loading scripts anychronously
// https://jeremyhixon.com/sandbox/next/snippet/loading-javascript-files-asynchronously/
// Usage: getScript('script.js', function() { /* callback */ });
// ===============================
function getScript(url,success){
	var script = document.createElement('script');
	script.src = url;
	var head = document.getElementsByTagName('head')[0], done=false;
	script.onload = script.onreadystatechange = function(){
		if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
			script.onload = script.onreadystatechange = null;
getScript('script_1.js', function() {
	getScript('script_2.js', function() {});

This script will allow you to load your script(s) as the page renders instead of requiring they be loaded before the page can continue to load. The getScript function has a callback that enables you to load scripts in a certain order if the need arises. For instance, your scripts might be dependent upon jQuery being loaded to run. In this case you would use the first getScript to load jQuery and then, within that functions callback you’d use another getScript to call your scripts file.


If you’ve gone through all the trouble above you should be thankful that this is what I’m ending on. Minifying is so simple and easy because there are a number of tools out there to do it for you. If you’ve compiled all your styles and scripts into a single file then you probably have 2 VERY large files now. Files that can be compressed to speed up their load time as well.

Page Speed

The Google Page Speed plugins for both Firefox and Chrome will minify the code for you and give you links to the minified code in the results. It may take a little reading to find them, but they’re there. I recommend while you’re here that you check out Page Speed’s analysis of your pages load time. There are a number of useful suggestions in there for speeding your site up. My score usually hovers around 94-96. That’s mostly because I user responsive images and because of that I can’t specifically state the height and width of the images. I’m also using Picturefill as mentioned above which loads images with JavaScript so that throws PageSpeed off a little bit as well.

YUI Compressor

If you choose to do it yourself, I like YUI Compressor because it can compress your JS and CSS files on the same page, though not at the same time ;-). I’ve used this numerous times and have never gotten a bad result from it. You just copy/paste your code into the window, choose what it is your compressing, make whatever changes you want in the checkboxes (though I never do) and hit “Compress”. You’ll be taken to a window below with the compressed version of your code to be copy/pasted back into your original file. Cake.

No matter what method you use to minify your files I cannot stress enough that you test, test, test your site to make sure all the functionality is present after the modifications.


I hope you’ve enjoyed reading as much as I did toiling over the details to actually accomplish this on my website for the first time. It’s no small task but the rewards could be fantastic. If nothing else you’ll have a site that loads as quickly as possible and that should make your viewers happy. Which should make you happy. Cause that’s why were here. Sharing information.

If you have any insights or recommendations please share. I’m here to learn as well.