Tipy pro optimalizaci webových stránek

2. srpna 2000

•

Ještě před nedávnem byla doporučovaná velikost stránky max. 40-60 kB (jedná se o velikost včetně všech použitých obrázků včetně reklamy, CSS atd.). I když průměrná kvalita a rychlost připojení se pomalu zvyšuje, český internet je zaplaven stránkami, které zabírají často 2-3x více (některé obsahují i více než 40-60 kB pouze reklamy!) a tomu odpovídá i doba stahování.

Zlozvyku zbytečného nafukování stránek a ignorování zejména uživatelů připojených přes zhusta nepříliš kvalitní dial-up už podlehly i renomované servery (Živě, Svět namodro, iDnes a další). To, že se tak chová řada velkých serverů, není ovšem důvod, proč to dělat také – jsem přesvědčen, že návštěvník spíše ocení rychle se stahující stránky než laciné efekty. V tomto článku najdete tipy, jak redukovat velikost svých stránek a tak udělat jejich návštěvu příjemnější (a levnější).

Pokud chceme redukovat velikost stránky, musíme ji nejprve znát. Patříte-li k většině používající Internet Explorer 5, vše je snadné – v menu zvolte Soubor, Uložit jako a nastavte typ Úplná stránka WWW. Stránka se vám tak uloží včetně obrázků, CSS a dalších prvků. Pokud používáte jiný prohlížeč, budete si muset adresář se všemi prvky vytvořit ručně. Nyní již máte kompletně uloženou stránku a můžete spočítat její velikost – pokud vám vyjde max. 60 kB, nemusíte tento článek číst, pokud ne, zde jsou tipy, jak toto číslo snížit:

1. Snižte množství reklamních bannerů na stránkách
Mnoho i významných serverů používá zejména na titulní straně tři reklamní bannery (nepočítaje několik reklamních čtverců, ikonek a dalších prvků). Takové množství reklamy je nutně kontraproduktivní a od opakované návštěvy odradí všechny kromě těch nejotrlejších nebo nejrychleji připojených. Jeden reklamní banner zabírá kolem 10 kB, snížení množství reklamy na jeden, max. dva bannery na stránce je tedy nejspolehlivější cesta, jak snížit zatížení linek a frustraci uživatelů.

2. Nahraďte ikony textovými odkazy
Jedna ikonka zabírá od jednoho do několika kB – nahradíte-li tedy řekněme pět ikonek mnohem méně náročnými textovými odkazy (které mohou být účinnější díky tomu, že obsahují i popis), ušetříte kolem 10-15 kB. Často jsou na stránkách umístěny ikony úplně zbytečně (jde např. o ikony nejrůznějších vyhledávačů). Taková forma odkazů nepředstavuje pro vašeho návštěvníka žádnou službu (koneckonců, kdo by třeba musel klikat na ikonu, aby se dostal na Seznam?), ale pouze obtíž. Shluky ikon jsou navíc dosti neestetické, takže jejich odstraněním či nahrazením textovými odkazy prokážete návštěvníkovi dvojnásobnou službu.

3. Používejte menší obrázky
Většina obrázků se dá bez újmy na sdělované informaci výrazně zmenšit. Dosáhnout toho lze snížením rozměrů, nahrazením animovaných obrázků statickými, snížením počtu barev (GIF) nebo zvýšením kompresního poměru (JPG). Vždy je potřeba se ptát, zda návštěvník opravdu touží po tom, aby se mu sice stránka stahovala o deset sekund déle, ale obsahovala velké animované vlaječky pro volbu jazyka namísto malých statických.

4. Používejte méně obrázků
Pro obrázky platí totéž co pro ikony – často jdou bez problémů nahradit textovým odkazem, který jednak zabírá méně místa, jednak je často informativnější. K častým hříchům patří menu složené z obrázků, které se navíc ještě změní po najetí myší – textové odkazy poslouží zrovna tak dobře a pomocí CSS můžete i u nich dosáhnout zajímavých efektů.

5. Vyhněte se technologiím náročným na přenosovou rychlost
Pokud chcete dopřát potěšení ze svých stránek i těm, jejichž připojení není z nejrychlejších, nepoužívejte náročné technologie jako je Flash, Java, hudba na pozadí apod. To, že nějaká technologie existuje, ještě neznamená, že bychom ji měli používat – v ideálním případě by vše, co návštěvník dostane, mělo být čisté HTML (všechny dynamické prvky by měly obstarat skripty na straně serveru).

6. Využívejte cache
Na všechny elementy, které se na různých podstránkách opakují, odkazujte stejně, aby se ukládaly do cache na lokálním počítači a nemusely se pokaždé nahrávat ze serveru znovu. To sice nesníží velikost stránky měřenou podle metody zmíněné na začátku článku, ale přesto ovlivní rychlost stahování. Kromě obrázků se velmi vyplatí cachovat – např. stylesheet.

7. Používejte CSS
CSS už dnes alespoň částečně podporuje drtivá většina používaných prohlížečů (Internet Explorer 3 a vyšší, Netscape Navigator 4 a vyšší). Pomocí externího stylesheetu definujte veškeré formátovací informace, v HTML dokumentu je tak jen samotný obsah (proto se tam např. ani jednou nemusí objevit tag FONT). Externí stylesheet má tu výhodu, že zůstává uložen v cachi a musí se tak stáhnout pouze při první návštěvě webu. Při správném používání můžete ušetřit až několik desítek procent HTML kódu.

8. Používejte úsporný HTML kód
Pokud chcete vytvořit štíhlé a rychlé stránky, vyhoďte všechny neefektivní WYSIWYG editory (Microsoft FrontPage apod.). Efektivní kód je třeba vytvořit ručně v Notepadu nebo některém z mírně komfortnějších textových editorů. Pokud používáte CSS, drtivou většinu kódu by měl tvořit samotný obsah stránky, zbytek pak definice tříd, tabulky apod. Rozhodně se však nevyplatí šetřit na úkor korektnosti HTML kódu (tj. to, že některé tagy fungují i bez uzavření, ještě neznamená, že bychom to měli dělat).

Výše uvedený výčet tipů samozřejmě není úplný (ani nemůže být). Jediným dobrým testem, zda už jsou stránky dostatečně optimalizované, je sám(a) si vyzkoušet jejich návštěvu ve špičce přes pomalé připojení a s vymazanou cache (aby se simulovala návštěva někoho, kdo na stránkách ještě nikdy nebyl). Optimalizace sice může být pracná, ovšem pokud se díky ní stránka stáhne za 5 sekund místo za 30, určitě za to stojí.