Optimizing Pages is More Than Just Graphics
Take a look at your HTML. It may look something like this:
... </head> <body> <div id="bg"> <div id="sadrzaj"> <div id="toplinks"> <div id="toplinks" style="text-align:right"> <a href="" rel='nofollow noindex'><b>Submit News</b></a> ...
Or like this:
... <div class="leftMod"> <div class="leftModWig"> <div class="leftModWigHed"> Contact Us </div> </div> </div> ...
Chances are, your pages take longer to download than they should.
Tips to Removing White Space from HTML
- Remove multiple carriage returns
Many sites start with 10 or more lines of blank space before the code starts. Whether you do this deliberately or by accident, every carriage return adds additional download time for your page. More than 2 carriage returns in a row in HTML code is excessive.
- Close tags on the same line you open them on
For example, list tags enclose list items, but many people like to code them on separate lines from the contents. This is just a waste of space.
- Keep related block items on the same line
For example, paragraph tags or table cell tags should be on the same line as their contents, but put a carriage return after each new paragraph, for readability.
- Indent using spaces
And only use one space for each indent. You get the same effect, and use less whitespace. Better still, don't indent, but that does make it harder to read the code.
- Check your dynamic pages
You can spend all the time you want optimizing your HTML, but if the engine that generates what the browser sees adds spaces, then your work is minimized. One site I worked on, the JSP engine added 10 carriage returns to the top of every Web page, even though the HTML didn't have all that extra white space.
- Don't go crazy and remove all the white space
Remember that you'll have to maintain the page later, and removing all the white space can make it really difficult to read.
Be Wary of "Optimizers"
There are tools available that will sweep your code and remove extra characters including white space. If you're going to use these, be sure to validate that they are leaving your code correct. Some optimizers remove attributes that are required for valid, standards-based XHTML. Others remove so much white space that only the computer can read the pages when they're done.
That said, one of my favorite tools is the HomeSite "Code Sweeper". I like the code sweeper because I can customize it exactly how I want it. So I know it won't be ripping out attributes I want in or adding spaces I don't want. You can do the same in Dreamweaver with Source Formatting, but it's less flexible.