Built for speed

Cut down your page load times with these few easy steps

1comments

The average page size on the web today is over 1.3mb, according to the HTTP Archive *.

That’s a lot – at least by rural broadband standards, where web speeds can easily dip below 100kbps (from experience of my parents’ web connection).

It’s not just visitors’ patience at stake here. Web page load speed is one of the many ranking factors considered by Google in the algorithm responsible for deciding search results. We can’t know precisely how much of an emphasis is placed on page speed, but it makes sense: slow, laborious and poorly hosted websites aren’t much fun to browse.

As a website owner/developer there really isn’t a good reason why you shouldn’t work hard to optimise your website speed.

So how big is my website?

The ever-useful Web Developer Toolbar (for Firefox & Chrome) can provide a quick answer. Just go to:

Information > View Document Size

For example, here’s BBC.co.uk:

bbc

Here’s mine:

mysite-size

So how fast is my website?

There a few great speed test resources out there to find exactly how fast your website loads.

There’s even a built-in monitor in Chrome developer tools (click ‘Network’ and refresh the page).

I recommend http://www.webpagetest.org/ for their extremely comprehensive utility. It’ll tell you where the delays occur and what you can do to improve your website loading. There’s a handy scorecard at the end so you know where to improve.

Speeding Up Your Website (Beginners)

1. Pick a decent host

So your uncle Larry has a server. It may be an old Windows machine humming away in a dusty attic, but it’s cheap, right?

When it comes to hosting you get what you pay for. For small businesses and personal websites a shared platform is a logical choice because it’s more financially viable. However when you share a server you also share processing power with all the other websites that are loaded onto that machine.

If you have a decent hosting company this doesn’t usually pose too big of a problem – the server will have the resources to cope. Larry’s server, on the other hand, will sit there scratching it’s head until your visitors exit your website in a huff (or the hard disc crashes).

If your website is built with big heavy software – e.g. Magento – you need a host that’s optimised and load balanced, otherwise you’ll irritate your customers with endless delays. For a web shop or a large business website a dedicated server is the only way to go.

2. Don’t use flash

Flash is a source of a lot of evil out there on the internet – enormous load times, resource heavy animations, a sudden, terrifying burst of elevator-music.

Seriously, people. Stop it.

Flash doesn’t work on iPhones, iPads etc. (It barely works on PCs either). You might have found that ‘perfect song’ to accompany your endoscopy website but trust me, not everyone is enjoying it as much as you are.

Intermediate

3. CSS

First things first – get all your styles into a single stylesheet. It reduces the number of server requests. This in turn speeds up your page.

You should then focus on writing your code as tidily as possible so you can read it back later on when you need to make a change.

Google encourages website owners to produce the cleanest code possible and good practice is that you write your CSS with this in mind.

Your stylesheet can be reduced in size in a few easy steps using basic shorthand code:

.big-box {
border-size:10px;
border-style: solid;
border-color: green;
background-image: url( 'images/big-box-background.jpg' );
background-repeat: no-repeat;
background-position: left bottom;
}

becomes:

.big-box { border:10px solid green;
background: url( 'images/big-box-background.jpg' ) left bottom no-repeat; }

Taking this a step further, some developers employ OOCSS (object-oriented cascade stylesheets) to develop ‘skins’ for their design. Put simply, this enables you to make and reuse specific styles across your design. Need to use that big green border again and again? Create a single ‘green-border’ class and apply that style. You’ll then add the class to whatever elements need the border.

These sorts of techniques can greatly reduce the length of your stylesheet, as well as making it easier to parse.

4. Resize images

A classic beginner’s mistake is to get lazy with images.

I come across a surprising number of websites that do this: load up a huge straight-from-the-camera 3 megapixel photograph, and then use CSS or HTML to resize it down to a 150 pixel button. You know immediately if it’s happening because you’ll see it load so slowly, line by line, as your web connection groans in protest.

If you don’t have Photoshop you can still download decent free image editing software to resize your pictures before you upload them to the website.

Even once you’ve resized your images they’ll still take up the majority of the page load time for your website.

Luckily there’s a lot of data here that isn’t needed – image compression is a quick and easy way to eliminate hundreds of kilobytes of data.

Photoshop’s Save For Web dialogue enables you to pick an appropriate format and (usually) a quality for your images. Aim to get the most out of the file size without compromising too much on the quality.

Once that’s done, run your files through a compressor – there are a few really good tools to do this:

If you’ve not done this before the results will amaze you!

5. Proper JavaScript loading

A simple way to speed up your page load is to weight the heavier items at the end of the loading process.

JavaScript files can make up a hefty portion of your overall page size. If you’re loading a number of different files – e.g. jQuery plugins – place these at the end of your page (i.e. in the footer), so they’re last to load.

If you are using the jQuery library this ought to be loaded in the header – I recommend using Google’s AJAX library (their Content Delivery Network, or CDN).

If the rest of the jQuery is sitting at the foot of the page your visitors can use the site, read the page and navigate through your menu without needing to wait for all those extra scripts.

6. Minification

Speaking of jQuery: any hosted plugins you do use ought to be the properly minified or packed version of the file. This will ensure you’ve got the smallest possible file.

Though it’s possible, I’m not a fan of minifying your other files – CSS, and so on – because it makes the process of updating the site that little bit more longwinded. This should only be something to consider if your CSS file is seriously oversized.

Advanced

7. Cache Control

This one’s a real speed boost for return visitors or persistent browsers. Once all your content is loaded, set a cache duration using your HTACCESS file.

Certain files making up your website don’t need reloading on every visit – or even every few visits. Your images won’t change much, so why not cache these for an extended period? Here’s the HTACCESS data for simple caching: note that most files are set to 1 hour, CSS and JavaScript to 1 week and image files to 1 month.


# Enable expiration control
ExpiresActive On


# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"


# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"


# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"

8. GZIP compression (deflate)

GZIP isn’t always supported but when it is, the filesize savings can be significant. Say goodbye to JS and PHP files running to dozens of kb – instead you can expect these files to load up close to single figures.

GZIP works by allowing the browser to request a compressed version of the file from the server. If it’s able to, the webserver will send a compressed version back which the browser decompresses and displays it.

Below I’ve opted for the simpler DEFLATE compression technique (which does much the same thing). Add this to your HTACCESS file:


# Set compression for: html,txt,xml,js,css
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript


# Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html


# Set header information for proxies
Header append Vary User-Agent

Finally, you may want to test your compression has been successful – load up the page using this tester utility.

Summary

This is by no means the definitive list – there are a few techniques that I will come back to another time. There’s always more to do to speed up your website – but the positives are reward enough for the time it might take you.