You are here:About>Computing & Technology>Web Design / HTML> Testing Your Web Pages> Web Site Optimization> Avoid Unnecessary White Space in Your HTML to Speed Up Your Pages
About.comWeb Design / HTML
Newsletters & RSSEmail to a friendSubmit to Digg
Basic Speed Tips

Tips for Speeding Up Your PagesWhat to Consider to Speed Up DownloadsThe Size of Your Web Pages

Other Speed Issues

Nested Tables and Page Download TimesFrames and Page Download TimesWhy People Don't Wait for Web Pages

Editing Web Sites / Managing Web Sites

Find the Right Web Page EditorSearch Engine Optimization Step-by-StepWeb Site Analytics

White Space in HTML Can Slow Your Pages

From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

But I'm not Advocating Removing it All

Optimizing Pages is More Than Just Graphics

We all know that creating a Web page means that you need to create a page that downloads quickly. If someone is viewing your site on a slower connection, and it takes too long to load, they might just give up and go somewhere else. But what if you've optimized all your images, externalized all your CSS and JavaScript, and done your best to create a lean, mean Web site and the page is still slow to load?

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
Las Vegas on a Budget

Find a BargainHotel DealsCheap EatsFree AttractionsEntertainment for Less

 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.