Pomalu žačíná okurková sezóna a tak mě napadlo napsat článek o častých chybách HTML „kodérů“. Do uvozovek jsem to umístil schválně, protože většinou tuto funkci zastávají nekompetentní webmasteři nebo amatérští/sváteční kodéři. Smyslem článku je zamyslet se na tím, proč nutně musí navštěvník webu stahovat hromadu zbytečných dat.

Níže popsané weby nechci pomlouvat ani jim škodit, ale rád bych názorně ukázal, jak moc urychlit jejich webovou prezentaci a spočítat úsporu přenášených dat na serveru. A třeba tímto způsobem seženu i práci za slušné peníze :).

TV Nova

Televizi Nova nemusím asi představovat. Web prošel nedávno rekonstrukcí a je to vidět.

• HTML kód je čistý a přehledný.
• Častou chybou je použití 2 JS knihoven – v tomto připadě se zbytečně používá jQuery a zároveň Mootools. Nasazením samotného jQuery by se ušetřilo 181 kB dat.
• Vím, že jsou dnes cool sociální sítě, ale používání XFBML.js knihovny je zbytečné obzvlášť, když jde CSS styly boxu vyřešit například jednoduchým PHP parserem nebo je nadefinovat do externiho souboru. Není potřeba stahovat zbytečné funkce, které stejnak nikdo nevyužívá – úspora 207 kB.
• Základní CSS styly zabírají 159 kB a dalo by se s minimem vypětí sil snadno zmenšit na 150kB.
• Mělo by se také něco udělat s tiskem. Stránka je rozhozená na 3 stránky. Blíže jsem to nezkoumal, ale tohle většinou dělá styl overflow:hidden.

Dalo by se ušetřit minimálně 397 kB stahovaných dat. Zda se vám to málo? Vzhledem k velké navštěvovanosti stránek TV Nova by se dalo při počtu 10.000 náštěvníků ušetřit 3,97 GB přenášených dat. Při milionu návštěv za měsíc by to dělalo už 309,7 GB zbytečných dat! To by značně ulevilo serverovému železu.

GM Electronic

GM Electronic je jeden z největších prodejců elektronických součástek v Česku a na Slovensku.

• HTML kód je přehledný, ale rozsáhlý s množstvým dlouhých názvů tříd a ID. To by vadilo minimálně, budiž.
• JS vypadá slušně. Dalo by se ušetřit pár kB dat sjednocením JS souborů do jednoho, stejnak se používají všude. O AJAX načítání obsahu si myslím svoje – těžko se přes něj dostanou vyhledávače a lidé bez zapnutého JS (přibližně 3%) se neprolistují katalogem. Toto si mohou dovolit pouze velké firmy. Pro zbytek firem je každá návštěva z vyhledávačů potencinálním zákazníkem a zdrojem obratu.
• Hlavní CSS zabírá 189 kB. Opět by se nenásilnými úpravami dalo ubrat 14 kB. To, co mě ovšem zaskočilo, tak jsou zakomentované části, které nemají na ostré verzi co dělat. Další neřest je vyplňovat „0px“ místo „0“ a definování jednotlivých marginů samostatně (margin-left, margin-right….) místo toho, aby se napsal jeden řádek s parametry.
• Taktéž je problém s tiskovou šablonou, kde je odskočený obsah.

Těmito doporučeními by se dalo ušetřit nejméně 30kB zbytečných dat. Nic moc, ale načítání stránek se zrychlí.

iDnes

Ačkoliv iDnes nemám moc v lásce kvůli obsahu, tak web je v mých očích zpracován špičkově.

• HTML je čisté bez zbytečností.
• JS neobsahuje žádný framework a není tak potřeba výrazně něco upravovat. Zmenšit velikost skriptů bychom mohli například funkcí minify.
• CSS je zpracováno bezvadně. Jedině bych namítl načítání přes @import, které neumí staré prohlížeče.
• Tiskové šablony fungují bez problémů.

Celkově velká poklona.

Závěrem

Problémy mají především malé firmy, kterým web zpracovala rovněž malá firma, nějaký sváteční webmaster nebo levný studentík bez zkušeností. S výjimkou Novy jsou velké weby slušně optimalizované a nezatěžují ani uživatele, ani svůj server. Koukal jsem například i na Novinky.cz, Alza.cz a Mall.cz a nenašel jsem větší prohřešky. Jestli máte nějaký tip, rád na něj kouknu.