0xDEADBEEF

RSS
««« »»»

Minifikace HTML5

4. 1. 2019

HTML5 standard je poměrně laxní v tom, co vyžaduje po validních dokumentech. Mnoho prvků, které jsou nutné pro náležité XML, je možné vynechat a trochu tak zmenšit výsledný soubor.

Uvozovky kolem hodnot atributů můžeme opominout, pokud ty neobsahují mezeru nebo znaky \t \r \n \f " ' = < > `. Následující tagy jsou v očích HTML5 zcela validní.

<div class=x></div>
<a href=https://k47.cz></a>
<a href=../index.html></a>
<a href=#fn1></a>

To ale také znamená, že fragment <br class=xx/> odpovídá <br class="xx/"> - zpětné lomítko ukončující nepárový tag se bere jako součást atributu.

HTML5 naštěstí dovoluje u takzvaných void elementů (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) toto lomítko vynechat. <br><br/> jsou podle nekonečné moudrosti HTML5 identické, jen jeden z nich je o bajt kratší.

Mnoho párových tagů není třeba uzavírat nebo dokonce uvádět, protože je parser dokáže vyvodit z kontextu. Jde především o html, head, body nebo koncové </p></td>.

Následující dokument představuje korektní exemplář moderního webu.

<!DOCTYPE html>
<meta charset=utf-8>
<title>0xDEADBEEF</title>
<h1>Minifikace HTML5</h1>
<p>lorem ipsum
<p>dolor blablabla

Pochopitelně, když se podíváte do typických stránek, ty obsahují mnoho jiných neefektivit. Url bývají absolutní, řádky začínají mezerami kopírující zanoření zdrojového kódu, který dokument vyprodukoval a tak podobně. Komprese rozdíly částečně vyrovná, ale podle toho, co jsem vypozoroval, tak velikosti komprimovaného dokumentu nepomůže zkrácení tokenů (gzip je nahradí nehledě na délku), ale jejich eliminace.

Poslední tip: HTML entity je možné nahradit ekvivalentními unicode znaky, které bývají kratší. Například místo místo &nbsp; je možné použít NO-BREAK SPACE, které je v utf-8 zapsáno dvěma bajty 0xC2 0xA0.

Efektivita této minifikace je ale přinejlepším sporná, když typický web začne tím, že stáhne 1MB javascriptu.

píše k47 (@kaja47, k47)