Quick wins to speed up your website

There’s a massive list of things that you can do to speed up your site, often though you need to be have root access to the server that your site is hosted on (or have a pretty good relationship with your host) to be able to really get the most out of it, and have it purring along with a setup just right for your needs, and no more.

Since most people won’t have a very high level of access to their server, often nothing more than FTP, that is all that will be required for the below tips. So without further adieu, lets begin.

Reduce requests

Each time you need to load a CSS file, a javascript file or an image, the browser needs to open up a new connection to the server which all adds up to cost you valuable time. At first it might seem like there’s nothing you can do about this, but in you are in control of how many server requests are made.

Combine multiple CSS files into 1

Often CSS files are broken out into a few files to keep things organised, which does make sense as it’s easier to find what you are after when you need to make style changes, or you may want to load only a couple of your CSS files on one page, but other CSS files on another page, again, it makes perfect sense right?

Think about this though, if you were to combine all your CSS files into one, it would of course be larger but once the user has visited one page on your site, that CSS file will have been cached by their browser so all subsequent pages will not need to load any more CSS files. It also requires one connection to the server to grab the CSS, not 3 or 4 to get each individual CSS like you normally would do it.

The tradeoff is that you force all users to download all CSS regardless of which page they are viewing, but as noted above, they only need to download the one file, with one request, once, and it’s cached for all following pages.

Combine multiple JS files into 1

Exactly like the above point, combining your javascript files into one will have the benefit of the user only having to download the one file, once.

This isn’t as practical though, as often the javascript file that you are using isn’t something that you wrote, it’s something that was downloaded as a plugin to get some extra functionality on your site. While it is still applicable, it will mean that upgrading your javascript files if a new version comes out will be a bit tricky, so this will need to be done with some thought into what you are prepared to join together, and what you want to be left alone for future ease of upgrading.

In general, javascript files are often larger than CSS, so some common sense should also come into play here if you have some heavy javascript that is only used on one page…

Use a CDN where possible

A what? A Content Delivery Network. Basically it’s a group of servers that all host the same files, and depending where the user is, the closest server will serve the file to reduce latency.

This has a few benefits, first of all it can often have a better speed in downloading the file to the user, and secondly, it allows the browser to have more open connections to download files (browsers can typically only have a set number of connections open to a given server, if you spread the requests out to different servers, you are essentially allowing for more concurrent downloads to speed up the load time), and finally you take a load off your server and keep your bandwidth down.

It’s often expensive to setup your own CDN (and out of the scope of this article) however there are a few files that you may be able to load via a CDN already, like jQuery for example.

Here is a list of common js files that you can load directly from Googles own CDN http://code.google.com/apis/libraries/devguide.html#jquery

Images

Too often you see images on a site that are way larger than they need to be in terms of file size, added to that there’s often a LOT of images required for a given page, both good ingredients for a slow site.

Stitch background images together

There is a technique called CSS sprites that you can use to stitch (almost) all your background images together to be in the one file, so that you only need to load the one image then simply show a portion of that image where it is required.  A great article on how to create sprites can be seen over at CSS Tricks.com http://css-tricks.com/css-sprites/

Optimize your images

For the images that you can stitch together, do your best to make them as small as you can without losing too much quality. If you can’t be bothered doing this manually, try using an online tool like Smush.it (http://www.smushit.com/ysmush.it/) This will load up your page, and squish the images for you ready for you to download from them and replace on your site. In some cases the savings can be huge.

Make them the right size

It’s tempting to just upload an image that is big enough to cater for all needs, then just use the height and width attributes to display it the size you want it, don’t.

If you upload a large image, and display it tiny, you are still forcing the user to download the original large image which wastes their time and your bandwidth. You should always decide what size you want the image to be, and use an image editing program to resize the image to that size and save it in a format optimized for the web.

CSS at the top, JS at the bottom

This is more of a ‘throughput’ item. Meaning that we want the users to see something fast, whether or not it actually is functional just yet. An end user doesn’t really care about the time it takes for the whole site to load as much as you and I, just the time it takes for them to see the content they are after.

Provided the CSS is loaded in the head of your site, it can get loaded early to ensure as the data is sent to the browser it can be styled neatly. The items that require javascript like special effects on hover etc don’t really need to be loaded just yet as the user won’t be having any interaction with the site just yet, so it’s best to keep the connections to the server free for images and other CSS to load. Once they are all loaded, then we can get onto the job of loading the javascript. So it’s best to put these just before your closing body tag.

An added benefit of this is that it safeguards yourself in the situations where you are loading a javascript file from another server, if some some reason that server is down or being slow, it isn’t going to affect the loading of your sites CSS or images. Of course, there are some situations where you are forced to load javascript earlier, and that’s fine, as long as you use this as a rule of thumb you’ll be presenting a page to your users earlier even if the total page load time is the same as before.

Make sure everything exists

It sounds obvious, but attempting to load a javascript file, css or image that doesn’t exist will result in wasted load time. The browser will be looking for something that doesn’t exist, that doesn’t mean it wont at least try. Depending on your sites framework (WordPress, Joomla etc) this may actually result in the browser trying to load your whole ‘page not found’ page in the background when it can’t find the file. The user won’t see this, but it will result in wasted time. You’ll be able to see if this is occurring by using a tool like Firebug for Firefox and opening the ‘net’ tab, or Developer Tools in Safari and Chrome and opening the ‘resources’ tab.

What do you do?

There’s tonnes that you can do to speed up your site, but these I find are a few quick wins. What do you do to speed your site up that doesn’t require server access?

  • http://www.dynamicdan.com DynamicDan

    Looks like you’ve been reading up on Chromes/Googles suggestions. Nice to see more info but..

    I recently did heaps of optimisation in terms of loading js/css for http://www.vid-za.com
    I used a php class to strip comments and white space from my JS, packed it and then enabled compression (deflate, zip) on the server side. I ended up with (script/link) loads like:

    load_assets.php?type=jslib1&compress=zip&debug=0&last_modified=2010080112:30
    load_assets.php?type=jslib2&compress=zip&debug=0&last_modified=2010050112:30
    load_assets.php?type=csslib1&compress=zip&debug=0&last_modified=2010080112:30

    The important thing here was removing the cached files when I update JS/CSS but also to split ‘constant dev’ files and core dev files. Debug could be set to load without packing and with comments for easier debugging.

    TIP: safari and some others may need you to state the total file size (content-length) header for accurate results (web inspector) when compressing/deflating.
    Also, using googles JQuery CDN would only be worth it if you’re loading another of their libs because the benefit will be quite small to none otherwise. However, if everyone just did this, the web would be faster (due to caching).

  • http://www.dynamicdan.com DynamicDan

    Looks like you’ve been reading up on Chromes/Googles suggestions. Nice to see more info but..

    I recently did heaps of optimisation in terms of loading js/css for http://www.vid-za.com
    I used a php class to strip comments and white space from my JS, packed it and then enabled compression (deflate, zip) on the server side. I ended up with (script/link) loads like:

    load_assets.php?type=jslib1&compress=zip&debug=0&last_modified=2010080112:30
    load_assets.php?type=jslib2&compress=zip&debug=0&last_modified=2010050112:30
    load_assets.php?type=csslib1&compress=zip&debug=0&last_modified=2010080112:30

    The important thing here was removing the cached files when I update JS/CSS but also to split ‘constant dev’ files and core dev files. Debug could be set to load without packing and with comments for easier debugging.

    TIP: safari and some others may need you to state the total file size (content-length) header for accurate results (web inspector) when compressing/deflating.
    Also, using googles JQuery CDN would only be worth it if you’re loading another of their libs because the benefit will be quite small to none otherwise. However, if everyone just did this, the web would be faster (due to caching).

  • http://www.studio372.com Matt Trimarchi

    Nice tips. Creating some kind of Rollup feature would be great like what you said dynamicdan.

    A company i do work for actually does it quite well and they use joomla, but i cant say how due to NDA!

    • http://subooa.com Chris Duell

      Yeah, it’s a great idea. As long as the generated file is created and cached correctly it should bring some benefit. Otherwise if it will generate the compressed file each time, which could actually put more load on the server and lose the benefit.

  • http://www.studio372.com Matt Trimarchi

    Nice tips. Creating some kind of Rollup feature would be great like what you said dynamicdan.

    A company i do work for actually does it quite well and they use joomla, but i cant say how due to NDA!

    • http://subooa.com Chris Duell

      Yeah, it’s a great idea. As long as the generated file is created and cached correctly it should bring some benefit. Otherwise if it will generate the compressed file each time, which could actually put more load on the server and lose the benefit.