HTML Table MOD - *HUGE* Performance Incr for Clients!
 

I got this tip from one of the HTML gurus at work and it has an amazing impact on client side performance - I mean, the difference is completely noticable, I would say 200% increase in page rendering.

The more tables you do this to in X-Cart, the better it will perform because it uses so many nested tables. Remember though, the performance increase is solely client-side, there are no server-side performance implications here...

Here is a Microsoft web page example of the effects of this. After the test page loads hit refresh a couple of times to watch the dramatic effects.

You can do this to any table where you can define the column widths! I did it in my home.tpl, product.tpl and products.tpl.

In the <table> tag you add:

style="table-layout:fixed;"

Just below the <table> tag but before any <tr> tags you add:

If you use pixles: <col width="##px">
If you use percent: <col width="##%">

Add a <col> tag for each column in the table.

There is more you can do, too but this in itself is a dramatic increase in client side performance! (You can add "width=###" to the COL tags for more performance.)

The reason this increases performance in the browser is because the browser doesn't wait for the table/cell contents before rendering the table - it renders the table immediately based on the <COL> tags instead.

I hope this helps out everyone!

--al ponte

wow, insanly awesome bro.. :)

ill have to try and implement this as much as possible.

Please post some of your code for us. Inevitably Newbs will have questions.

Sure, I will post some code from my HOME.TPL - not a problemo. I wish I could do this to every table on my site, because the performance is really noticeable - but unfortunately, there are some columns that you just can't restrict the size of.

/SKIN1/CUSTOMER/HOME.TPL Change:

The italicized text is from the original file:


<table border=0 width="100%" cellpadding=0 cellspacing=0 align="center">
<tr>
<td width=6></td>
<td width=150 valign=top>

my changed file has:

<table border=0 cellpadding=0 cellspacing=0 align="center" style="table-layout:fixed;">
<col width="9">
<col width="160">
<col width="10">
<col>
<col width="10">

Notice that the next to the last column I don't have the width for - that is acceptable and you will benefit because the browser will use the remaining space.

I really hope this helps some folks out there!

--al

Did anyone do this? Did you see a difference? How big of a difference??

Just curious, that is all!

--al

On my worklist. With 1000 other things, but I definitely want to try this out.

I will try this too

Is it possible to just add this to your CSS file "skin1.css" as



This should apply to all your tables. Is it going to cause a problem to tables that don't define widths?

I have added it to my css file, but I don't have that many products to really tell the difference.[/code]

Woooooooooooooooo!!!!!!!!!!!!!!!!


Don't just add to CSS file like I did in the above post. After a refresh of my browser it centered and squished some tables way down.

Bad, bad, bad.

Looks like it will be a manual process, thanks for the mod though.

Ultimately, you would want to copletely remove all <table> and such tags from your html and use only CSS for tabless sites. They are faster loading, and way more Search engine friendly.

Just an example, checkout www.bluerobot.com ;)