Server-rendered HTML minification #1432
Description
Description
Marko’s compilation to server-side templates could perform provably-safe HTML minification during compilation. (Runtime minification is probably too expensive to be worth it.)
Why
Perf matters! Running Marko’s current home page through kangax’s minifier saves 2,551 bytes. Not too bad after compression, but it’s still overhead, and fewer characters speed up parsing.
I used the relative URLs option, kept comments because I suspected Marko uses them for rehydration, and turned off the Minify CSS/JS options.
Existing HTML minifiers can be plugged into a Marko app’s render pipeline, but they require buffering the stream, defeating any performance improvements.
Possible Implementation & Open Questions
In development mode, probably don’t bother running this compilation step. But in production…
- Normalize output for better compression
- Normalize known tag/attribute name casing (might do this already?)
- Sort attributes (probably alphabetically, but frequency would be even better)
- Sort properties in
style - Sort tokens in
class,rel, and other TokenLists/similar
- Collapse whitespace (Marko largely already does this, but it’s worth reexamining to ensure its behavior is as unsurprising and efficient as it could be)
- Collapse all whitespace characters to a single space except when
<pre>,marko-preserve-whitespace - Omit the closing slash on known void elements
- Optional tags
- Omit optional opening tags without attributes like
<head>or<body> - Omit optional closing tags where safe —
</body></html>, consecutive<p>s,</option>since</select>autocloses it
- Omit optional opening tags without attributes like
- Omit attributes with default values :
method="get",<input type="text">,<script type="text/javascript">, etc. — this would also make rendering client-side slightly more efficient - Attribute values
Truthy booleans should omitMisc perf improvements #1535 ✅=""Literals not containing whitespace should omit quotesperf: minify runtime comments, remove unnecessary attr quotes #1557 ✅Literals containingperf: minify runtime comments, remove unnecessary attr quotes #1557 ✅"or'' should use the other delimiter for the valueIf the attribute value is known not to stringify with forbidden characters (perf: minify runtime comments, remove unnecessary attr quotes #1557 ✅Number, for example), it should omit quotesEverything else should fall back to wrapping double quotesperf: minify runtime comments, remove unnecessary attr quotes #1557 ✅
- Reencode character references
- Non-HTML syntax characters like
→should be dereferenced - Unnecessary encoding should be dereferenced
- Unambiguous ampersands
- Quotes and
>outside opening tag contexts =outside attribute values
- Some character references could be reencoded to be shorter:
<→<(pretty sure only<and>qualify)'→', since hex numbers are only more compact for characters we’re already decoding"→"
- Non-HTML syntax characters like
- Turn same-origin attribute values with URLs (
href,src,srcset) into relative URLs - Encode indices/offsets inside Marko
:scopedidentifiers and<!--M#…-->boundary comments with something more space-efficient than decimal, likenumber.toString(36) - Use self-closing syntax for foreign elements (SVG & MathML, mostly), instead of the current approach:
<path></path>→<path />
Is this something you're interested in working on?
Yes