Speed up Your Website - Top Tips

Speeding up your site can often be the key to an enjoyable web browsing experience.  There is nothing more frustrating than waiting for your page elements to load.  This is really one of my pet hates.

What can you do about it?  The elements that basically slow your pages down are as follows:

• Http requests within your page, i.e. loading an image;
• Poor or invalid HTML markup;
• Large images sizes;
• Too many images;
• Lots of DNS lookups;
• Uncompressed JavaScript and CSS;

Having lots of http requests on your page is a real performance killer.  Having lots of external JavaScript files, images and CSS files will kill the performance of your site dead.  But what can you do about it?  Well actually the answers are more simple than you might think.

Your JavaScript and CSS can be easily compressed by removing much of the unnecessary whitespace within your code.  What I personally do, is keep a copy of the uncompressed original and when I want to make a change, I do so to that document and then compress it, making another new smaller file.  A great site that will compress your JavaScript for you is jcompress.com.  Simply paste your code into a text box and it will spit your compressed code back out.

Images can also be combined into CSS sprites, which is essentially one image that can be used to style multiple elements from with your stylesheet.  For example, on my site I have one image that serves as a background for all of my h3 headings, main div headings and for the footer of my site.  This then only counts as just one http request, therefore massively decreasing the loading time for my site.  Have a quick Google around for this as there are many good sites that will give you some great examples.

Ok, so now you are left with a few things to do.  You are wondering how to make those big images smaller without having to sacrifice either the quality or the actual size of the image.  You've got several options.  One of them is to fiddle with the image format.  Personally, I prefer PNGs or JPGs for my images as they keep most of the quality.  Removing colours from the image is one way to also reduce your size.  Ok, now that you've done that, I bet that you are still wondering why your image size is large.  Next, have a go at using Smush.it which is a little tool available from the Yahoo Developer Network.  The tool will compress your images for you, removing extra details such as the Meta information which really isn't important for your site.  Smush.it claims that it is a "lossless" tool, which means that it optimises the images without changing their visual quality.  Once the process has finished, the tool reports how many bytes that it has saved you, along with a zipped your shiny new smaller file.

Lastly, poor or invalid HTML markup is also a performance killer.  If you validate your code according to the HTML spec that you outline in your header, your site will load much more smoothly and quickly as your browser won't be trying to make assumptions as to what your code really should be doing.

Don't panic now.  There are a few tools out there that can help you.  I personally develop for Internet Explorer as that is where the market is.  I then test in other browsers such as Firefox, Opera, Chrome and Safari, and more importantly no longer for IE6.  But, when I'm in the process of quality testing and validation, I use Firefox along with the Firebug, Web Developer, HTML Validator and the YSlow plugins.  For me, these are the best tools available for you to test your site.  I advise anybody who is even vaguely interested in performance to check these out.  YSlow and Web Developer are both brilliant tools as you can fully inspect your markup, and YSlow will even grade your site based on your components.

As you can see from the image above, there are several options available to you in YSlow (also a Yahoo Developer Network tool).  Using the components tab, you can see every element in your site.  One minor point to note, Firebug needs to be installed to use YSlow.

Good luck!

What to do with CSS3?

Recently, there has been a lot of activity on the CSS3 front.  W3C have only just released a new set of CSS3 specifications (http://www.css3.info/) that will already change the level of support that the newer generation of browsers can offer.  The change fundamentally means that only updates to these new browsers will enable support for these new specifications.  There aren't any massive changes in there so there aren't any nasty surprises for those learning the new specifications.

These changes are great in terms of moving forward with standardised specifications, but also potentially harmful with the lack of support currently out there. Only a couple of days ago (15th March 2011), Microsoft released their latest and greatest weapon in the browser wars, Internet Explorer 9.

The release of IE9 is a massive roll of the dice for Microsoft.  Microsoft has seen the market share for Internet Explorer slowly erode over the past few years with the continued efforts of the likes of Firefox, Chrome and Safari, all of which have had CSS3 support for quite some time now though.  By all means, none of these browsers are perfect, and all have their own small problems supporting the CSS3 specifications.  They aren't problems as such, more like, their own interpretations of the specifications.  Personally for me, this is potentially worse than the old 'IE box model' problems that plagued earlier versions of Internet Explorer.  What I really don't want to happen is for me to suddenly have to adopt several standards of the CSS3 specifications.  For example, to have rounded borders for an element, we have to look at the following:

• border-radius (Real CSS3 / IE9 specification)
• -moz-border-radius (Firefox specification)
• -webkit-border-radius (Safari / Chrome specifiction)

So now we have the situation whereby if I want to go down the route of making my site work compltely with CSS3, I have to add all of the above just to get rounded borders without having the hassle of using images to make the rounded corners.

To be fair to Microsoft on this, they have correctly followed the specification laid out by W3C.  You never thought that you would see that did you?  Early reviews and personal testing have found that IE9 is a massive improvement in many aspects such as speed, security and usability.  I actually prefer this browser to any other now.  IE8 was too buggy and would eat memory like there was no tomorrow and Firefox would crash for no apparent reason.  I do like Safari, but things sometimes look a bit odd in it, as does in Chrome.  Saying this, Microsoft have done themselves no favours by restricting the platform for IE9 to Windows 7 - probably to encourage those who are still on XP to upgrade.

What I have done so far is give in to these horrible new varied specifications.  A new site that I am working on for myself employs all of the bulleted list above.  I believe that we are currently at the turning point for moving to CSS3, although HTML5 is further away I feel.  All of the latest browsers support CSS3 whilst support for the older browsers will suddenly start to slide.  From what I have read already, IE9 already has 2% of the market.  Not a bad achievement for a product released only two days ago.