How to Increase the Speed of Your Website

by whlooi | Filed under BSL5.com, General, Interesting, KeyEll(Kuala Lumpur), Networking.

You have a blog, you have quality content, you have a good product to sell, you submitted your site to SEO for better search performance to drive more traffic to your site and you have done all the things to boost it, but have you think of the speed loading of your site could have been the problem for low readership?

These days, people on the internet are very impatient and most of them simply will not sit around and wait for your pages to load. Make sure you are not losing your visitors because you have a slow loading site. One of the goals in designing and setting up your website should be to have it load as fast as possible.

There are dozens tips that you can do to adjust the impact of website loading speed.

I will walk you with three (major) of the more effective techniques in this post:

  • Have you compressing the size of your graphics?
  • Have you using tables to speed up the load time of your website?
  • Have you get rid of the redundant code?

Compressing your graphics
The idea behind compressing your graphics is to make the graphic file size smaller so that your web page loads faster. It’s very logic and straight forward, but somehow people do get this forgotten.

Time and time again people build graphics in Photoshop and think they have the graphics down to the smallest size. Well the truth is they don’t! Most of the time the graphics still can be further compressed for smaller size. The problem is that these programs are so powerful and featured rich that most users don’t know all the tricks that can be used to really compress graphics down to the bare minimum.

Once your graphics are done, I recommend going to Photoshop (the only graphic software that I familiar with, sorry) and adjust some of the setting before compress them. The first thing to do is make sure you aren’t using too many colors in the graphics. For example some people have 16 million colors in their banner … when in actuality they are using only three real colors. Use the minimum number of colors in your graphics. Always use 256-color mode, or if you can, you might even try 16 or 8-color graphics mode. Bare in mind that our brain really can’t differentiate well between 16bit ant 24 bit color. So 256-color or lower would be the best option for online graphic.

After the adjustment, compress it by “saving them for web display”. This one technique alone will compress your file size so much it will make your head spin! As a side note, Photoshop CS2 and onwards has one of the best compression utilities that will do all the compression for you and generate small file sizes while preserving the quality of the image.

Employing Tables
If you have a really long and heavy graphics page, the second thing you can do is split them up into tables. The idea behind using tables is to split the page up into different sections. The browser maps the page/graphic immediately and automatically starts loading them into the first table so it appears as the rest of the page is loading. This allows your visitor to start reading/seeing right away while the rest of your page is loading.

Say, for example, your file size is 10K and you break this down into 5 tables of 2K each. As soon as you hit the 2K load period of your 10K file, the browser will drop that information into the table so that your visitors have something to read on the first part of your page while the rest of your information is still loading. Normally the browser would wait for all 10K to be fully loaded before it would display on the page.

This is a great way to trick the browsers into displaying the first part of the page while the rest of it is loading. It gives your visitor something to read right away and makes it appear as if your page is loading faster. This is something to do with psychology.

I recommend that you take this a step further by making your table shorter at the top and longer at the bottom. This way your table loads really fast at the top while the bottom takes a bit longer. It makes it appear as if your page is loading even faster and gives the illusion of a really fast website! And, most importantly, your visitors won’t leave because they are tired of staring at a blank and loading screen.

Remove Redundant Coding
The third way to speed up your website is by take out those redundant HTML tags. If you are using any of the “What You See Is What You Get” (WYSIWG) editors like Microsoft FrontPage (don’t laugh, some of us still using it) you will find lots of excess code. These editors put a lot of redundant HTML on your page… it simply does not need to be there and it only increases the size of your files. But if your are using XHTML with CSS then all you need to do is optimize them.

For example of some WYSIWG editors put in the font size and font type for every paragraph. This is a waste of space. This gives the browser more things to figure out which takes time. You should only have to put in your font type or size when you change it, not in every paragraph.

If you have a file that is simple text and it comes out as a 20K file when you use a WYSIWG HTML editor, you can reduce the size by at least 4-5K by just removing redundant HTML code. It doesn’t sound like much, but it can add up to a load time which is 25%+ faster. It could be faster if rewrite them in XHTML+CSS format.
Ok….try to experiment them today, especially for the table and graphic compressing tips. Give me some feedback on how fast your site has been improved?

By the way, some of you might experiencing slow page loading for this blog, it’s mainly due to advertiser WidgetBucks, their code is slowing down the whole loading speed. This is something beyond my control besides changing to the other advertisers which is something that I did not plan to do so as WB responding well with my loyal readers. 8-)

Don't bother the posts below, but if you are free, why not?

  1. Update: I can’t fire my blog now, I’m giving it a chance to grow, worth it?
  2. Speed up IE’s Web page loading time
  3. Windows Vista Service Pack RC1: Short Review
  4. Widgetbucks payday
  5. Create amazing blog & website header images, easily

Try out Randomize them.

One Response to “How to Increase the Speed of Your Website”

  1. Update: I can’t fire my blog now, I’m giving it a chance to grow, worth it? | BSL5.com | 10/02/08

    [...] like. If you want to SCREAM AT YOUR AUDIENCE AND BE OBNOXIOUS, then use big graphics. (refer to here to speed up your site loading time) var AdBrite_Title_Color = ‘000000′; var AdBrite_Text_Color = [...]

Share Your Thoughts

You must be logged in to post a comment.