How to Tweak HTML Table To Speed Up Page Load Time
There are many ways to increase a web page's load speed. Using proper HTML table layout is one of them.
Using tables is the easiest way to layout a neat web page. Most of the time, different table layouts do not affect page load time itself. The effect exists in users visual experience that a page loads faster. That means the page looks like loading faster but in fact the total time used is still the same.
When a web browser displays a table, it looks for the opening <table> tag and closing </table>tag. Nothing will be rendered on the screen until the browser finds the closing </table> tag. As a result, if you put all your web content into a big table, no matter how many tables you have inside that big table, users will not be able to see anything displayed until browser reads all the way to that big table's </table> tag.
Therefore, we should avoid putting your entire page content into one big table. Here the entire page content typically includes page header such as banners, navigation menus, main content, and page footer such as copy right, company info, etc.
One big table has bad visual experience because users will initially see a blank screen when the page is first requested. The entire page will be displayed only when the browser sees the last </table> tag that closes the big table.
To correct this problem, adding different sections of a page into physically separated tables is the solution.
For example, page header can go to the first table. Then horizontal navigation menu into the second table. If you have left or right hand side vertical navigation menu, add them to the third table together with your main page content. The fourth table should contain page footer.
Here is what I mean.
Below is the HTML source code. You may substitute some of the tables used by div css style sheet, but the basic concept remains.
In the above example, page header and horizontal navigation menu will be displayed entirely before the left/right and main content section. This is because they are in physically separated tables. If the main content takes a while to load, users will see something rather than blank screen.
To make a page loads faster, you should always add the table's width parameter
and <tg> cell width parameter. If not, web browser
needs to spend a little bit time to figure out these parameter values based
on other information about a table.
Copyright © 2017 GeeksEngine.com. All Rights Reserved.
This website is hosted by HostGator.
No portion may be reproduced without my written permission. Software and hardware names mentioned on this site are registered trademarks of their respective companies. Should any right be infringed, it is totally unintentional. Drop me an email and I will promptly and gladly rectify it.