Statisíce ve vzduchu: zastaralý vs. moderní návrh webu

Návštěvnost webu je středně vysoká, řekněme 3000 návštěvníků denně (90.000 měsíčně), počet zhlédnutých stran je cca 30.000 denně (900.000 za měsíc). Web používá placený hosting (1000 korun měsíčně) s limitem 30 GB na měsíc (50 korun za každý další GB).

Stránky jsou vytvářeny ve WYSIWYG editoru v kombinaci se stránkami dynamicky generovanými z databáze (ceníky, katalog, aktuální články atd.). Kód stránek je tvořen v jazyce pre-HTML 4 s vnořenými tabulkami a zastaralými značkami FONT, CENTER apod. Jedna stránka (bez obrázků a dalších externích dat) má průměrně velikost 40 KB, k tomu 60 KB obrázků. Polovina obrázků se opakuje na více stránkách, takže se načítá pouze poprvé (příště již prohlížeč použije kopii z vyrovnávací paměti). Tím pádem se s každou stránkou stahuje cca 70 KB nových dat – data načítaná pouze poprvé (a následně již z cache) budeme ignorovat. Tomu odpovídá datový přenos 70 KB krát 30.000 stránek = 2 GB za den, neboli 70 KB krát 900.000 stránek = 60 GB měsíčně (tj. 30 GB přes limit).

Průměrný návštěvník stahuje 10 stránek, tedy 700 KB. Při průměrné rychlosti připojení 56 kbit/s to trvá minutu čtyřicet (100 sec).

Obsah stránek aktualizují v rámci pracovních povinností vesměs zaměstnanci firmy, na základní editaci webu je navíc vyhrazena část úvazku jednoho pracovníka (5000 korun měsíčně). Technická správa je v ceně hostingu, další pracovníci nejsou třeba. Jednou ročně se aktualizuje vzhled celého webu. To obnáší změnu kódu několika desítek stránek a šablon. Každý, kdo někdy podobnou činnost ve své firmě zajišťoval, si již určitě udělal vlastní představu, kolik taková úprava může stát. Malé a méně významné firmy si často najmou studenta za pár tisíc korun, velké společnosti spíše svěří svůj web péči profesionálního grafika a kodéra. Tak jako tak redesign spočívá ve dvou krocích – prvním je grafický návrh, druhým je jeho realizace. Při stávajícím postupu tvorby webu obnáší implementace grafického návrhu vytvoření zcela nového kódu celé sady stránek a šablon, což (podle objemu a složitosti webu) obvykle vyžaduje práci jednoho kodéra na 3–8 týdnů (i více). Redesign pak odpovídá investici 100–300 tisíc korun (podle kvalit grafika i kodéra a složitosti webu).

Náklady na provoz webu jsou tedy:

Přechod na moderní technologie

Podívejme se, co se stane, když se firma rozhodne začít používat moderní technologie tvorby webu. Především oddělit obsah stránek od popisu jejich vzhledu, což už je dnes možné především díky jazyku CSS. Za cenu odpovídající jednomu velkému „ročnímu“ redesignu (tedy bez nutnosti dodatečných nákladů!) je možné celý web kompletně přepracovat. Předpodkládáme zde, že jinak je web dobře navržen a není třeba měnit jeho logickou strukturu, workflow atd. Změny se týkají pouze přepsání kódu stránek, navenek nemusí být vůbec patrný žádný rozdíl. Úpravy však lze efektivně spojit s novým designem webu – nové technologie totiž přinášejí také řadu nových možností, které předtím nebylo možné plně využívat.

S oddělením popisu vzhledu (CSS kód) od samotného obsahu stránek (HTML kód) souvisí pokles objemu stránek – obvykle o 30 až 80 procent (sic!). Část informací se sice přenese na stranu CSS, ale bude-li popis vzhledu uložen v externích souborech, budou s nimi prohlížeče pracovat jako s často se opakujícími obrázky: soubor načtou jen jednou, při první návštěvě, a na všech ostatních stránkách a při dalších návštěvách webu již použijí kopii z cache. Z webu se bude načítat jen aktuální, jednoduše formátovaný obsah, soubor se vzhledem se bude přenášet jen pokud jej změníme. Do sféry působnosti CSS se navíc přesune i řada obrázků používaných dříve často jen pro dekorační účely (rámečky, linky, pseudo-text atd.). Je ověřeno, že s CSS klesá i objem přenášených obrázků. V našem příkladu tak například klesne objem HTML o 20 KB a objem obrázků o 10 KB na stránku. To ovšem dělá 25 GB měsíčně (úspora cca 15.000 korun ročně).

S tím souvisí i další přínos – několikanásobně snazší a efektivnější změny designu webu. Kompletní redesign totiž nyní bude spočívat v pouhé náhradě jednoho CSS souboru za jiný. Za plného chodu, během okamžiku je možné zcela změnit vzhled webu. Je snadné připravit alternativní grafická témata pro různé příležitosti (speciální nabídky, veletrhy, sezónní události atd.). Dokonce je možné uživatelům nabídnout na výběr několik různých vzhledů – podle jejich vkusu, ale i podle možností použitého zařízení (styl pro PDA, pro mobilní telefony, pro velké/malé rozlišení atd.). Připojením stylu pro tiskárny odpadá nutnost připravovat speciální verze stránek pro tisk. Dobře navrženým CSS lze v následujících letech ušetřit až statisíce za (nyní již zbytečné) úpravy HTML kódu všech stránek. V našem příkladu můžeme předpokládat přinejmenším poloviční úsporu za každoroční redesign (tedy cca 80.000 korun).

Menší kód stránek ocení i uživatelé. Například zmíněnou úsporou 30 KB na stránce (v našem v příkladu) bude každý z návštěvníků stahovat data ze stránek o 42 vteřin kratší dobu, což činí celkem 3,8 milonu sekund měsíčně, tedy cca 44 dní. Ročně uspoříte svým čtenářům (zákazníkům) více než rok připojení! Navíc je ověřeno, že návštěvníci mají rychle se načítající stránky rádi, dávají jim (celkem pochopitelně) přednost před pomalými weby, a co je důležité: na „svižném“ webu zůstávají delší dobu a přečtou si více informací.

Kód HTML, který se již nemusí podřizovat vzhledu stránek, nyní může lépe popisovat strukturu obsahu, což přináší řadu výhod. Jednak na vstupu, při generování stránek z databází (kód je strukturovaný, přehledný a snadno modifikovatelný), jednak na výstupu – např. při následném automatickém zpracování stránek. Především při optimalizaci a indexaci ve vyhledávačích, která je snazší a efektivnější. Dnes již existuje řada firem, které se na optimalizaci pro vyhledávače (SEO) specializují, a většinou strukturovaný kód svým zákazníkům doporučují. S dobrým kódem totiž dokáží udělat opravdové divy (např. dostat firmu celkem rychle na první místo ve vyhledávačích) – s kódem nestrukturovaným je to často poměrně obtížnější a potažmo dražší.

Přímé úspory můžeme relativně snadno vyčíslit:

Pouhou změnou technologie (jejíž pořízení dokonce nevyžadovalo žádné vysoké náklady navíc) jsme v našem příkladu ušetřili přibližně sto tisíc ročně – nebo (chcete-li) 40 procent nákladů. A to jsou pouze náklady přímé, zřetelně vyčíslitelné. Přínosy nepřímé (efektivita správy webu, kvalitnější SEO a marketing, zvýšení průchodnosti webu pro návštěvníky atd.), které lze jen těžko kalkulovat, zde ani započítány nejsou.

Pokud provozujete malou firmu s jednou, dvěma WWW stránkami, které vám tvoří syn ve Frontpagi na počítači v dětském pokoji, ničím z výše uvedeného se nenechejte vzrušovat. Vaše stránky jsou určitě dobré a dostatečně funkční (pokud je dokáže návštěvník ve svém prohlížeči zobrazit), ať je jejich kód tvořen tabulkami nebo čímkoli jiným. Přenos dat z vašeho serveru se počítá spíš v kilobajtech než v gigabajtech a vaši zákazníci na desítky než na tisíce. Pro vás je dokonce daleko efektivnější spravovat svůj „webík“ na tom domácím počítači než investovat do jakéhokoli profesionálního řešení. Pokud by vám někdo takové vnucoval, dobře si spočítejte, jestli by se vám podobná investice vůbec vyplatila.

Pakliže je ale váš web přece jen větší, nejste firmičkou z Horní Dolní a svůj byznys na webu už berete jako seriózní součást svého podnikání, možná by stálo za to své investice do něj prověřit. Platíte tisíce za přenesené gigabajty? Utíkají návštěvníci z vašeho webu dřív, než byste chtěli? Ne a ne se dostat na přední pozice ve vyhledávačích? Platíte ročně drahou aktualizaci svého webu – nebo dokonce máte web už pět let stejný, protože na redesign nemáte? A zjišťovali jste proč?

Svého webdesignera se raději neptejte – zvlášť pokud jste mu sami pořizovali ten úžasný HTML editor, který nic jiného než onen prvně zmíněný, zastaralý postup neumí. Dokonce se nemusíte ptát vůbec nikoho. Ověřit si to můžete sami. Načtěte si v prohlížeči stránku svého webu a z menu vyberte položku „Zobrazit zdrojový kód“ (Show Source). Pakliže v něm uvidíte nesčetněkrát příkazy TR, /TR, TD, /TD; či dokonce FONT…, zkuste si znovu projít otázky z předchozího odstavce. Teď už víte proč.