Your new year’s resolution may be to go on a diet. Here are some tips to put your HTML on a diet, improving load times and writing better code.
1. Use fewer files and directories
- Every file is a separate call to the server.
- Instead of using many small images you might consider using an imagemap.
- Decrease the number of directory structure levels.
2. Limit your spacing
- While we know that spaces in your code, as a rule, should not effect the layout, it does effect how it’s parsed. Decrease or eliminate the spaces between your lines of code.
3. Use relative addressing instead of absolute addressing.
- Instead of using href=http://www.mydomain.com/images/pic1.jpg, use href=”../images/pic1.jpg”
- To really speed things up use the <base> tag in the <head> like this: <base href=http://www.mydomain.com> then use relative addressing in the rest of the page.
4. Use HTML to control spacing when possible
- Instead of using a spacer.gif to manipulate space, try using for horizontal spacing and the <br> and <p> tags for vertical spacing.
5. Eliminate repetitive tags
- This is something you’ll often find in pages created with point and click web applications (WYSIWYG HTML editors) for example:<font face=”arial”>Hello World</font> <font face=”arial”>Welcome to my web page.</font>
In this example the first </font> and the second <font face=”arial”> could be eliminated.
6. Eliminate attributes with default values
- For example, you don’t need to use these:
<body text=”black”>
<div align=”left”>
<font size=”3″ color=”silver” face=”times”>
7. Use short file names and directories
- Instead of href=”../imagefiles/companylogos/advertisements.html try href=”../imgs/logos/ads.html
8. Use Cascading Style Sheets
- Use CSS to position your content. It requires less code and you have more accurate control over layout.
9. Beware of WYSIWYG code trash
- Many web authoring apps add their own proprietary code. FrontPage is notorious for this. Beware!!
- Clean up your META tag. You don’t need the following info in your METAs:
<META NAME=”generator” content=”Microsoft FrontPage 4.0″>
<META NAME=”ProgId” CONTENT=”FrontPage.Editor.Document”>
10. Table Savvy
- Avoid nesting tables. Rather than creating complex table layouts, use the attributes rowspan and colspan to control content layout.
- If you can, fill empty table data cells with This weighs less than a spacer.gif.
- Tables take time. Even if you need to use a table for some of your content, the entire page doesn’t have to be in a table.
Do you have any other suggestions? Add them to the comments below! Ok, the holidays are over… Let’s get back to work.
Posted in 
Tags: 
