0xDEADBEEF

[RSS]
««« »»»

Minifikace HTML5

4. 1. 2019

HTML5 stan­dard je po­měrně laxní v tom, co vy­ža­duje po va­lid­ních do­ku­men­tech. Mnoho prvků, které jsou nutné pro ná­le­žité XML, je možné vy­ne­chat a trochu tak zmen­šit vý­sledný soubor.

Uvo­zovky kolem hodnot atri­butů můžeme opo­mi­nout, pokud ty ne­ob­sa­hují mezeru nebo znaky \t \r \n \f " ' = < > `. Ná­sle­du­jící tagy jsou v očích HTML5 zcela va­lidní.

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

To ale také zna­mená, že frag­ment <br class=xx/> od­po­vídá <br class="xx/"> – zpětné lo­mítko ukon­ču­jící ne­pá­rový tag se bere jako sou­část atri­butu.

HTML5 na­štěstí do­vo­luje u tak­zva­ných *void ele­ment*ů (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) toto lo­mítko vy­ne­chat. <br><br/> jsou podle ne­ko­nečné moud­rosti HTML5 iden­tické, jen jeden z nich je o byte kratší.

Mnoho pá­ro­vých tagů není třeba uza­ví­rat nebo do­konce uvádět, pro­tože je parser dokáže vy­vo­dit z kon­textu. Jde pře­de­vším o html, head, body nebo kon­cové </p></td>.

Ná­sle­du­jící do­ku­ment před­sta­vuje ko­rektní exem­plář mo­der­ního webu.

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

Po­cho­pi­telně, když se po­dí­váte do ty­pic­kých strá­nek, ty ob­sa­hují mnoho jiných ne­e­fek­ti­vit. Url bývají ab­so­lutní, řádky za­čí­nají me­ze­rami ko­pí­ru­jící za­no­ření zdro­jo­vého kódu, který do­ku­ment vy­pro­du­ko­val a tak po­dobně. Kom­prese roz­díly čás­tečně vy­rovná, ale podle toho, co jsem vy­po­zo­ro­val, tak ve­li­kosti kom­pri­mo­va­ného do­ku­mentu ne­po­může zkrá­cení tokenů (gzip je na­hradí ne­hledě na délku), ale jejich eli­mi­nace.

Po­slední tip: HTML entity je možné na­hra­dit ekvi­va­lent­ními uni­code znaky, které bývají kratší. Na­pří­klad místo místo &nbsp; je možné použít NO-BREAK SPACE, které je v utf-8 za­psáno dvěma bajty 0xC2 0xA0.

Efek­ti­vita této mi­ni­fi­kace je ale při­nej­lep­ším sporná, když ty­pický web začne tím, že stáhne 1MB ja­vascriptu.

píše k47 (@kaja47, k47)