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 code means that the web browser doesn’t have to make, swap and fiddle with 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 and other rendering issues.
XHTML and HTML Validator – http://validator.w3.org/
CSS Validator – http://jigsaw.w3.org/css-validator/
2. Reduce the HTTP Requests
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
Images, javascript and CSS can all be compressed and compacted into smaller files without losing any functionality. The Yahoo! built site Smush.it compresses images even further than the Photoshop ‘Save for web’ option, sometimes saving up to 30% of the filesize.
To compress CSS there are easy to use websites such as Clean CSS and CSS Drive Compressor. These sites can remove any unnecessary spaces, semicolons and returns from your CSS files decreasing the overall file size (sometimes by around 13%).
The site Javascript Compressor is the simplest way to cut the size of those large javascript files.
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 a version either hosted by Google or jQuery at Google Code and jQuery Documentation. This can save your load time because if it’s hosted in a central location it might not need to be downloaded at all due to a copy already 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 (unless it’s async).
6. Firefox Addons
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 loaded (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).
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.