3 Ways to Speed Up Wordpress and Reduce Load Times

Travis McAshanDevelopment
Mar 2010

Let’s say today is Moving Day, and one of your friends has offered to lend a hand.

At the outset both of you are in good spirits and optimistic that the work will be done before suppertime. However, as the day wears on it becomes apparent that not only will your move still be in progress at sunset – it won’t be finished today at all. You think to yourself, “How could this have happened? I didn’t think I even owned enough stuff to last for two days’ worth of moving!” As you mentally review the process that led to this development, you notice three things that especially hindered your progress:

You drive a Mini Cooper, as does your friend, which severely limited the number of boxes the two of you could carry at any given time. This made for a great many trips back and forth between old residence and new – no small task considering that the two houses are on opposite sides of town.
You and your helper spent an inordinate amount of time on your three futons. Happy as your were to inherit these, your first futons, from the previous owner of your old home, you nearly pulled your hair out trying to carefully maneuver each one out the front door and onto the Cooper’s roof, only to have to repeat the process in reverse at the other end.
You, the burgeoning rock star, meticulously arranged your expensive guitars and amplifiers in front of the door of a storage closet that you were certain would never be opened. This would have been fine, except that you forgot to first stash in said closet your hideously ugly luggage received as a college graduation present a decade ago. As you couldn’t very well throw away your beloved grandmother’s gift to you, and there was nowhere else to store it, you were forced to carefully extract your instruments piece by piece until the door could be opened.

Every time you click a link to a new web page, an electronic version of Moving Day takes place. All of the text and graphics that make up the page live on a server and, at your request, make their way from the server to your browser window. The speed with which this information loads can be hindered by the three general factors analogized in the above scenario. Namely, these factors are number of HTTP requests, size (or weight) of page load, and order of page load. Adequate attention paid to these can mean the difference between a six-second wait for a slow page and a seemingly instantaneous load, which can in turn mean the difference between a potential customer lost and one kept. What follows is a brief overview of the three factors.

“Rent A Truck” – Reduce HTTP Requests

Modern web pages are an amalgam of both internal and external data. That is, some of the information which makes up what you see onscreen appears directly on the underlying HTML document, and some of it exists in separate locations to which the HTML document links. Every time your web page needs a bit of the external data, it has to ask for it from the server. Each such instance – called an HTTP request – leads to time spent loading; more requests equal more time. If you’re editing the source document of your own web page, review and determine whether any of your external scripts, styles and background images can be consolidated. Another good idea is to set up expire headers for the various pieces of your site. When a browser is given permission to keep a snapshot of a given page for future reference, it can more quickly load that snapshot on the next visit to that page than having to rebuild the page from scratch. Anything you can do to reduce the total number of new requests will help.

“Fold The Futon” – Reduce Size Of Load

Even when all of this data is consolidated into fewer documents, it still “weighs” the same as it did separately. For example, 50 lines of jQuery script will take the same amount of time to be read and to run regardless of where it appears in the loading process. On the other hand, if those 50 lines could be turned into 25 we would see real improvement. Minifying reduces document length by removing line breaks, white space and comments. Many popular jQuery scripts (including the core jQuery script itself) are available in minified forms, and for WordPress users there are plugins available (such as W3 Total Cache) which can minify your documents automatically. On a larger scale, the size of the transmission from server to browser can be reduced by way of gzip compression. Here is a good article which explains the ins and outs of gzip.

“Rearrange The Room” – Change Order Of Load

This factor applies to stylesheets and scripts. Stylesheets should always appear in the head of the document; this allows the page to quickly load the content into the appropriate layout rather than having to re-format content that is already loaded. Perhaps more critically, any script that can be moved to the bottom of the page should be. Scripts are inherently unable to load concurrently with other components of the page – including other scripts – so any script that precedes page content constitutes a road block to loading that content. The strategy here is to prioritize the speedy appearance of the page layout, because failure to accomplish this fundamental task is a quick route to a higher bounce rate.

This article is by no means an exhaustive discussion of page load issues. For Firefox users, I highly recommend downloading the YSlow add-on to lead you through the process of understanding these factors. It grades your page on a scale from A to F and assigns grades to individual elements of the page’s construction that have influenced the overall performance. The add-on also contains more in-depth descriptions of recommended improvements than have been provided here.

You can download YSlow here.
(YSlow requires that you first download the Firebug add-on. If you have not yet downloaded Firebug, you can do so here.)

Be the first to comment

Related Posts

Related Posts