Neskúšajte trpezlivosť Vašich návštevníkov II.
Redakcia Inet.sk / 03. 06. 2005, 00:00
V predošlej časti sme si povedali základné dôvody, prečo Vašu internetovú stránku vôbec optimalizovať. V dnešnej časti si predstavíme hlavné zložky takejto optimalizácie a na čo by sme pri nej mali pamätať. Viac informácií hľadajte v článku.
WSO (Web Site Optimization) sa skladá z niekoľkých zložiek, pričom každú z nich je možné svojvoľne vynechať, ale najlepšie je, keď sa aplikujú úplne všetky. Výsledok je potom väčšinou efektívnejší a o to nám predsa ide. Teraz si postupne uvedieme jednotlivé zložky optimalizácie.
I. Optimalizácia HTML / XHTML
HTML kód je jediná zložka internetovej stránky, ktorú nijako nemôže ovplyvniť návštevník. Kým pri obrázkoch, flash animáciách, javascripte a podobne, je návštevníkovi umožnené tieto prvky stránky vypnúť, pri HTML takú možnosť nemá. Práve preto HTML má najväčší pomer zbytočných dát, ktoré návštevník absolútne nepotrebuje.
HTML kód stránky by preto mal byť jednoduchý, nemal by obsahovať nepotrebné elementy a ani atribúty. Mal by sa zaobísť bez vysvetľujúcich komentárov, zbytočných medzier a podobne. Forma stránky by nemala byť uskutočňovaná HTML kódom, ale pomocou CSS.
Každý HTML dokument by mal mať určený DTD (Document Type Definition – definícia typu dokumentu), čo urýchľuje a uľahčuje jeho korektné zobrazenie. Ak prehliadač musí hádať aké bolo použité DTD, môže to spôsobiť nielen spomalenie vykresľovania stránky, ale aj jej nekorektné zobrazenie. HTML kód by mal byť zároveň valídny (vyhovujúci) podľa použitého DTD. Ak kód nevyhovuje použitej norme (DTD), môže to spôsobiť nekorektné a pomalé zobrazenie stránky.
Nejaký čas pri zobrazovaní stránky môžete ušetriť aj tak, že zmažete všetky nepotrebné znaky, konce riadkov a napíšete napríklad viacej elementov do jedného riadku. Minimalizovaním počtu HTTP požiadaviek (HTML kód je napríklad jedna požiadavka, externé CSS je druhá a každý obrázok predstavuje ďalšiu požiadavku. Všeobecne platí, že každý objekt sa rovná jednej požiadavke) zrýchlite zobrazenie internetovej stránky, ale i jej odozvu. Rozhodne minimalizujte aj počet meta-značiek. Úplne Vám stačia meta-značky description, keywords a content-type.
Na layout stránky nepoužívajte tabuľky. Tie nielenže sú väčšinou dátovo veľké, ale aj ich zobrazenie trvá dlho. Navyše tabuľkový layout môže spôsobiť, že so stránkou budú mať problémy niektorí hendikepovaní. Ak je použitie tabuliek nevyhnutné, snažte sa docieliť ich lineárne spracovanie, zjednodušujte ich, nepoužívajte zbytočné atribúty.
Pri formulároch, ak je to možné, sa snažte používať metódu GET, ktorá je efektívnejšia ako POST. Nebojte sa formuláre skombinovať s JavaScriptom, ale snažte sa o to, aby formulár bol plne funkčný aj s vypnutím JavaScriptom.
Snažte sa používať, čo najkratšie URL adresy v odkazoch, obrázkoch a podobne. Komplikované URL adresy aj tak len mätú návštevníkov a ich skrátením ušetríte pár bajtov a pre návštevníka budú jasnejšie. Používajte kompresiu HTML kódu a to napríklad pomocou GZIP.
II. Optimalizácia CSS a JavaScriptu
CSS a JavaScript kód by mal byť jednoduchý, nemal by obsahovať zbytočné znaky, prázdne miesta, komentáre a podobne. V CSS zapisujte vlastnosti deklarácie selektora do jedného riadku, oddeľujte ich čiarkou, ale bez medzery za ňou. Hodnoty k vlastnostiam priraďujte dvojbodkou, ale opäť bez medzery za ňou. Minimalizujte počet HTTP požiadaviek.
Zoskupujte viaceré selektory, ktoré majú obdobné vlastnosti. Využívajte výhody dedičnosti, ktorá Vám môže výrazne zjednodušiť CSS kód. Používajte štýly pre rôzne výstupné zariadenia (monitor, TV, tlač, prenosné zariadenia typu PDA), urýchlite a zjednodušíte spracovanie Vašej stránky na nich. Skracujte zápis vlastností pre písmo, pozadie, okraje, orámovanie, výplne a zoznamy. Ak je to možné, snažte sa zapisovať hodnoty farieb v skrátenej hexadecimálnej alebo slovnej podobe. Používajte radšej relatívne jednotky namiesto absolútnych, je to efektívnejšie.
Pri JavaScripte používajte tie postupy, ktoré sa rýchlejšie vykonávajú. Dopredu známe hodnoty deklarujte okamžite, minimalizujte interakciu DOM a I/O, spájajte dlhé reťazce, používajte lokálne premenné namiesto globálnych a podobne. Používajte kompresiu CSS a JavaScript kódu a to napríklad pomocou GZIP. Nezabúdajte, že CSS a JavaScript sa ukladajú do vyrovnávacej pamäte prehliadača.
III. Optimalizácia grafiky
Obrázky ešte stále tvoria najväčší podiel v dátovej veľkosti internetových stránok. Preto ich optimalizovanie je priam nevyhnutnosťou. Efektívne zníženie veľkosti obrázkov dosiahnete len tak, že zmenšíme ich rozlíšenie, počet farieb, rozmery alebo kvalitu.
Pri fotografiách sa snažte minimalizovať jej rozmazanie a maximalizovať jej ostrosť, napr. použitím pevnej podložky alebo statívu. Zjednodušte design, prebytočné obrázky nahraďte vlastnosťou background v CSS a podobne. Obrázky spájajte, snažte sa zmenšiť celkový počet použitých obrázkov, ušetríte tak čas na HTTP požiadavkách. Pri obrázkových galériách používajte menšie náhľady obrázkov, ktoré odkazujú na obrázky v plnej veľkosti. Používajte rôzne kompresné algoritmy súborov JPG, GIF a PNG, ktoré dokážu zmenšiť veľkosť obrázku rapídne. Väčšina obrázkov je použiteľná aj pri 50 percentnej kompresii.
IV. Optimalizácia multimédií
Pri audio súboroch používajte komprimované formáty ako je napríklad MP3, WMA či OGG. Pri video súboroch používajte komprimované formáty ako je napríklad WMV, OGM, RM, MOV a podobne. Používajte kódeky s čo najlepšou komprimáciou. Snažte sa minimalizovať veľkosť a počet flash animácií, či 2D a 3D animácií vytvorených napr. v Shockwave. Používajte radšej streamované média.
Pre textové dokumenty a prezentácie používajte radšej PDF súbory, ktoré majú nielenže lepší kompresný pomer ako súbory Microsoft Office, ale sú aj prístupnejšie. V PDF súboroch sa snažte obmedziť veľkosť a počet obrázkov, ale i použitých písiem. Ak je to možné, používajte radšej vektorové obrázky.
V. Optimalizácia kľúčových slov
Ako som spomenul už v predošlom článku, tak s WSO sa v ideálnom prípade spája aj SEO (Search Engine Optimalization). O tom, že SEO by pre Vás malo byť rovnako dôležité ako WSO, Vás snáď nemusím ani presviedčať.
Snažte sa používať viacslovné spojenia ako samostatné slová. Vyhľadávače hodnotia stránku lepšie, ak sa Vaše hlavné kľúčové slová vyskytujú v hierarchií stránky čo najvyššie. Ďalším dôležitým faktorom je ako často sa objavujú na stránke a aký majú pomer voči celkovému počtu slov. Dôležitá je aj príbuznosť medzi jednotlivými kľúčovými slovami a umiestnenie, ktoré zdôrazňuje ich dôležitosť. Momentálne najdôležitejším kritériom sú spätné odkazy.
Ak chcete kľúčové slová optimalizovať, mali by ste sa pridržiavať tohto postupu:
- vytvorte kľúčové frázy
- zoraďte ich podľa popularity
- podobné a súvisiace kľúčové frázy zlúčte
- v značke title použite dve až tri najlepšie kľúčové frázy
- vložte meta-značku description a keywords
- pridajte kľúčové frázy na kľúčové miesta v hierarchii stránky
- registrujte svoju internetovú stránku do rôznych vyhľadávačov
Nezabúdajte, že stránky vytvorené vo flashi, nebudú nikdy zaindexované robotmi vyhľadávačov. Preto poskytnite robotom aj HTML verziu. Vyhnite sa aj používaniu rámcov, či odkazom s otáznikom. Pri obrázkoch nezabudnite na alternatívny popis pomocou atribútu alt. Pri odkazoch nepoužívajte JavaScript, vyhľadávače takýmto odkazom nerozumejú. Odkazy by mali tiež obsahovať Vaše kľúčové frázy, preto s nimi nešetrite. Ak využívate CSS, používajte kľúčové slová aj v názvoch tried a identifikátorov. Stránka by mala mať jednoduchú štruktúru, príliš komplikované stránky vyhľadávače nemajú príliš v láske.
Záver ...
Existuje ešte šiesta zložka optimalizácie internetových stránok a to optimalizácia na strane servera, ktorá je ale pomerne obsiahla a náročná. Navyše len máloktorí z Vás bude môcť robiť zmeny na strane servera, preto som ju radšej vynechal. Neskôr sa k nej však vrátim, ale to až v ďalších článkoch, ktoré mám pre Vás pripravené.
Na záver si pamätajte, že každý ušetrený bajt pomôže Vašu stránku zobraziť o kúsok rýchlejšie a ušetrí časť Vašich nákladov. S optimalizáciou to však netreba preháňať, Vaše stránky sa môžu stať pre Vás nečitateľnými a potom sa Vám budú ťažko aktualizovať. V každom prípade s optimalizáciou stránky nič nestratíte.
Michal Slančík
xdeimosx@inet.sk
http://www.slancik.net
I. Optimalizácia HTML / XHTML
HTML kód je jediná zložka internetovej stránky, ktorú nijako nemôže ovplyvniť návštevník. Kým pri obrázkoch, flash animáciách, javascripte a podobne, je návštevníkovi umožnené tieto prvky stránky vypnúť, pri HTML takú možnosť nemá. Práve preto HTML má najväčší pomer zbytočných dát, ktoré návštevník absolútne nepotrebuje.
HTML kód stránky by preto mal byť jednoduchý, nemal by obsahovať nepotrebné elementy a ani atribúty. Mal by sa zaobísť bez vysvetľujúcich komentárov, zbytočných medzier a podobne. Forma stránky by nemala byť uskutočňovaná HTML kódom, ale pomocou CSS.
Každý HTML dokument by mal mať určený DTD (Document Type Definition – definícia typu dokumentu), čo urýchľuje a uľahčuje jeho korektné zobrazenie. Ak prehliadač musí hádať aké bolo použité DTD, môže to spôsobiť nielen spomalenie vykresľovania stránky, ale aj jej nekorektné zobrazenie. HTML kód by mal byť zároveň valídny (vyhovujúci) podľa použitého DTD. Ak kód nevyhovuje použitej norme (DTD), môže to spôsobiť nekorektné a pomalé zobrazenie stránky.
Nejaký čas pri zobrazovaní stránky môžete ušetriť aj tak, že zmažete všetky nepotrebné znaky, konce riadkov a napíšete napríklad viacej elementov do jedného riadku. Minimalizovaním počtu HTTP požiadaviek (HTML kód je napríklad jedna požiadavka, externé CSS je druhá a každý obrázok predstavuje ďalšiu požiadavku. Všeobecne platí, že každý objekt sa rovná jednej požiadavke) zrýchlite zobrazenie internetovej stránky, ale i jej odozvu. Rozhodne minimalizujte aj počet meta-značiek. Úplne Vám stačia meta-značky description, keywords a content-type.
Na layout stránky nepoužívajte tabuľky. Tie nielenže sú väčšinou dátovo veľké, ale aj ich zobrazenie trvá dlho. Navyše tabuľkový layout môže spôsobiť, že so stránkou budú mať problémy niektorí hendikepovaní. Ak je použitie tabuliek nevyhnutné, snažte sa docieliť ich lineárne spracovanie, zjednodušujte ich, nepoužívajte zbytočné atribúty.
Pri formulároch, ak je to možné, sa snažte používať metódu GET, ktorá je efektívnejšia ako POST. Nebojte sa formuláre skombinovať s JavaScriptom, ale snažte sa o to, aby formulár bol plne funkčný aj s vypnutím JavaScriptom.
Snažte sa používať, čo najkratšie URL adresy v odkazoch, obrázkoch a podobne. Komplikované URL adresy aj tak len mätú návštevníkov a ich skrátením ušetríte pár bajtov a pre návštevníka budú jasnejšie. Používajte kompresiu HTML kódu a to napríklad pomocou GZIP.
II. Optimalizácia CSS a JavaScriptu
CSS a JavaScript kód by mal byť jednoduchý, nemal by obsahovať zbytočné znaky, prázdne miesta, komentáre a podobne. V CSS zapisujte vlastnosti deklarácie selektora do jedného riadku, oddeľujte ich čiarkou, ale bez medzery za ňou. Hodnoty k vlastnostiam priraďujte dvojbodkou, ale opäť bez medzery za ňou. Minimalizujte počet HTTP požiadaviek.
Zoskupujte viaceré selektory, ktoré majú obdobné vlastnosti. Využívajte výhody dedičnosti, ktorá Vám môže výrazne zjednodušiť CSS kód. Používajte štýly pre rôzne výstupné zariadenia (monitor, TV, tlač, prenosné zariadenia typu PDA), urýchlite a zjednodušíte spracovanie Vašej stránky na nich. Skracujte zápis vlastností pre písmo, pozadie, okraje, orámovanie, výplne a zoznamy. Ak je to možné, snažte sa zapisovať hodnoty farieb v skrátenej hexadecimálnej alebo slovnej podobe. Používajte radšej relatívne jednotky namiesto absolútnych, je to efektívnejšie.
Pri JavaScripte používajte tie postupy, ktoré sa rýchlejšie vykonávajú. Dopredu známe hodnoty deklarujte okamžite, minimalizujte interakciu DOM a I/O, spájajte dlhé reťazce, používajte lokálne premenné namiesto globálnych a podobne. Používajte kompresiu CSS a JavaScript kódu a to napríklad pomocou GZIP. Nezabúdajte, že CSS a JavaScript sa ukladajú do vyrovnávacej pamäte prehliadača.
III. Optimalizácia grafiky
Obrázky ešte stále tvoria najväčší podiel v dátovej veľkosti internetových stránok. Preto ich optimalizovanie je priam nevyhnutnosťou. Efektívne zníženie veľkosti obrázkov dosiahnete len tak, že zmenšíme ich rozlíšenie, počet farieb, rozmery alebo kvalitu.
Pri fotografiách sa snažte minimalizovať jej rozmazanie a maximalizovať jej ostrosť, napr. použitím pevnej podložky alebo statívu. Zjednodušte design, prebytočné obrázky nahraďte vlastnosťou background v CSS a podobne. Obrázky spájajte, snažte sa zmenšiť celkový počet použitých obrázkov, ušetríte tak čas na HTTP požiadavkách. Pri obrázkových galériách používajte menšie náhľady obrázkov, ktoré odkazujú na obrázky v plnej veľkosti. Používajte rôzne kompresné algoritmy súborov JPG, GIF a PNG, ktoré dokážu zmenšiť veľkosť obrázku rapídne. Väčšina obrázkov je použiteľná aj pri 50 percentnej kompresii.
IV. Optimalizácia multimédií
Pri audio súboroch používajte komprimované formáty ako je napríklad MP3, WMA či OGG. Pri video súboroch používajte komprimované formáty ako je napríklad WMV, OGM, RM, MOV a podobne. Používajte kódeky s čo najlepšou komprimáciou. Snažte sa minimalizovať veľkosť a počet flash animácií, či 2D a 3D animácií vytvorených napr. v Shockwave. Používajte radšej streamované média.
Pre textové dokumenty a prezentácie používajte radšej PDF súbory, ktoré majú nielenže lepší kompresný pomer ako súbory Microsoft Office, ale sú aj prístupnejšie. V PDF súboroch sa snažte obmedziť veľkosť a počet obrázkov, ale i použitých písiem. Ak je to možné, používajte radšej vektorové obrázky.
V. Optimalizácia kľúčových slov
Ako som spomenul už v predošlom článku, tak s WSO sa v ideálnom prípade spája aj SEO (Search Engine Optimalization). O tom, že SEO by pre Vás malo byť rovnako dôležité ako WSO, Vás snáď nemusím ani presviedčať.
Snažte sa používať viacslovné spojenia ako samostatné slová. Vyhľadávače hodnotia stránku lepšie, ak sa Vaše hlavné kľúčové slová vyskytujú v hierarchií stránky čo najvyššie. Ďalším dôležitým faktorom je ako často sa objavujú na stránke a aký majú pomer voči celkovému počtu slov. Dôležitá je aj príbuznosť medzi jednotlivými kľúčovými slovami a umiestnenie, ktoré zdôrazňuje ich dôležitosť. Momentálne najdôležitejším kritériom sú spätné odkazy.
Ak chcete kľúčové slová optimalizovať, mali by ste sa pridržiavať tohto postupu:
- vytvorte kľúčové frázy
- zoraďte ich podľa popularity
- podobné a súvisiace kľúčové frázy zlúčte
- v značke title použite dve až tri najlepšie kľúčové frázy
- vložte meta-značku description a keywords
- pridajte kľúčové frázy na kľúčové miesta v hierarchii stránky
- registrujte svoju internetovú stránku do rôznych vyhľadávačov
Nezabúdajte, že stránky vytvorené vo flashi, nebudú nikdy zaindexované robotmi vyhľadávačov. Preto poskytnite robotom aj HTML verziu. Vyhnite sa aj používaniu rámcov, či odkazom s otáznikom. Pri obrázkoch nezabudnite na alternatívny popis pomocou atribútu alt. Pri odkazoch nepoužívajte JavaScript, vyhľadávače takýmto odkazom nerozumejú. Odkazy by mali tiež obsahovať Vaše kľúčové frázy, preto s nimi nešetrite. Ak využívate CSS, používajte kľúčové slová aj v názvoch tried a identifikátorov. Stránka by mala mať jednoduchú štruktúru, príliš komplikované stránky vyhľadávače nemajú príliš v láske.
Záver ...
Existuje ešte šiesta zložka optimalizácie internetových stránok a to optimalizácia na strane servera, ktorá je ale pomerne obsiahla a náročná. Navyše len máloktorí z Vás bude môcť robiť zmeny na strane servera, preto som ju radšej vynechal. Neskôr sa k nej však vrátim, ale to až v ďalších článkoch, ktoré mám pre Vás pripravené.
Na záver si pamätajte, že každý ušetrený bajt pomôže Vašu stránku zobraziť o kúsok rýchlejšie a ušetrí časť Vašich nákladov. S optimalizáciou to však netreba preháňať, Vaše stránky sa môžu stať pre Vás nečitateľnými a potom sa Vám budú ťažko aktualizovať. V každom prípade s optimalizáciou stránky nič nestratíte.
Michal Slančík
xdeimosx@inet.sk
http://www.slancik.net