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:
<table id="whitespace repository" class="longclassname" border = "0" >
<tr>
<td> whitespace? what whitespace?
</td>
<td> cell block number two
</td>
</tr>
</table>Do this:
<table id="whitespace repository" class="longclassname" border="0">
<tr>
<td>whitespace? what whitespace?
</td>
<td>cell block number two
</td>
</tr>
</table>Even better, eliminate all the returns and abbreviate your id and class names like this:
<table id="wr" class="lc" border="0"><tr><td>whitespace? what whitespace?</td><td>cell two</td></tr></table>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.
HTML Optimization Software
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.
Further Reading
- HTML Optimization
- Summary of chapter on optimizing HTML from Speed Up Your Site: Web Site Optimization.
- HTML Tidy
- Created by HTML author Dave Raggett, HTML Tidy is an open source XHTML cleaner that also removes whitespace, and closes orphaned tags.
- Insider Software
- Makers of SiteSqueeze, a web page optimizer that removes superfluous information from textual data and images.
- Use HTTP Compression
- Shows the benefits of using HTTP compression on your web pages. Another Speed Tweak of the Week.
- w3compiler
- Web site optimization software from Port80 Software optimizes HTML, JavaScript.
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.
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.
The problem is some browsers (like IE) are rendering white spaces, so white space really matters.
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
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 😉
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.
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.
Like Leiton said, removing white space and optimizing code is important, especially if you’re going to get a lot of views.
Terminology was right when he said that you can keep your easily-read, comment-riddled code as the original, but optimize the code for the site that everyone else sees…have your cake and eat it too.
I agree that this is an essential practice, and it noticeably reduces the file size and number of server requests (in cases where multiple files are consolidated) which does make a difference.
it may not earn a trophy on small sites, but I work on enterprise-size, database-driven sites where every byte DOES matter.
If you are worried about “readability” and editability, maintain a “work set” and a “production set” – that’s what I do.
HTML code cleanup is good, but really, it doesn’t matter how much whitespace you remove because it’s hardly going to effect your load time and bandwidth as long as you’re:
1) Using GZIP for output of all HTML/CSS/JS
2) Ensuring that proper caching is occurring so the client downloads once.
If you’re not doing the above two, sure, optimize your code, but it really won’t make much difference. At least, not in the time spent to optimize vs. greater speed and lower bandwidth than if you were to simply use GZIP and proper caching.
What I want to find out is how to REVERSE the process for easy viewing should public code be optimized. Is there an app for that?