Neskúšajte trpezlivosť svojich návštevníkov

Bežný návštevník je ochotný čakať na zobrazenie internetovej stránky približne 10 sekúnd. Ak sa vaša stránka zobrazuje dlhšie, mali by ste popremýšľať o jej optimalizácii, inak riskujete stratu svojich návštevníkov.
Počet zobrazení: 993

Bežný návštevník je ochotný čakať na zobrazenie internetovej stránky približne 10 sekúnd. Ak sa vaša stránka zobrazuje dlhšie, mali by ste popremýšľať o jej optimalizácii, inak riskujete stratu svojich návštevníkov. Prečo optimalizovať? Každý z nás sa už určite stretol s nejakou veľmi pomalou stránkou. Tá nám síce ponúkala zaujímavé informácie, ale prístup k nim trval neúmerne dlho. Väčšina z nás podobnú situáciu rieši tak, že danú stránku opustí a hľadá jej náhradu. Preto strata návštevnosti je prvý dôvod, ktorý by vás mal prinútiť zamyslieť sa nad optimalizáciou stránky. Druhým dôvodom, prečo sa rozhodnúť pre optimalizáciu, sú nižšie náklady na prevádzku vašej internetovej prezentácie. Optimalizovaná stránka môže mať až o 60 percent nižšiu veľkosť ako pôvodná verzia, čo ušetrí nielen náklady za prenesené dáta, ale i náklady za hosting a podobne. Tretím dôvodom, prečo je optimalizácia správnym krokom, je možnosť sprístupniť vaše stránky väčšiemu počtu ľudí. S optimalizáciou internetových stránok sa spája aj lepšia použiteľnosť, prístupnosť, optimalizácia pre vyhľadávače a podobne. Samozrejme, nemusí to vždy tak byť. Záleží len na použitých postupoch a vašich vedomostiach. Ale ako to pri internetových stránkach býva, všetko na seba pekne nadväzuje. Našli by sa aj ďalšie dôvody, prečo sa oplatí stránku optimalizovať, ale myslím si, že tieto tri úplne postačujú. Veď väčšia návštevnosť a nižšie náklady sa rovnajú väčšiemu zisku. Pamätajte si, že ak chcete návštevníka zaujať, nestačí myslieť len na pútavý obsah a formu, ktorá ho prezentuje, ale aj na čas, za ktorý ho dokážete svojmu návštevníkovi sprostredkovať. Ak konkurencia dokáže ponúknuť podobný obsah v kratšom čase, váš návštevník pôjde k nim. Ak sa vaša internetová stránka zobrazuje neúmerne dlho, mali by ste ju optimalizovať. Návštevníci rýchle internetové stránky vnímajú ako kvalitnejšie a dôveryhodnejšie. Asi si poviete, že optimalizovať stránku je zbytočné, veď dnes má už každý možnosť používať vysokorýchlostné pripojenie k internetu, tak sa mýlite. V súčasnosti väčšina užívateľov internetu používa pomalé pripojenie, a to konkrétne dial-up, ktorý dosahuje maximálnu rýchlosť 56 kb/s. Práve na tomto pripojení by sa vaša stránka mala zobraziť do 10 sekúnd. To znamená, že celková veľkosť práve zobrazovanej stránky by nemala presiahnuť 48 kb (približne dve sekundy návštevník stráca na odozve a spracovaní HTTP požiadaviek). Ak nejaká vaša stránka presahuje túto veľkosť, môžete očakávať odlev návštevníkov. Druhým faktorom, ktorý spomaľuje vykresľovanie stránok, je ich náročnosť pri spracovaní prehliadačom. Preto sa snažte tvoriť jednoduché internetové stránky, ktoré nemajú komplikovanú štruktúru a neobsahujú žiadne zbytočné a pomalé prvky. Všetky tieto problémy, či s veľkosťou alebo spracovaním internetovej stránky, rieši optimalizácia internetových stránok. Odstrašujúci príklad z praxe Názov stránky: Ministerstvo hospodárstva SR (www.economy.gov.sk) Celkový počet HTTP požiadaviek: 31 (z toho 27 obrázkov) Celková veľkosť úvodnej stránky: 286 137 bajtov Celková doba sťahovania stránky (56 kb/s): približne 58 sekúnd 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/XTHML 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 mal byť preto jednoduchý, nemal by obsahovať nepotrebné elementy, 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, pričom vo všeobecnosti 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 metaznačiek. Úplne vám stačia metaznač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. Ak to je možné, pri formulároch 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. Používajte kompresiu HTML kódu, a to napríklad pomocou GZIP. II. Optimalizácia CSS a JavaScriptu CSS a JavaScript kód by mali byť jednoduché, nemali 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. 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 fotografii sa snažte minimalizovať jej rozmazanie a maximalizovať jej ostrosť, napr. použitím pevnej podložky alebo statívu. Zjednodušte dizajn, prebytočné obrázky nahraďte vlastnosťou backgroundu 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 audiosúboroch používajte komprimované formáty, ako je napríklad MP3, WMA či OGG. Pri videosú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édiá. 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 to je 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, 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 hierarchii 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 metaznač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 odkazov 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, priveľmi komplikované stránky vyhľadávače nemajú príliš v láske. Záver... S optimalizáciou to však netreba preháňať, vaše stránky sa môžu stať pre vás nečitateľné a potom sa vám budú ťažko aktualizovať. V každom prípade s optimalizáciou stránky nič nestratíte. xdeimosx@inet.sk, http://www.slancik.net

Facebook icon
YouTube icon
RSS icon
e-mail icon

Reagujte na článok

Napíšte prosím Váš text.

Blogy a statusy

Píšte a komunikujte

ISSN 1336-2984