How Google, Facebook and other websites minify their html?

Question

In the View Page Source, I see this kind of minified html output in most websites like Google and Facebook, here is the simplified example.

<html><head>/.../</head><body><div><div>/.../</div></div><div>/.../</div></body></head>

What this kind of html output method does?
May this kind of method help a small websites?
What do I need to do to make my html output like this?

What do you mean here? All html pages will be like this right.. — Aruna, Dec 21 '16 at 05:10
I have no idea what you’re asking. What “kind” of HTML output do you mean? I don’t see anything special about it. What “method” are you refering to? — Sebastian Simon, Dec 21 '16 at 05:10
I tried to use `View Page Source` to Google, Facebook and Stackoverflow, there is a big difference, Google and Facebook, their html codes are in full horizontal line, Stackoverflow on the other hand is the opposite. If you have the time to spare, please use `View Page Source` any pages of Google, Facebook and Stackoverflow and you will see the difference in the html codes display. — Dumb Question, Dec 21 '16 at 05:20
They all are minifying the html and I have posted the answer with more details — Aruna, Dec 21 '16 at 05:31

score 2 · Accepted Answer · edited Dec 21 '16 at 05:32

2

Google, Facebook and many other sites are minifying their HTML by removing unnecessary white spaces and new lines from the HTML to send them faster to improve the performance. That’s why you can see them in one line like how we are minifying the JS and CSS files.

There are many npm modules to take care of this and automate the process and below are a few of them:

edited Dec 21 '16 at 05:32

Sebastian Simon

18,263
7
55
75

answered Dec 21 '16 at 05:29

Aruna

11,959
3
28
42

So Google and Facebook for example have their own html minifier program or system? – Dumb Question Dec 21 '16 at 05:32
They won't disclose what they are using, but there are many modules almost in all the server languages. – Aruna Dec 21 '16 at 05:33
Thanks, this really helps me a lot. In addition, can I install html-minifier in a shared hosting environment? – Dumb Question Dec 21 '16 at 05:42
Yes you can but if you have any CI tool and build environment, automate the process with `grunt` or `gulp` tasks for static html files. But if you have any dynamic pages then you can install the module in the hosting environment. – Aruna Dec 21 '16 at 05:55
can I make my own html minifier? I can't install a module in a shared hosting environment. – Dumb Question Dec 22 '16 at 03:34
Which server side programming language you are using? – Aruna Dec 22 '16 at 03:36
I am using PHP. – Dumb Question Dec 22 '16 at 03:45
Can you google for any php html minifier? It should be there a one already. – Aruna Dec 22 '16 at 03:46
Yes, thanks, I am currently searching for a simple one, there is too many though it's quite hard to understand I will study about this. – Dumb Question Dec 22 '16 at 04:06
I found this answer which makes the html output in one straight line and no line breaks. http://stackoverflow.com/questions/1418780/removing-new-lines-except-in-pre/10423788#10423788 – Dumb Question Dec 22 '16 at 04:19
Yes you can give a try of this :-) – Aruna Dec 22 '16 at 04:21
Thanks, it works great. Thank you for your response! – Dumb Question Dec 22 '16 at 04:36

How Google, Facebook and other websites minify their html?

1 Answers1