7 Comments

Are you using tabs or spaces to indent your markup? Does it matter for performance which one you chose? Let’s run an experiment.

Consider a page that generates a list of 50 items:

<ul>
    @for (int i = 0; i < 50; i++)
    {
        <li>The count is @i</li>
    }
</ul>

The code generates a long list of <li> elements and keep their indentation using the editor’s settings for tabs, spaces and tab size. Default in many editors is spaces and a tab size of 4.

With spaces it looks like this:

image

and with tabs it looks like this:

image

It’s clear to see that the indentation takes up 4 characters when spaces are used and only a single character when using tabs. If we then compare the total file size of the two variations, here’s what we get:

TabsSpacesSaving
Raw file size1403 bytes1703 bytes300 bytes/18%

Using tabs saves close to 18% of the file size over spaces.

This is, however, not a true picture of a web page. All modern web servers use compression in form of GZip or Deflate before serving HTML to the browser. So let’s look at the numbers after GZip:

TabsSpacesSaving
Raw file size1403 bytes1703 bytes300 bytes/18%
Raw file GZipped   327 bytes   332 bytes     5 bytes/1.5%

When using GZipping, the saving from using tabs over spaces is just 1.5%. It’s still a saving and it counts.

Yet again, this is not the complete story because some web developers make sure to minify the HTML by removing redundant whitespace, unneeded quotation marks etc. Normally this is done as a build step or at runtime.

So let’s minify the HTML and see what results it produces:

TabsSpacesSaving
Raw file size1403 bytes1703 bytes300 bytes/18%
Raw file GZipped  327 bytes  332 bytes     5 bytes/1.5%
Raw file minified1199 bytes1199 bytes     0 bytes/0%
Minified & GZipped  312 bytes  312 bytes     0 bytes/0%

When minified, it doesn’t matter if tabs or spaces are used, since they are all stripped away.

Conclusion

Depending on the capabilities of your server, build setup, runtime etc., here’s a little chart of what to do based on the above findings:

Use tabs or spaces
I can minifyDoesn't matter at all
I can GZip but not minifyDoesn’t matter much (tabs gives small benefit)
I can neither GZip nor minifyTabs

Keep in mind that this is a controlled experiment, so your mileage will vary.

If you want to enforce your entire team to use either tabs or spaces, then take a look at .editorconfig. There’s a plugin available for practically all editors.

In the next segment, we look at the effects of GZipping vs. minifying HTML files.

Comments

Comment by Sam K

My thoughts exactly Ram! I know when pre-compiling the templates it basically ends up as a C# file with a bunch of strings - there must be a way to tell the compiler to strip out the whitespace before writing those strings.

Even tiny improvements to file size are noticeable on mobile devices, every little counts.

Comment by Chris Marisic

In 8 years of development I have never once seen a statement such as " any good web developer makes sure to minify the HTML". I wouldn't go as far to say as no developer on the planet does this, but I would say nearly every developer on the planet does NOT do this.

Your article shows that the difference between minified and not is next to nothing. Your article shows it is GZip that matters, as always.

Comment by Richard

"... any good web developer makes sure to minify the HTML by removing redundant whitespace, unneeded quotation marks etc."

Really? Have you looked at the source of this page? :P

Richard

Comment by Mads Kristensen

@Ram, I like WebMarkupMin http://www.nuget.org/packages/WebMarkupMin.Core

@Chris, I've changed the statement. It did seem a bit harsh. The point is that we can strive to squeeze the last bits of performance out of our websites, using tools like YSlow and Page Speed to identify things like unminified HTML.

My findings was a controlled experiment. You will very likely see more than 1.5% file size reduction when minifying real-world websites.