One Comment
If you’re a web design or development ninja (even aspiring ones count) and you’ve designed your own theme with gadgets and gizmos and plugins and tracking stuff, then you’ll undoubtedly be aware of the load-factor. Even worse, if you’re located in some third world country where dial-up modems are this year’s Christmas gifts to yearn for – this might present a significant problem.
So you’ve got your theme set up, the CSS file loads perfectly, the sidebar is happy, the content displays nicely and you’re in generally good mood… until one of those pesky little beta testers flag something your way. Usually they say something along the lines of “Oh, it’s very nice and all, but it takes so long…Can you, like, uhm, make it like Google or something?”.
Rest assured, there are solutions. Sadly these solutions come at a price (don’t worry you don’t need to pay us… unless you really, really want to): firstly, the willingness to experiment, and secondly you’ll have to download and install some tools (perhaps even a new browser).
If you haven’t down so already, get the latest version of firefox. Any web ninja worth his salt will have this on his desktop as the button most clicked (next to Dreamweaver of course). Then go to tools » add-ons at the top (right above where you enter the web address). Click on “Get Add-ons” and in the space provided type “Firebug” to download and install.
As soon as that’s done, pat yourself of the back as you’ve taken a very important step into adulthood. You can now talk about Wordpress Optimisation with gusto at parties.
At the bottom right of your page, there should be two icons (a bug-like looking creature, and a speedometer). These are the things that you’ve just installed. Click on the bug, it should either open in a new window or take up half the space of your browser window. Alternatively, go to tools » firebug and click on “open firebug”.
Once open, click on “Net” and make sure it’s enabled. If it’s not, next to the tab there’ll be a arrow for a drop down menu where you can enable it.
As soon as it’s enabled, you’re set to go. Make sure you clear your browser cache – otherwise we’ll have a fake benchmark. Navigate to your website and be amazed. It maps out exactly which part of your website takes how long to load and where the problem is at. Based on the Tiny Giant Studios, the un-optimised version of it loaded up in 4.2 seconds. Which isn’t too bad considering, but there’s still a lot more that could be done.
Usually the biggest culprit in taking up loading time is un-optimised pictures. Unless it’s transparency you’re after, you’re going to want to save them as jpg’s, make sure you reduce the dpi to 72 (that’s all you’re going to need online), and perhaps even reduce the quality. To find out how, you can check out Lynda’s Blog on how to do this in Photoshop.
Failing images, the design of any theme is usually littered with HTTP requests. If you haven’t got a clue as to what this is: if you open up a theme’s index.php, header.php, and footer.php there’s usually a lot of code that looks something like this:
This is what makes your theme so flexible and generally makes your code a lot more DRY (Don’t Repeat Yourself – Go on, Google it). But on the other hand, it makes for a lot of unnecessary HTTP requests. HTTP requests are things that ask you server for information: every time there’s a request, your browsers asks the server “I need something, could you send it to me please?”. And this is what takes A LOT of loading time!
Now how am I supposed to know what to hardcode into the theme? Glad you asked. As soon as your page had loaded and everything is in order, go to view » page source. In IE it’ll be view » source.
Voila, this is what your page looks like once the browser has digested all the commands and requests. Now can you see that where there was once PHP code there’s simply HTML code. Now you want to copy that HTML code and replace the PHP code. For example instead of using
<link rel="stylesheet" href="" type="text/css" media="screen" />
You could hardcode it into your header.php like this:
<link rel="stylesheet" href="http://tinygiantstudios.co.uk/wp-content/themes/TGS/style.css" type="text/css" media="screen" />
You could do this for all of the following:
Loading pages are affected by filesize. Obviously. Now we’ve covered images earlier, but there’s another thing you could do to make a very important file even smaller. Unless you’re a Jedi coder (I’m in the training academy), you need to shrinkwrap your CSS File. On the Tiny Giant Studios website I took my CSS code to a website called Clean CSS, reducing it from 1500’ish lines of code to just fewer than 200.
Also, when using JavaScript libraries you’ve got two options, either embed the file onto your website, or send an HTTP request to your server to ask another server for that file. In short, you’re asking your webhost to go hang out at a place like Google, ask if they’ve got the JavaScript Library you’re looking for, and then send it back to you. There’s pro’s and con’s to each side, as for me, I prefer embedding my own version. Remember to embed the shrinked version of the library and not the full version (they’re actually identical, but one is coded to be much smaller than the other).
An example in the Tiny Giant Studios website is that we use jQuery to power the cool Lightbox effects on the portfolio page. As you’ll see in the source code it is the jquery-1.3.2.min.js that makes this possible, and I’ve included the “min” (presumably for minimum) version of the file. When using a JavaScript Library, always include the “min” version…
No optimisation would be complete without touching on Wordpress plugins and their effects on loading times. Every plugin in you install, from Akismet to SEO, will directly affect your load time. One of the worst offenders according to popular lore is a plugin called Lightbox (that is the Wordpress plugin and not the JavaScript plugin). So how do you go about, checking which one should be doomed to the abyss? Glad you asked. Again.
The easiest way is to go into the Wordpress admin area and deactivate all of your themes plugins. Now it’s simply a matter of going back to your browser, clearing your browser cache, and reloading your page with the Firebug running at the bottom.
This is now an example of a site that is as optimised as it can get without getting mental with the code in the nether regions of your theme. Make a note of the loading time at the bottom. Now start re-activating your plugins one by one. As soon as you start noticing a significant jump in the loading time, you’ve got your culprit. What you do with the result though is up to you. You could delete it and find another, similar, plugin; Or you could try our last ditch optimisation trick.
Contrary to what you may think, adding yet another plugin might save your bacon in terms of loading time. At the same time, however, if your site is heavily visited (or commented on) then it might prove bothersome.
The plugin in question is wp-cache or wp-super-cache. My preference goes with the former. Essentially what it does is it takes an HTML “snapshot” of how your page is displayed once everything is loaded. Once a user comes to your website, instead of waiting for Wordpress to finish up all the HTTP requests, it simply displays an HTML generated version which is A LOT faster to load. The downside to all of this is that the page displayed to the user is not necessarily the freshest copy! In other words, if this page was cached (or you could say “loaded into memory”) 3 days ago, then the page displayed will be that of 3 days ago… along with the comments that were made… 3 days ago. Fortunately, however, you get to adjust the settings as to how long a cache lasts for.
I sincerely hope this has given you a firm grounding in making your Wordpress theme load faster. There’s still a few more tips and techniques out there, but they require your too mess around with the code considerably and risk messing around stuff that aren’t supposed to be messed with. If you know of any other techniques, please respond below – I love learning new ways of doing things.
Yahoo’s Bible on optimising websites for loading times.
Dan Masters on how to find the culprit by deactivating plugins
Wordpress Forum on slow loading Blogs
Using Firefox to diagnose slow performance
Joost de Vaal on speeding and cleaning up Wordpress
I’ve written an advanced guide on optimising a Wordpress blog – Click here to check it out!
New Gadgets also included this post on their blog.