How to make your web RUN
Author: Rafie

I believe in speed and precision. A good web designer and developer will not only particular about the design but also the page loading time. Let’s jump into reality check before I tell you how to make your website run instead of crawl. In Google Analytics , there are 6 basic connections which are T1 , DSL , Cable , Dial Up , OS3 and ISDN. For each of these, they load this website according to the engineered connection speed. Powered by WebSiteOptimization, this blog will take about 3.18 seconds with T1 1.44Mbps and 19.77 seconds with ISDN 128 K connection. See there difference?

» Question : Why should I bother about it?

Well, if your page doesn’t load in 4 seconds, the user will just skip over it. Agree? So, you don’t want this thing to happen do you? So, bear with me for few minutes and I hope this might help you. So here it goes…

There are 3 main elements that you should tackle to optimize your web. There are…

» Graphic/Images

If your website uses images, the best practice is to know what you are doing. It’s pointless to use black and white image that saved as .jpeg (which load true colour image). Instead, you can use .gif where it loads 256 colour system. Remember this, JPEG is suitable for photographs and high colour composition images. Other option is PNG which is quite useful because it can be used with 24-bit colours and transparent (but not all browser support this). 

» CSS & Coding

To make it simple…

Rule 1: Use Shorthand CSS. {colour:#fc0 instead of #ffcc00}

Rule 2: Combine CSSes into one (header.css+body.css+footer.css = style.css)

Rule 3: Link properly. http://www.google.com/ instead of http://www.google.com 

Rule 4: Put <img height=”value” width=”value”> in your image tag in your markup language.

Other option: Tidy up your CSS with Clean CSS.

» DON’Ts

1. DON’T use 5.0MB picture on your website AND resize it too 400px times 300px. Crop it using any graphic editor such as Photoshop or GIMP (free).

2. DON’T use background sound/music, unless IMPORTANT. If crucial, use loop sounds.

3. DON’T use heavy flash without download bar. (They hate to wait for uncertain things).

4. DON’T use table based design because hundreds of <td> might upset the browser and bad in terms of SEO as well.

I hope you find this helpful. I don’t actually cover most of it but this list is enough to tell something. Happy editing and see you at the finishing line.

References

1. Google Webmaster blog

2. DailyBlogTips - 50 Tips to speed up your website

3. Website Optimization