Is it safe to minify HTML?

Question

Is it safe to minify HTML?

Asked 10 years, 5 months ago

Viewed 1,173 times

13

Like JS and CSS, HTML can also be "minified":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

viraria:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html>

Example HTML taken from here: http://getbootstrap.com/getting-started/

Ministayed here: http://www.willpeavy.com/minifier/

This reduces the size a little and should decrease the download time.

My question is: Is it safe? Or is there a risk of the browser interpreting something wrong? (mainly browsers old as IE<9)

2 answers

16

White spaces can have meaning dependent on CSS, for example when using white-space: pre.

Therefore, an HTML mini-scanner, which does not take into account the CSS styles applied to it, will be unsafe by definition.

Obviously, one can assume some rules, which are probably never circumvented. The tag head for example, it will never be visible... so you can have the spaces removed.

Comments could be removed if not for these conditional comments. But generally, these comments have a pattern, and it is possible to know when to remove or not.

Browser other questions tagged html browser performance

You are not signed in. Login or sign up in order to post.

by rochasdv • **513** points · Answer 1 · 2014-07-10T17:34:49+00:00

The answer I’m going to give doesn’t exactly answer your question but I believe it does include valid knowledge for her.

HTML is an XML itself and by that factor it can be greater that a file JSON for example. The innovations that are emerging are all focused on JSON and not XML, so JS technologies are emerging to render an HTML page using JSON. So it is JSON and these frameworks do the "parse" and the browser renders the normal HTML5. I can quote 2, "Angularjs from Google" and the Extjs da Sencha.

The gain that one has in size and end of pages and speed is brutal using these frameworks. If you are a Web developer, I strongly advise you to study these technologies.

Good studies.