1. Valid Code

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

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 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

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.

Web Development

• 1. Colorzilla
  
  Colorzilla is a tiny addon which allows you hover over any web page and find the hex code of the colour. Extremely handy when you love a color on a different website.
• 2. MeasureIt
  
  MeasureIt is an ruler overlay to measure pixel widths and heights over a web page. It’s very useful when you want to find whether something will fit in a given space.
• 3. Firebug
  
  A powerful tool which enables you navigate through the coding of a web page.
• 4. Web Developer
  
  Full of features! Has everything you could want to do with website development all bundled into one addon. Very useful for disabling CSS, disabling images and resizing the browser window.
• 5. Screengrab
  
  Every wanted to do a screen shot of the whole web page to show someone? Well here’s your answer, it can copy or save either the visable portion or whole page.

Layout & Design

• 6. Tiny Menu
  
  Gives you masses of unused space back to you compacting the main menu.
• 7. ColorfulTabs
  
  This addon makes your tabs all pretty, as well as making the easier to see.

Social & Communication

• 8. StumbleUpon
  
  If you haven’t used StumbleUpon yet, download it now but be warned that it could waste a lot of your time.
• 9. Delicious Bookmarks
  
  Makes life with Delicious a little easier.

Bonus:

• 10. Ubiquity