Vzduch v kódu

Honza Hučín

Prohlédněte si dva příklady.

Příklad 1

<!--Tabulka prodeje -->
<table>
 <thead>
  <tr>
   <th>Pivo</th>
   <th>Víno</th>
   <th>Limo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>52</td>
   <td>16</td>
   <td>47</td>
  </tr>
 </tbody>
</table>
<!-- Konec tabulky prodeje -->

Příklad 2

Pivo	Víno	Limo
52	16	47

Elementární pravidlo jazyka HTML

http://www.w3.org/TR/html401/struct/text.html#idx-white_space-2

říká, že posloupnost mezer, odřádkování a dalších tzv. bílých znaků (orig. „white space“) mezi slovy (viz http://www.w3.org/TR/html401/struct/text.html#h-9.1) se pro účely zobrazování chápe jako jediná mezera. Přičteme-li k tomu skutečnost, že se komentáře mezi řetězci <!-- a --> mají ignorovat a že pro určité HTML tagy (například <tr> a <td>) nezáleží na tom, zda jsou nebo nejsou odděleny mezerou, měly by se uvedené příklady v prohlížeči zobrazit naprosto stejně.

Přehlednost versus kompaktnost

Který způsob zápisu je lepší? Na tuto otázku neexistuje jednoznačná odpověď, lze pouze uvést argumenty pro jeden nebo druhý způsob zápisu kódu.

Zajímá-li nás hlavně rychlost přenosu dat, rychle si spočteme, že

• Příklad 1 zabírá 233 bytů,
• kdežto Příklad 2 pouze 135 bytů.

Rozdíl činí celých 98 bytů, z čehož přibližně jedna polovina připadá na vložené komentáře a druhá polovina na odřádkování a mezery. Příklad 1 obsahuje 60 % užitečného kódu a 40 % tvoří "vzduch". Tudíž z hlediska přenosu dat je vhodnější kompaktní zápis ve stylu Příkladu 2.

Na druhou stranu je Příklad 1 mnohem přehlednější, didaktičtější a orientace v něm podstatně rychlejší. To se v praxi projeví zkrácením času nutného k úpravě kódu a nižším rizikem chyb (kodér se v něm orientuje podstatně rychleji), nehledě k tomu, že výsledný zdrojový kód je dobrým studijním materiálem.

Zatímco kompaktnost kódu je objektivně měřitelná a lze dosáhnout ideálního stavu (tj. ani znak navíc), přehlednost je subjektivní kategorie, v níž navíc ideální stav neexistuje. Výsledné rozhodnutí pro způsob zápisu HTML kódu je tudíž závislé na mnoha faktorech – každý webmaster či jeho nadřízený musí sám zvážit, čemu dát přednost.

(Pozn. Yuhů: v praxi se vyplácí takovýto postup: autor si kód udržuje v přehledné formě a smrskne ho až při odesílání na server -- nejčastěji nějak automaticky.)

Měření

Příklad 1 a Příklad 2 vzbuzují dojem, že výsledná úspora může být značná. To však jsou jen umělé příklady. Jak moc lze redukovat stránky v praxi? Na tuto otázku se pokusím přinést aspoň přibližnou odpověď na základě měření a odhadů pro existující webové stránky. 26. února 2004 v brzkých odpoledních hodinách jsem navštívil několik webových stránek, stáhl zdrojový kód a analyzoval jej z hlediska nadbytečných znaků. Výsledky shrnuje tabulka níže.

procento zbytečného kódu

	Atlas	České noviny	iDNES	Quick	Seznam	CNN	Yahoo
odřádkování	2,5%	1,2%	1,3%	1,7%	0,1%	1,6%	0,9%
tabulátor	0,0%	1,1%	0,7%	1,5%	0,0%	2,2%	0,0%
posloupnost mezer	0,1%	0,7%	0,5%	4,1%	0,0%	0,2%	0,0%
komentáře délka	0,0%	3,1%	3,0%	0,9%	0,2%	4,7%	0,5%
celkem zbytečné	2,6%	6,1%	5,5%	8,3%	0,3%	8,7%	1,4%

Uvedená procenta se vztahují k celému objemu HTML kódu. Je třeba si však uvědomit, že se jedná pouze o odhady možné redukce kódu – neanalyzoval jsem každý tabulátor, odřádkování ani posloupnost mezer jednotlivě.

Jak ukazuje tabulka, v průměru by bylo možné vypuštěním nadbytečných znaků dosáhnout zmenšení kódu přibližně o 5 %. To jistě není úplně zanedbatelná úspora, ale je zřejmé, že se našim modelovým příkladům nepřibližuje ani zdaleka. Největší potenciální úspory by byly dosažitelné u Quicku a u CNN, ani tam však nepřevyšují 10 %. Naopak ukázkou velmi kompaktního kódu je Seznam.

Zajímavé je, že každá ze sledovaných stránek má největší nadbytek v jiné oblasti. U Českých novin, iDNES a CNN to jsou komentáře, hlavní slabinou Atlasu je mnoho odřádkování, na Quicku posloupnosti mezer. Nelze tedy říct, že by nadbytečné znaky určitého druhu převažovaly obecně.

Jak odstranit nadbytečné znaky a na co dát pozor

Jaký postup zvolit, rozhodnu-li se pro větší kompaktnost? Extrémem je ruční čištění kódu, kdy o každém znaku rozhoduji, zda jej smažu, nebo ponechám. Ale tak se dá naložit s kódem v Příkladu 1 -- se stránkami o objemu několika KB (či desítek KB) jenom stěží. Je tedy lepší činnost automatizovat, a to buď pomocí naprogramovaných utilit (odkazy na prográmky viz níže), nebo s vlastními nástroji (například s využitím funkce Najít a zaměnit, resp. naprogramováním vlastního makra v textovém editoru).

V HTML kódu vznikají nadbytečné znaky z mnoha důvodů:

1. vložený komentář

2. formátování kódu mezerami, tabulátory a odřádkováními pro větší přehlednost

3. nezamýšlené mezery navíc

4. nepotřebné tagy a komentáře vkládané WYSIWYG editory

5. mezery nebo odřádkování kolem dynamicky vkládané části kódu

Na první pohled se tedy zdá řešení snadné – jednoduše odstraním všechny výše zmíněné znaky. Neznám-li však důkladně taje HTML, můžu snadno udělat chybu.

Komentáře

Komentář se v HTML kódu pozná podle toho, že je ohraničen tzv. komentářovými značkami <!-- na začátku a --> na konci. Zdánlivě by tedy vše, co je mezi uvedenými řetězci, mělo být možné bez následků vyhodit. Ale pozor! Někdy se komentářové závorky dávají dovnitř elementů <style> nebo <script>, kde ale mají jiný význam -- prohlížeče úsek kódu mezi nimi (tedy stylopis nebo klientský skript) normálně zpracují, jsou tam jenom pro odstínění velmi starých prohlíčečů. Druhým úskalím jsou tzv. podmíněné komentáře začínající řetězcem <!--[, do nichž „vidí“ Internet Explorer (ostatní prohlížeče je považují za normální komentáře) – jejich smazáním se naruší zobrazení stránky v IE. Řada utilit proto komentáře raději ponechává nedotčené.

Přehlednost

Větší přehlednosti se v editorech dosahuje rozdělováním kódu na řádky a odsazováním (mezerami nebo tabulátory) od levého okraje. Jak již bylo řečeno, prohlížeč posloupnosti bílých znaků redukuje na jedinou mezeru, ovšem s několika výjimkami.

Předně může na přesném počtu mezer záležet v řetězcových konstantách používaných jako atributy některého tagu (např. atributy title, value, src atd.) – jde sice o řídký případ, nicméně je nutné jej vzít v úvahu. Větší komplikací je element <pre>, uvnitř něho se všechny bílé znaky pro zobrazení zachovávají a tedy nic mazat nesmíme. Největším nebezpečím je však CSS vlastnost white-space, která umožňuje podobné chování jako zmíněný <pre> nastavit mnoha jiným elementům -- je tudíž nezbytné se před smazáním nadbytečných bílých znaků podívat do stylopisu, zda autor náhodou nepřikazuje, aby byly zachovány. Naštěstí se vlastnost white-space užívá málokdy.

U odřádkování se může teoreticky stát, že tvůrce kódu odřádkuje zcela úmyslně namísto mezery, například mezi slovy nebo mezi tagy <img>.

Další problémy

Při rychlém psaní kódu nebo jeho úpravách se snadno stane, že kodér místo jedné mezery napíše dvě, případně nechá navíc mezeru na konci řádku. Řešení takových případů je stejné jako u přehlednosti.

Některé WYSIWYG editory do kódu doplní balast (zejména při neodborném použití, pozn. Yuhů), v němž se navíc těžko orientuje. To je však spíš problém psaní optimálního kódu, proto se tím zde nezabývám.

Kompaktnost dynamicky generovaného kódu je o řád složitější problém, pro omezený rozsah článku se jím zde také nezabývám.

Vřele doporučuji dodržovat následující zásady:

• zálohovat, zálohovat, zálohovat

• každou automatickou proceduru vyzkoušet na různých případech (není od věci si stáhnout titulní stránku nějakého portálu a testovat na ní) a pro různé prohlížeče

• pohrát si s nastavením

Nástroje na kompresi

Různé procedury pro kompresi HTML kódu jsou vestavěné do některých oblíbených HTML editorů, za všechny jmenujme PSPad (český freeware) a HomeSite (komerční software, jmenuje se to v něm codeSweeper). Nabízejí řadu možností od přeformátování a zarovnání kódu až po odstranění všech přebytečných znaků.

Kromě HTML editorů nabízejí pročištění kódu i samostatné aplikace, např.:

HTMLathlet Free

HTML Optimizer

HTML Shrinker Light

HTML Compress (+ samostatná recenze)

Na odkazovaných adresách najdete charakteristiky doporučených produktů.

Závěr

Psaní HTML kódu s důrazem na přehlednost vede k přenosu zbytečných znaků. S větším či menším úsilím lze všechny nebo aspoň některé odstranit, a tím snížit nároky na přenos. Praktická měření však ukazují, že dosažená úspora je malá. V úvahu tak přicházejí jiné postupy pro zmenšení objemu přenášených dat, např. úsporněji napsaný kód nebo online datová komprese.

 

Honza Hučín (mailto:honza@internetfolk.cz)

Autor měl vlastní blog na adrese http://suplik.petnik.cz .