Load time after going tableless gets worse

Replaced the table tags with div tags and CSS

[roshk]

Hello Everyone,

I was attempting to optimize the home page of one the websites I have been working on, by replacing all the Table tags with Div tags and CSS (had referred to the examples to do so from one of the topics posted on this forum)

I realized that after comparing the load times of current homepage v/s the optimized one, it turns out the optimized one is proving to be much costlier.

Can anyone provide some details as to why this is happening ?

Any guidance/suggestions in this regard would be appreciated.

[Demaestro]

It doesn't have so much to do with your markup as it does with file sizes and remote files.

If you want to optimize your site you need to look at each element called into the page, and see how long the load time and how large the file size is for each.

A great tool for this is an add-on for FireFox called Firebug. Install this add-on then open the firebug panel, go to the "Net" tab and refresh the page in question.

This will show you each image, piece of flash, css file, js file, how large they are... how long they take to load, look for things that have a high load time, see if you can cache them or decrease their file size.

Once you know where the bottle neck is you can address it.

[soulsizzle]

It's hard to say without some idea of what your code looks like. Tableless CSS coding is somewhat of an art, and it takes a while to get a firm enough grasp in order to write effecient code.

However, performance issues aren't the only (or maybe most important) concern when choosing to go tableless. Well written, semantic HTML/CSS is more easily read by screen-readers (for the visually impaired) and search engines.

[StoutFiles]

The CSS should be in a separate file, included, and cached. The first page may load slower than before, but each subsequent page load should be much faster.