Optimizing Your Web Site To Load Faster

FREE Java™ Developer Resource Kit!

06.23.04

By Dave Tan

Is your website taking forever to load because of all the heavy graphics you're using? How long does it takes for a modest DIALUP user to wait patiently for a website to completely load up on his/her browser? 60 seconds? 30 seconds?

While 30 seconds is statistically tolerable, practically every users (especially 56K or slower modem users) don't have that much patience online and will just click off your website if it does NOT load within 20 seconds or less!

If you're using a lot of HEFTY web images and flash files on your website (especially on the homepage), you could be in a very disadvantageous and dangerous position! You might risk losing potential customers with slower connection and quite frankly, wouldn't that spoil the buying mood of your visitors?

A lot of people are still surfing the internet for information using a simple modem. Unless you're running a website that focuses a lot on graphics like game review websites or if graphics are an important part of your product, avoid using huge graphics.

If you really have to use HUGE and HEAVY graphics, try SLICING them into smaller images or converting them in an optimized format.

Here are two popular formats that's widely used on the net to display images:

GIF (Graphics Interchange Format) is highly suitable for images with less than 256 colors - usually for flat graphics that is simple like your company logo, navigation buttons, etc.

JPEG (Joint Photographic Expert Group) is the best format for images with photographic elements - graphics like scenery, a car, a person face, etc.

If you optimize your graphics accordingly, you could actually cut down your loading time to as high as 50-70 percent! If your previous loading time is 30 seconds, you could actually end up with only 15 seconds! Isn't that great for your visitors?

Of course, there's a trade-off between quality and size when you optimize your web graphics. The smaller the size, the lower the quality and vice versa. The key to web graphics optimization is to get the best quality with a reasonable file size.

How about TEXT? Is one of your pages using too much text and the loading time is somehow impossible to complete within 20 seconds? What do you do? Separate them into smaller web pages? Well, how about using tables?

That's right, try designing your website in tables! Put each chunk of text into a different table (not table within table), it's easier to manage this way and your web page will load so much FASTER!

Your website will be displayed progressively from the first table to the last one remaining thus giving your visitors something to look at while waiting for your website to load up completely.

Here's a sample of the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
            HTML 4.01 Transitional//EN"> 

            

            <HTML><HEAD> 

            

            <TITLE>Using Tables For Faster Loading Time</TITLE> 

            

            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style 
            

            type="text/css"> 

            

            <!-- 

            

            body { 

            

            background-color: #CCCC99; 

            

            } 

            

            --> 

            

            </style></HEAD> 

            

            <BODY> 

            

            <strong><!--Here's Table #1--></strong> 

            

            <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> 
            

            

            <tr> 

            

            <td valign="top" class="chapterCenter"><h1>A 

            Sample Website Using Tables To Progressively 

            

            Load Contents Or Text</h1> 

            

            <p>  </p></td> 

            

            </tr> 

            

            </table>

Convert your keywords to sales! Try Urchin for free - Download Now

<strong><!--Here's Table #2--></strong> 
            

            

            <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> 
            

            

            <tr> 

            

            <td valign="top" class="chapterCenter"><p>This 

            table (table 2) will load right 

            

            after the headline which resides in table 1 "A Sample Website Using 
            

            Tables 

            

            To Progressively Load Contents Or Text"</p> 

            

            <p> </p></td> 

            

            </tr> 

            

            </table> 

            

            <strong><!--Here's Table #3--></strong> 

            

            <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> 
            

            

            <tr> 

            

            <td valign="top" class="chapterCenter"><p>This 

            table (table 3) will load right after 

            

            table 2 above. </p> 

            

            <p> </p></td> 

            

            </tr> 

            

            </table> 

            

            <strong><!--Here's Table #4--></strong> 

            

            <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> 
            

            

            <tr> 

            

            <td valign="top" class="chapterCenter">This table 

            (table 4) will load last because 

            

            it's the last table on this web page before the closing tags </BODY></HTML></td> 
            

            

            </tr> 

            

            </table> 

            

            </BODY></HTML>

Here's a preview of the website using the HTML code above:

A sample website using tables to progressively load contents or text.

This will allow your web page to load and display progressively (firstly from table 1, then table 2, then table 3 and lastly table 4), giving your visitors something to read WITHOUT having to WAIT for the entire web page to load up completely!

Note: Do NOT use nested tables (table within table) though because it will not have the same effect and will definitely load slower because the browser needs to completely load the main table before loading the any tables within it. Nested tables are HARD to manage too!

That's all for this article, have fun optimizing your website loading speed!

About the Author:
Get fresh, weekly, up-to-date Internet Marketing Power Tips and Exclusive eBooks that will give you an unfair edge over your competitors here: http://www.ebookok.com/

Read this newsletter at: http://www.thedevweb.com/2004/0623.html

Free Newsletters

Part of the iEntry Network
over 4 million subscribers

TheDevWeb

ITProNews

JavaProNews

Send me relevant info on products and services.

WebmasterFree Downloads

From the Forum:

Make sortable table format of mySQL database

I have made a mySQL database with this information and i want to place it all on a table like that and be able to sort it by anything i want and be able to search the database too.

i also have another problem the last updated date is in the format yyyy-mm-dd and i want it to be like January 1st, 2004 is that possible? ...

Read the Post

-- TheDevWeb is an iEntry, Inc. publication --
iEntry, Inc. 880 Corporate Drive, Lexington, KY 40503
2004 iEntry, Inc. All Rights Reserved Privacy Policy Legal

archives | advertising info | news headlines | free newsletters | comments/feedback | submit article