HTML minification?

HtmlMinify

Html Problem Overview


Is there a online tool that we can input the HTML source of a page into and will minify the code?

I would do that for aspx files as it is not a good idea to make the webserver gzip them...

Html Solutions


Solution 1 - Html

Perhaps try HTML Compressor, here's a before and after table showing what it can do (including for Stack Overflow itself):

Sorry, markdown has no concept of tables

It features many selections for optimizing your pages up to and including script minimizing (ompressor, Google Closure Compiler, your own compressor) where it would be safe. The default option set is quite conservative, so you can start with that and experiment with enabling more aggressive options.

The project is extremely well documented and supported.

Solution 2 - Html

Don't do this. Or rather, if you insist on it, do it after any more significant site optimizations are complete. Chances are very high that the cost/benefit for this effort is negligible, especially if you were planning to manually use online tools to deal with each page.

Use YSlow or Page Speed to determine what you really need to do to optimize your pages. My guess is that reducing bytes of HTML will not be your site's biggest problem. It's much more likely that compression, cache management, image optimization, etc will make a bigger difference to the performance of your site overall. Those tools will show you what the biggest problems are -- if you've dealt with them all and still find that HTML minification makes a significant difference, go for it.

(If you're sure you want to go for it, and you use Apache httpd, you might consider using mod_pagespeed and turning on some of the options to reduce whitespace, etc., but be aware of the risks.)

Solution 3 - Html

Here is a short answer to your question: you should minify your HTML, CSS, JS. There is an easy to use tool which is called grunt. It allows you to automate a lot of tasks. Among them JS, CSS, HTML minification, file concatenation and many others.

The answers written here are extremely outdated or even sometimes does not make sense. A lot of things changed from old 2009, so I will try to answer this properly.

Short answer - you should definitely minify HTML. It is trivial today and gives approximately 5% speedup. For longer answer read the whole answer

Back in old days people were manually minifying css/js (by running it through some specific tool to minify it). It was kind of hard to automate the process and definitely required some skills. Knowing that a lot of high level sites even right now are not using gzip (which is trivial), it is understandable that people were reluctant in minifying html.

So why were people minifying js, but not html? When you minify JS, you do the following things:

  • remove comments
  • remove blanks (tabs, spaces, newlines)
  • change long names to short (var isUserLoggedIn to var a)

Which gave a lot of improvement even at old days. But in html you were not able to change long names for short, also there was almost nothing to comment during that time. So the only thing that was left is to remove spaces and newlines. Which gives only small amount of improvement.

One wrong argument written here is that because content is served with gzip, minification does not make sense. This is totally wrong. Yes, it makes sense that gzip decrease the improvement of minification, but why should you gzip comments, whitespaces if you can properly trim them and gzip only important part. It is the same as if you have a folder to archive which has some crap that you will never use and you decide to just zip it instead of cleaning up and zip it.

Another argument why it pointless to do minification is that it is tedious. Maybe this was true in 2009, but new tools appeared after this time. Right now you do not need to manually minify your markup. With things like Grunt it is trivial to install grunt-contrib-htmlmin (relies on HTMLMinifier by @kangax) and to configure it to minify your html. All you need is like 2 hours to learn grunt and to configure everything and then everything is done automatically in less than a second. Sounds that 1 second (which you can even automate to do nothing with grunt-contrib-watch) is not really so bad for approximately 5% of improvement (even with gzip).

One more argument is that CSS and JS are static, and HTML is generated by the server so you can not pre-minify it. This was also true in 2009, but currently more and more sites are looking like a single page app, where the server is thin and the client is doing all the routing, templating and other logic. So the server is only giving you JSON and client renders it. Here you have a lot of html for the page and different templates.

So to finish my thoughts:

  • google is minifying html.
  • pageSpeed is asking your to minify html
  • it is trivial to do
  • it gives ~5% of improvement
  • it is not the same as gzip

Solution 4 - Html

I wrote a web tool to minify HTML. http://prettydiff.com/?m=minify&html

This tool operates using these rules:

  1. All HTML comments are removed
  2. Runs of white space characters are converted to single space characters
  3. Unnecessary white space characters inside tags are removed
  4. White space characters between two tags where one of these two tags is not a singleton is removed
  5. All content inside a style tag is presumed to be CSS and is minified as such
  6. All content inside a script tag is presumed to be JavaScript, unless provided a different media type, and then minified as such
    • The CSS and JavaScript minification uses a heavily forked form of JSMin. This fork is extended to support CSS natively and also support SCSS syntax. Automatic semicolon insertion is supported for JavaScript minification, however automatic curly brace insertion is not yet supported.

Solution 5 - Html

This worked for me:

http://minify.googlecode.com/git/min/lib/Minify/HTML.php

It's not an already available online tool, but being a simple PHP include it's easy enough you can just run it yourself.

I would not save compressed files though, do this dynamically if you really have to, and it's always a better idea to enable Gzip server compression. I don't know how involved that is in IIS/.Net, but in PHP it's as trivial as adding one line to the global include file

Solution 6 - Html

CodeProject has a published sample project (http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900) to handle some of the following situations...

  • Combining ScriptResource.axd calls into a single call
  • Compress all client side scripts based on the browser capability including gzip/deflate
  • A ScriptMinifier to remove comments, indentations, and line breaks.
  • An HTML compressor to compress all html markup based on the browser capability including gzip/deflate.
  • And - most importantly - an HTML Minifier to write complete html into single line and minify it at possible level (under construction).

Solution 7 - Html

For Microsoft .NET platform there is a library called the WebMarkupMin, which produces the minification of HTML code.

In addition, there is a module for integration this library into ASP.NET MVC - WebMarkupMin.Mvc.

Solution 8 - Html

try http://code.mini-tips.com/html-minifier.html, this is .NET Libary for Html Minifier

HtmlCompressor is a small, fast and very easy to use .NET library that minifies given HTML or XML source by removing extra whitespaces, comments and other unneeded characters without breaking the content structure. As a result pages become smaller in size and load faster. A command-line version of the compressor is also available.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPauloView Question on Stackoverflow
Solution 1 - HtmljohnView Answer on Stackoverflow
Solution 2 - HtmlZac ThompsonView Answer on Stackoverflow
Solution 3 - HtmlSalvador DaliView Answer on Stackoverflow
Solution 4 - Htmlaustin cheneyView Answer on Stackoverflow
Solution 5 - HtmladamJLevView Answer on Stackoverflow
Solution 6 - HtmlThe Lazy DBAView Answer on Stackoverflow
Solution 7 - HtmlAndrey TaritsynView Answer on Stackoverflow
Solution 8 - HtmlSonNguyen.ALIView Answer on Stackoverflow