Remove Whitespace
You can safely remove most whitespace from your code with no change of appearance to your pages. Browsers don't care how pretty your code it, they process the code between tags, real or implied. Formatting code with spaces, tabs, and returns makes it easy for humans to read, but slower for browsers to download. The average web page has between 20 and 30 percent extra whitespace, according to Insider Software and Port80 Software. So instead of this: Do this: Even better, eliminate all the returns and abbreviate your id and class names like this: CSS and JavaScript also benefit from whitespace removal. Be sure to not change the meaning of your CSS or JavaScript in the process, as some spaces are required between tokens, and for JavaScript returns can have meaning. You can also remove the last semicolon in CSS rules. There are a number of tools available that automatically optimize your XHTML by removing whitespace, comments, and excess code. HTML Tidy has a little-known optimization feature that removes whitespace, and commercial tools like w3compiler and SiteSqueeze can automate the removal of whitespace and other excess code. To make your code easier to maintain, ideally you would install a server-based script to clean your code from templates on the fly, just before they are delivered to users.<table id="whitespace repository" class="longclassname" border = "0" >
<tr>
<td> whitespace? what whitespace?
</td>
<td> cell block number two
</td>
</tr>
</table><table id="whitespace repository" class="longclassname" border="0">
<tr>
<td>whitespace? what whitespace?
</td>
<td>cell block number two
</td>
</tr>
</table><table id="wr" class="lc" border="0"><tr><td>whitespace? what whitespace?</td><td>cell two</td></tr></table>HTML Optimization Software
Further Reading
By website optimization on 10 Feb 2004 AM
Comments
Why would you ever want to do this?
1) If anyone has to maintain your code it's a nightmare.
2) A few bytes of whitespace means nothing if you properly code your (X)HTML and CSS.
This whole article is pointless.
By: Ean Bowman on March 14, 2007 1:03 PM
This article is not pointless.
Original code should not be cleaned. Instead you should clean (x)html before outputting to browser.
Other option (that reduces html size more drastically) is to gzip html before outputting to browser.
By: Terminology Software on May 8, 2008 4:32 PM
The problem is some browsers (like IE) are rendering white spaces, so white space really matters.
By: collector on May 19, 2008 11:30 AM
It's not pointless, because it is an example of how NEVER to code an html page.
Comments and easy to read formatting are just as important as functioning code. yes even in html.
The better article would have been suggestions on how to serve compressed html, or closer to the theme of this article how to write a servlet that dynamically strips the whitespace from any html that is served
By: Dan on October 26, 2008 8:31 PM
you should have two separate files of html, the one you edit offline, and the one you host on your server. the one that is offline should have editors notes (usually green in code editors) and white spaces for readability. the online version should be optimized for loading speed. did i mention that less notes and white spaces means less code per content ratio... which means you rank higher in google, not that anyone would want to do that ;)
By: joe on October 27, 2008 11:43 PM
SICK OF DUMB AS* WEB DESIGNERS!!!
Cleaning your code is paramount!
Who does this? GOOGLE! Look at they're code.
I do it allot now. Think about this.
I reduced another web designers page the other day from 840 lines to 420 lines. Removed all its white spaces and as a result the page went from 48kb to 21kb, SAVING 27KB of nothingness.
Lets think about why you would want to do this.
1 view = 27kb
10 views = 270kb
100 views = 2.7mb
1000 views = 27mb
10000 views = 270mb
All browsers want to see is tag in tag out.
The working version is kept clean and the server version can have a script run to cut the white crap out.
By: Leiton on November 19, 2008 9:16 PM
I do tottally agree with Leiton, page size optimization by meanless code removal is a great practice and make the difference.
I'm a ASP.Net developer and some of my latest adjustments in a corporate web project was the creating of HttpFilters to cleanup HTML, CSS and JS code.
This allow me to keep a readable code, with comments and indentation, that will be sent to client as a just one clean code line.
Not to mention the HTTP compression, dynamic versioning and caching control that reduced up to 80% of the server responses weight per day.
By: Matheus on April 16, 2009 9:33 AM