5+ Steps to Speed up your Website

Here are some innocent tips and tricks to get your website to load faster behind the scenes. Most of them are either simply good practice or tools to help you out along the way. If you have any more ways to speed up your site leave a comment at the bottom of the page.

1. Valid Code

valid

Valid code means that browser doesn’t have to make, create and merge your code to make it work. A page with the correct DOCTYPE and structure will render quicker within the browser, it also helps with browser compatibility.

XHTML and HTML Validator – http://validator.w3.org/

CSS Validator – http://jigsaw.w3.org/css-validator/

2. Reduce the HTTP Requests

firebug

As well as the time it takes to download a file off the server it also takes time to request the file, so the less actual requests you make the faster it will be. A brilliant example of this is CSS sprites which combine multiple images into one and use the CSS background property to only show the portion of the image you require.

A Guide to Reducing HTTP Requests – http://www.dailyblogtips.com/speed-up-your-site-reduce-the-http-requests/

CSS Sprites Tutorial – http://css-tricks.com/css-sprites/

CSS Sprite Generator – http://spritegen.website-performance.org/

3. Compress Images, CSS and JS Even Further

smush

Images, Javascript and CSS can all be compacted into smaller files without loosing any functionality. The Yahoo! site Smush.it compresses images even further than the Photoshop “Save for web” option.

To compress CSS there are easy to use websites such as Clean CSS and CSS Drive Compressor. These site will remove unneed spaces, semicolons and returns from your CSS files usually decreasing the file size by around 13%.

The site Javascript Compressor is the simplest way to cut the size of those large javascript files.

4. Use JS Libraries and link to Google’s CDN

Using javascript frameworks like jQuery, MooTools and Prototype means that you need less odd bits of javascript here and there, a javascript framework can usually do the same job while compacting it into an easy line or two.

Once you have a framework and you want to use it on your website it is an idea to use the version hosted by Google on their servers over at Google Code. This can save your load time because if it’s all hosted at the same place it might not need to be downloaded at all because it might have been cached.

5. Javascript at bottom

This is a really simple, yet effective tip. A few years ago I would always start a page with the standard DOCTYPE, HTML, title, meta, css, javascript then body but now it’s realised that it’s better to add them to the bottom of the page as they are not usually needed until last of all. A prime example is the Google Analytics tracking code which they recommend sits at the bottom of the page.

6. Firefox Addons

edturtle

Using Firefox addons like Firebug and the Web Developer Toolbar can seriously help you when optimising your code. Firebug enables you to check how long it takes for a specific file to be requested and load plus much more while the Web Developer toolbar allows you to disable images, CSS and javascript to see how your website looks and works without them and once again much more.

As pointed out by ’sampada’ in the comments IE Add-ons such as IE developer Toolbar can also be very useful and help with cross-browser testing.

So there we have it, some nifty ‘lil tricks to get your website in front of the people who matter faster. Any comments? If so leave them below.