<div align="justify"><p><u><b>Building Blocks</b></u> </p><p><b>Optimisation tips</b> </p><p>It's easier to retain visitors to your site if the pages load fast. A fast-loading site holds attention, so they won't go clicking around other windows. </p><p><b>Table smart</b> </p><p>In browsers, tables do not show up on a page until the content within the tables have been downloaded, making a page seem slow. Avoid nested tables and long vertical tables. Instead, stack tables on top of each other-pages then appear to load faster as each table shows up faster. In this context, it's better to place your navigational links horizontally, towards the top, as it will show up before most of the rest of the page. Keep the most important links at the top and the rest on the left, or keep top-level sections on the top and subsections on the left. </p><p>To make a table stand out on a page, use a border around it rather than an image that is fixed in size. Nest the table within a single-cell table with a cell padding of 1 pixel (or more for a thicker border) and a background of the colour you want for the border. </p><p><img src="http://www.hashdot.com/blocks.jpg" width="510" height="383" border="0" alt="" /> </p><p><b>Re-use images</b> </p><p>If an image is repeated throughout the site, use the same file across all pages so that it needs to be downloaded only once-the browser's cache takes care of this. If you use similar images, break them into static and changing parts so you can reuse the static part of the image. </p><p><b>Smaller images</b> </p><p>The size of an image will be smaller if you use a 256-colour palette. GIFs are generally smaller than JPEGs, but JPEGs offer better quality when using lots of colours as on photographs. With smaller images, use distinct edges and crisp colours.
Almost all imaging tools optimise images by saving them with a palette of only those colours used in the image. Some applications let you choose how many colours to use in the image. It then replaces colours not found in the palette with the nearest match, thus reducing the image size.
Avoid too many animated graphics. A lot of them together are unpleasant to the eye and also take longer to download as compared to simple images. </p><p><b>Stylise your site</b> </p><p>Use a style sheet for your site to add consistency and to reduce page size. You won't have to explicitly define many font and paragraph tags. Avoid using inline styles-this is as good as using HTML tags-except for special cases. Use a single CSS file that has all the style definitions. Once a person visits a page, the browser will use the file from the cache for the rest of the pages. </p><p><img src="http://www.hashdot.com/site.jpg" width="510" height="383" border="0" alt="" /> </p><p><b>De-script-ion</b> </p><p>Try and push all JavaScript (JS) into one or several external JS files. Re-used code such as that for rollovers, menus, validation, etc can easily be separate functions in a single file. Again, the file will have to be downloaded only once and will be used from the cache henceforth. So try to use scripts that are as generic as possible so that they work smoothly with all pages. </p><p><b>Less jazz, more speed</b> </p><p>The lesser jazz on a page, the faster it loads. Animations and rollovers affect the size and number of files the browser has to download. Another aspect usually overlooked is DHTML items such as menus that show and hide themselves. Though hidden away, they add a lot of code to the page, increasing the size considerably. Use these wisely and limit the number of such hidden blocks to a minimum. </p></div>