Ask HN: How to “compile” HTML+CSS for minimal page size?
I'm imagining something which takes the following HTML+CSS:
<style>
h1{color:red;}
h2{color:blue;}
.custom{display:none;}
.custom2{display:inline;}
</style>
...
<h2>Hello</h2>
<div class="custom">
<p>lorem ipsum</p>
<p>dolor sit amet</p>
</div>
And transforms it into this: <h2 style="color:blue">Hello</h2>
<div style="display:none">
<p>lorem ipsum</p>
<p>dolor sit amet</p>
</div>
However, it should not always inline the css styles, because sometimes that would cause the result to be larger than the original, like this: <style>
h1{color:red;}
h2{color:blue;}
.custom{display:none;}
.custom2{display:inline;background-color:yellow;}
</style>
...
<h2>Hello</h2>
<div class="custom2">
<p class="custom2">lorem ipsum</p>
<p class="custom2">dolor sit amet</p>
</div>
Here, <p class="custom2"> is shorter than <p style="display:inline;background-color:yellow;">, so it should remain unchanged.I'm not talking about tools like https://htmlcompressor.com/compressor/ which only remove whitespace, or gzip compression. What I want is something that understands the semantics of HTML+CSS and can intelligently inline iff that reduces the size of the resulting HTML file.