Domů > HTML, CSS, JS, Tipy a triky > Čeho by se měli HTML kodéři vyvarovat

Čeho by se měli HTML kodéři vyvarovat

klávesnicePomalu ž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.

  1. 05.07.2011 na 11:16 | #1

    alfacomp.cz ?

  2. 05.07.2011 na 12:46 | #2

    Taky pekna haluz :) /* Protoze IE6 */ :D

  3. 06.07.2011 na 13:29 | #3

    Ani se neptám na můj web ;-)
    Ale pošli to na vedení Novy a možná máš o příval práce postaráno :-D

  4. 07.07.2011 na 21:14 | #4

    Přece jen mě napadá dotaz víc k věci:
    Z hlediska rychlosti načítání stránek do prohlížeče je rychlejší mít menu vložené přímo v každé stránce nebo je naopak méně zatěžující pro server a tím potažmo rychlejší vkládat jej pomocí include? Tzn., jestli se vkládaná část čte při listování stránkami pokaždé znovu nebo zůstává někde načtená.

    PS: Prosím o odpověď pouze v případě, že rada bude zcela zdarma a nebudou požadována ani příští naturální plnění ;-)

  5. 07.07.2011 na 23:46 | #5

    Tohle bych vubec neresil. Server to zatezuje opravdu minimalne, navic si neumim predstavit jak by to na strankach vypadalo, kdyby se pri kazde sebemensi zmene menu musely prepisovat vsechny stranky.

  6. 08.07.2011 na 07:47 | #6

    Řeším to pomocí include.
    Ve druhém případě bych označila všechny soubory webu v editoru, pak zmáčkla Ctrl+F (v jiném editoru Ctrl+H) a zadala Staré menu do jednoho chlívku, Nové menu do druhého, odentrovala to, kývla na dotaz, zda to myslím vážně a než by bylo hotovo, ani by se mi nestihla ohřát voda na kafe.