GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.21k stars 9.34k forks source link

New audit "unminified html" #5214

Open jessiehan opened 6 years ago

jessiehan commented 6 years ago

Description of audit and audit category (please include pass/fail states, and how it might be measured)

Description: I noticed that many websites didn't minify the html file. However if we minify the html, we can get better performance.

For example, websites like https://www.jd.com/, will save 10.55kb after minified.

Category: byte-efficiency

Measurement: minify the html using "html-minifier" and compare the minified size with original size.

score = (minified size / original size) * 100

Explanation of how it’s different from other audits

None

What % of developers/pages will this impact (estimates OK, data points preferred)

Maybe 100%, hhh

How is the new audit making a better web for end users? (data points preferred)

Smaller html size means shorter first paint and better user experience

What is the resourcing situation (who will create the audits, maintain the audits, and write/maintain the documentation)

Actually, I have finished coding and the audit has already been used by internal teams of Alibaba ^_^

Do you envision this audit in the Lighthouse report or the full config in the CLI? If in the report, which section?

I think maybe in "Opportunities" section

How much support is needed from the Lighthouse team?

Help me check whether the score mechanism is reasonable

Any other links or documentation that we should check out?

None

patrickhulce commented 6 years ago

Thanks very much for the detailed issue and for following our new audit process @jessiehan!

We actually previously looked into adding an HTML minification audit exactly as you suggest, but concluded that the savings opportunity after GZIP was factored in was relatively minimal. Our primary concern for not including originally was the dependency size and run time impact (our experience with JS/CSS was that running the actual minifier can be quite slow https://github.com/GoogleChrome/lighthouse/issues/3459#issuecomment-345330671 and so we needed to come up with alternative approximation methods).

If you guys have any data on how it's noticeably improved real paint times though we'd be thrilled to see it and work to include it in our build!

paulirish commented 6 years ago

To add on, we tried this but 99.9% of the time, there was not significant savings available.

So we left it out. Let us know if you find otherwise!

Thanks for writing this up.

Taritsyn commented 4 years ago

@paulirish Hello, Paul! A year and a half ago, I conducted a research on effectiveness of HTML minification. And I came to conclusion that when using a GZIP compression and HTML minification together, minification allows to save an additional 9,57% on average (see the last column in table on slide). Mads Kristensen's earlier researches also had similar results.

In addition, old version of the PageSpeed Insights gave the following recommendation:

PageSpeed Tools > Minify HTML