Is minifying your HTML, CSS, and Javascript a bad idea?

Wikipedia defines minification as...

[...] the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

I'm currently doing this to my HTML, CSS and Javascript in order to save bandwidth, but someone told me that he remembers a browser misbehaving when there's no white space between certain tags (namely ul and li items). Is this true?

Are there any notable browsers, proxies, or other user agents that misbehave when dealing with minified code?

Other than losing readability when viewing the source, is there any other downside to minification?

Wikipedia defines minification as...

[...] the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Are there any notable browsers, proxies, or other user agents that misbehave when dealing with minified code?

Other than losing readability when viewing the source, is there any other downside to minification?

Share Improve this question asked Apr 25, 2014 at 12:26 JohnCand 1,1972 gold badges12 silver badges20 bronze badges

3 "but someone told me that he remembers a browser misbehaving when there's no white space between certain tags" Maybe you can ask that person for more information. I believe the person is wrong though. – Felix Kling Commented Apr 25, 2014 at 12:29
8 There is no standard which states that HTML, CSS or JavaScript must be spaced out. If a browser does render this incorrectly then it is likely a bug. The only issue you may face is when handling inline or inline-block elements, as these elements take spaces into account. – James Donnelly Commented Apr 25, 2014 at 12:29
2 To the anonymous trolls who vote to close this perfectly fine question because "it is too opinion based", could you please explain where exactly the answer to this question depends on one's opinion? – JohnCand Commented Apr 25, 2014 at 12:31
1 Is minifying your HTML, CSS, and Javascript a bad idea? Somebody will tell you no, the standard allows it, so go fo it, if it does not work its a bug in the browser; somebody else will tell you yes, you should workaround all bugs in all browsers; most people would just think it depends or start suggesting the favorite minification tool. – guido Commented Apr 25, 2014 at 12:42
3 @guido That line of argument doesn't make any sense. By that logic, you could close any question on SO because some users might stray off into the woods and provide an opinion-based answer where you really should provide facts. There are two simple questions: Do browsers misbehave and is there a downside to minification? As you can see from the already provided answer, it's not at all dependent on one's own opinion, but facts. – JohnCand Commented Apr 25, 2014 at 12:49

| Show 10 more comments

6 Answers 6

Sorted by: Reset to default 18

someone told me that he remembers a browser misbehaving when there's no white space between certain tags (namely ul and li items). Is this true?

Yes, in certain circumstances, like if the elements are set to display inline-block or inline.

The following two lists will render differently, because of the whitespace between the <li> elements:

html

<ul>
    <li>simple</li>
    <li>list</li>
</ul>

<ul><li>minified</li><li>list</li></ul>

css

li {
    display: inline-block;
    background: blue;
    color: white;
}

rendered output

http://jsfiddle.net/Uwv3e/

Minification removes maintainability for the sake of... usually about 4-8kb of savings on a site size. You can get more savings by compressing a single jpg on the site and removing the image's meta-data.

Unless you're building a website that has a MASSIVE amount of pages and subpages and templates and over 5,000 lines of CSS and JS, you're going to find minification is a waste of effort, especially when maintenance comes to play and you have to keep unminified versions of files floating around just to do fixes, minify, overwrite the minified files with the new version, pray the next guy that maintains the site uses your same workflow and doesn't make changes to the minfiied CSS file, then when you come back in and wipe out his changes...

I bring this up because I've seen this happen. I've done GTmetrics and Pingdom scores on sites pre and post minification and the score and load speed barely changes enough to make it worth it.

I've always called minification "Spending dollars to save pennies". Your efforts can be better spent elsewhere on a dev project.

Is minifying your HTML, CSS, and Javascript a bad idea? Yes of course!

A good idea is, however, to minify your CSS, and Javascript

Why?

Minification works by (a) replacing human-readable variable names for compact names, like "mySuperTollesFunctionCall()" to "m()" and by (b) Removing Whitespaces
Your JavaScript you can benefit from both (a) and (b)
Your CSS can only benefit from (b)
Your HTML code, in theory could benefit only from (b) but that is just not worth the try.

Any simple good HTML editor can nice-format your HTML file for you. Take care of whitespaces inside "pre" blocks, gives you hint on W3C compliance, etc, etc, etc.

If you're worried about the size of your HTML file... You should enable GZIP compression of static files in your web server, most living fossils will handle it, and your customers will appreciate it.

http://www.schroepl.net/projekte/mod_gzip/browser.htm

Some ~~browsers~~ IE versions have problem with minified font-face declarations, see:

CSS fonts not loading in IE9
How to minify CSS with font-face

someone told me that he remembers a browser misbehaving when there's no white space between certain tags (namely ul and li items). Is this true?

No that statement is false. This is how browsers should work according to the HTML specification regarding whitespace. Any sequence of whitespace (tabs, newlines, spaces) means the same thing.

Take the following markup:

<ul>
    <li>A</li>
    <li>B</li>
</ul>

The correct minification of this after also taking into account SGML line break rules stating that the whitespace after the opening tag and before the closing tag can be ignored, then the correct minifcation would be:

<ul><li>A</li> <li>B</li></ul>

If a minification tool gave the following it would be appropriate to say that the minifier was broken.

<ul><li>A</li><li>B</li></ul>

The exception to this rule is PRE tags, which specify preformatted content and browsers are supposed to render all whitespace characters, and I image you'd also need to leave CDATA as is since it's technically not part of the HTML content.

As explained, minifying HTML does in fact alter lists in some cases, I have seen it.

For JS/CSS I only minify very large files like jQuery or the CSS that accompanies FontAwesome.

If the server is set-up properly, static resources will be served with an appropriate header telling the client they can cache it for awhile, and when that period expires most clients will simply ask the server if the file has changed and when it has not changed, a new period of time the client doesn't even ask starts.

Making sure the proper expires header is sent will save more bandwidth than minifying.

Especially with brotli compression, I am not convinced the space saved by minifying makes that big of a deal, with the possible exception of massive libraries like jQuery. Readability of the source as served is more valuable to maintain in my opinion than saving a few kilobytes when the browser does not already have the file cached.

Brotli compression is now supported everywhere except IE11, Opera Mini, and Baidu browser. Use it and I really suspect minification is a moot point.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1737344169a3940263.html