Browsers can’t display tables until they know what is in them. This simple fact has several impacts on speed pages.
BREAK TABLES WHENEVER POSSIBLE:
If your entire page is enclosed in a single invisible table, it can’t show up until the last word on the page is loaded.
You have probably experienced sites that seem to take forever to load then all of a sudden *POOF* the entire screen is filled with content.
Had these sites been designed in multiple tables instead of just one then each table would show up as soon as it was loaded.
Therefore – do not miss an opportunity to put an end to an outer invisible table that is used for layout purposes.
All it takes is a “</td></tr></table>” – so it won’t mean a thing to the pages size or actual loading time.
However, if you don’t do this the “felt waiting time” for your page will be too much for many visitors.
What matters is not how long it takes for the page to load entirely –
but how much time it takes for something to show up that the visitor can relate to.
If the layout is made so that it’s not possible to break the outer table across the page you should 1) redesign the site, 2) explain to the designer that web design is different from paper design and 3) send the designer back to school.
Web pages that are designed with no respect to horizontal cross page divisions are not designed for their media – obviously a bad starting point for a good user experience.
ALWAYS ADD HEIGHT AND WIDTH ATTRIBUTES FOR IMAGES:
You must always specify height and width attributes for images – so the browser knows the sizes even before the images are loaded.
This will let the browser display content before all images are loaded, because it already knows the dimensions and can position the elements while using empty space for images until they are loaded.
If you have an image collection don’t just resize the full size images to use them as thumbnails on the index page. Resize the images in your graphics program and upload two versions of each image – one for the index and one for the full size page.
REUSE LOGOS AND NAVIGATION ELEMENTS:
Do not change the graphics for logos and graphic navigation elements from page to page. For example, you may want a slightly different look for certain areas of your site, which is okay, but if you change the basic graphics on each and every page the visitor will have to wait for them to load and it will destroy the user experience.
KEEP SECONDARY INFO AT THE END OF YOUR PAGES:
Web pages loads from the top and down. This means that the code at the top of your HTML document will show up before the code at the bottom. Therefore you should keep secondary codepieces at the bottom – no matter where you want them to appear on your pages.
If, say, you have a column in the right side that is used for advertising info and other secondary content (from the visitors perspective) – you should ideally just leave the column empty at first… then dynamically throw the secondary content in there when you reach the bottom of the HTML document.
(The page on DHTML for speedpages explains how to easily position content no matter where its kept in the HTML document).
KEEP STYLE ATTRIBUTES OUT OF HTML:
If you write style elements (font settings and color attributes) in HTML you will have to write them wherever they are triggered on your pages.
- You will probably repeat the same codes for style elements over and over throughout your pages.
- You can not keep the style elements in one file that can be cached on visitors local machine.
- You are limited to the layout attributes offered in plain HTML compared to the extensive attributes offered in CSS.
These lead to the fact that your pages will be bigger, require more disk space on the server, take longer to transfer to your visitors and thus result in higher bandwidth usage for your site which may both slow down the server itself and cost you money (if the site is popular enough you will be charged for extensive bandwidth usage).
The conclusion is obvious: Style elements should not be written in HTML – they belong in the CSS.
A simple way to impliment this rule is to forbid the following in your flat HTML coding:
- tags. There is nothing you can do with a font tag that can’t be done with CSS.
- 2. Color attributes of all kinds whether they be in the
<body>, <table>, <tr>, <td>