This came up in a code review today. There were a couple misunderstandings about it, so I figured I would share the explanation publicly.
First, there are two types of whitespace what are in play here. Whitespace in your code for the purpose of properly formatting, and extra whitespace in your ultimate HTML output that comes from the various loops and other mysterious sources in ColdFusion. In simple terms, the first is good and the second is bad. However, you shouldn’t try and get rid of the first in order to get rid of the second.
First, to see a demonstration of what I am talking about, go to Wharton Computing’s Brainstorm. Once you’re there, “View Source” from your browser. At the top of the page, you’ll see a few lines of empty space before the DocType declaration. Select them with your cursor. You’ll see they’re not just page breaks, but spaces and tabs.
Now, go to the Wharton Wireless Troubleshooter (WWT). Do the same thing. You’ll notice a lot more whitespace at the top.
(I’m not picking on some random developer; I did both of these applications.)
That’s the easiest way to show you what I’m talking about. That whitespace makes the output HTML page bigger, as each piece of whitespace is a character that you are sending to you user.
Well how much of a problem is that little bit of whitespace? Well frankly not much, but if you understand how it gets created, you realize it can become a very big deal.
It gets created in loops that, in the case of the WWT, are being called before the header is rendered. (It can happen anywhere in a page, but that’s where it’s happening in this application.) So in the case of the WWT a few loops are generating say 1 character of whitespace per iteration. But suppose for a moment that you were doing hundreds or thousands of iterations… In multiple loops… with multiple characters per iteration… in multiple included files.
Like everything in coding, it’s not that one little thing is so bad, it’s that the little bad things tend to aggregate together, form large bad things, gain sentience and run amuck!
So what can you do to prevent whitespace? I could tell you. But Ray Camden does such a better job of it in his article about whitespace.
I would just add two things.
- Ray mentioned a whole bunch of techniques you can use to reduce whitespace, but he doesn’t say what not to do to reduce it. (Awkward sentence, but bear with me.) You should not start formatting your source code to reduce the number of lines you use, the number of tabs, or the number of spaces. Readability of your code is still extremely important. Don’t change your code formatting to fix your html formatting. Find the spots that generate the whitespace. Then utilize the techniques he mentions to treat the problem topically. (My favorite method is to insert the <yo /> tag randomly throughout the source.)
- If you’re not sure if you have this problem with your page, or if you’re not sure how big an impact the whitespace is having, use the tools at Web Site Optimization to see how big your output page is. Alternately this can be accessed via the Firefox Web Developer Toolbar.
tpryan.blog 
Indeed, what is the big deal? In the days of CF5 and earlier it may have been a problem as far as adding a few Kb to the size of each page downloaded to browsers. But today we have two things that weren’t practical back then – broadband and gzip.
A year ago I activated HTTP compression on one of my client’s sites and saw bandwidth consumption shrink dramatically, and anyone left using lowband would notice much faster page downloads – even with a hundred line of lines of white space.
Every browser supports compression and there are very few good reasons not to use it.
The only issues I’ve encountered on a technical level because of white space are CF XML generated pages which cause some web services to complain and some doctype declariations that aren’t at the top of the page which have messed up a browser’s use of CSS.
LikeLike
Gary I have to disagree. The idea that broadband means we don’t have to worry about whitespace is, in my humble opinion, a fallacy. My big argument against this mobile consumers. Yes speeds are increasing, but they aren’t there yet.
Additionally, just because you are on broadband doesn;t mean that big pages don’t cause any problem at all. I’ve had whitespace issues dealing with work servers from my Comcast broadand server, which has a special connection to my employer’s network.
Long and short of it. Do the right thing, get rid of the whitespace. It’s not terribly hard to do, and it reaps benefits down the road.
LikeLike
I’m not entirely sure this issue has a huge impact on most applications or their users; however, I also agree it is a good practice to address it to one extent or another.
In most well-designed web applications this issue should be nearly non-existent anyway with only a single minor change… How? Well, if you are taking an MVC approach, simply ‘reset’ the page output just prior to first actual view/output area.
Specifically, in the application I develop, everything I am going to output is captured to variables prior to display. The actual code that ends up dumping the variables to the browser simply issues a cfcontent reset=”true” /> command prior and viola, virtually no unintended whitespace.
LikeLike
One important point that you don’t mention is that any whitespace before the DOCTYPE will throw IE into quirksmode regardless of which DOCTYPE you declare. Which can have pretty serious consequences on your layout (CSS based layouts are most effected)
LikeLike