How to make your website load faster

Most websites these days share a very similiar layout concept - there is a "template" that contains the page's header, a side or top menu, a bottom "Copyrights" text, and a "middle section" that is where the actual page display is shown.

While other considerations, such as database performance, may impact the loading speed, the actual real cause for loading speed are the size of the HTML pages being transmitted, and the size and number of images (GIFs/JPGs etc) that are being sent.

Therefore, if you want to make your website load faster you'll need to make sure that your images take as less space as needed, and that your HTML pages are the smallest as they can.

Google is a good example site to look on.
If you'll look at the size of the HTML of their homepage you will see it takes just 4Kb, which is nothing!

So how do you achieve those tasks ?

1. Reducing images size - Use an images optimizer. Adobe's ImageReady and PhotoShop are a great product to do just that, as it allows you to save "optimized" images where they actually allow you to see a preview of how the compressed image will look like = allowing you to adjust maximum compression for best possible view.

2. Reducing HTMLs size

Now, as far as your HTML goes, here's a little quick tip: If your pages have a common structure (such as a table) that is used to draw menus or catalog items etc, you can dramatically increase the loading speed of such pages by creating a JavaScript function that does the "drawing" of the table row or cells automatically, where you just have to pass the parameters to it and it will do the drawing it self.

This amazingly decreases the page's size and makes it load very fast, and since there's no browser today that doesn't support JavaScript, its a sure go!

Here's an example of what im talking about:

-- Original Page --



Assuming this page has 200 table rows like that, thats at least 138 characters per row, which means 27,600 bytes (or 27.6KB!!) with only the table's layout and WITHOUT any information!

So, instead of doing this, you can convert this page into a very nice and quickly loading page using a simple JavaScript function that draws the table for you and saves you tons of time and speeds your loading up by orders of magnitude.

Here's how:

-- Optimized Page: --



As you can see, we created a JavaScript function, called dr(), which is short for "draw", which does the actual drawing of the table row's HTML portion. All it does, is you pass the parameters for ID, Name and Address to it, and it does the drawing for you. By using this approach, we now have turned those 138 bytes into 24 bytes without information, which means that on a page with 200 rows like that, the page size will now be 4800 bytes, or 4.6KB , thats quite a difference !!

Unoptimized = 27.6KB
Optimized = 4.6KB

That means we reduced the page's size by at least 85% if not more !

And that was a very short demonstration.
There are webpages that I saw, where every table row takes 2KB , so imagine a page like that containing 100 rows - it takes 200KB to send !!!

And if you can reduce a page like that to even 10KB, thats loads of a difference in loadup speeds.

Ponder that for a while, and feel free to leave your comments, feedback and questions.