Optimalizace webu

Optimalizace stránek (WSO – Web Site Optimization) není jen v poslední době diskutované a medializované SEO, tedy optimalizace obsahu pro vyhledávače. Při návrhu a tvorbě www stránek nebo při jejich úpravách byste měli web optimalizovat i s ohledem na rychlost načítání stránek.


Optimalizace webu Štítky:  , , , , WSO

    Optimalizace stránek (WSO – Web Site Optimization) není jen v poslední době diskutované a medializované SEO, tedy optimalizace obsahu pro vyhledávače. Pokud vytváříte nový web, nebo se chystáte na úpravy či restrukturalizaci staršího webu, měli byste vzít v úvahu i další okolnosti, které ovlivňují chování uživatelů a zákazníků Vašeho webu. Jedna z oblastí, na kterou byste se měli zaměřit, je rychlost, s jakou se uživatelům zobrazí použitelný obsah stránek.

Proč stránky optimalizovat?

V dnešní době, hlavně z důvodu rozšíření vysokorychlostního připojení a přesunu firemních webů do hostingových nebo housingových center s dostatečnou konektivitou, není tento údaj až tolik klíčovým parametrem a je i dosti často opomíjen. Na druhou stranu ovšem narůstá množství přenášených dat, ale hlavně - mění se chování uživatelů.
Uživatelé webu jsou stále náročnější. To je způsobeno hlavně rozšířením vysokorychlostního připojení ve společnosti, a to i pro domácnosti. Pokud před 15 lety byl člověk ochoten čekat na zobrazení stránky řekněme 20 sekund (připojení komutovanou linkou, 33,6kbps modem … vzpomínáte?), tak dnes je pro tohoto člověka takovýto čas naprosto neakceptovatelný a takto pomalou stránku zpravidla opouští.
Existuje řada výzkumů [1,2], které srovnávají rychlost načtení stránky a chování uživatelů. Optimální doba načítání stránky se však liší podle autora výzkumu. Nicméně subjektivně lze říci, že pokud uživatel webu nedostane alespoň část požadovaných informací, na které by soustředil svou pozornost, do cca 2 sekund od kliknutí na odkaz, je nespokojen a má tendence takovýto web opustit.
Existuje i mnoho dalších důvodů proč by se Vaše www stránky měly načítat čím jak nejrychleji.
Jeden z nich souvisí s optimalizací pro vyhledávače (SEO). Velmi pomalé stránky nemusí být vyhledávačem indexovány i přesto, že jste provedli náročnou SEO optimalizaci. Roboti vyhledávačů totiž mají stanoveny limity pro načtení jedné stránky. Po překročení tohoto limitu není www stránka vyhledávačem indexována a tudíž se ani nemůže ve výsledcích vyhledávání objevit.
Pokud využíváte reklamní systém Gogole AdWords, tak vězte, že doba načítání vstupní stránky ovlivňuje hodnotu Quality Score, která následně určuje cenu a pozici inzerátu. Nízká rychlost načítání cílové stránky tak zvyšuje cenu za proklik a naopak. [3].

Optimalizaci rychlosti načítání obsahu webu lze rozdělit na tři oblasti
  • optimalizace konfigurace web serveru
  • optimalizace kódu webu ((X)HTML/CSS,JS,obrázky, grafika)
  • optimalizace rychlosti zobrazení obsahu na straně klienta, tedy prohlížeče.
Optimalizační postupy a nastavení na straně web serveru přinesou hlavně snížení velikosti přenášených dat ze serveru ke klientovi a snížení počtu požadavků na server/cache. Optimalizaci HTML kódu webu opět snížíte velikost přenášených dat. Praktiky pro optimalizaci na straně klienta jsou zaměřeny především na rychlost zobrazení obsahu webu. Pokud je to technicky možné, je pro dosažení co nejlepšího výsledku vhodné všechny tyto praktiky kombinovat.

Optimalizace na straně webserveru

Prvním optimalizačním krokem je povolit kompresi obsahu odesílaného webserverem. Tím se několikanásobně zmenší objem přenášených dat. Pokud klientův prohlížeč podporuje zpracování komprimovaného obsahu (v dnešní době většina), pošle v požadavku na stránku hlavičku „Accep-encoding : gzip“. Následně jsou veškeré textové soubory (HTML, CSS, JavaScript) serverem komprimovány (mod_deflate) čímž se rapidně snižuje množství přenášených dat.
Poznámka:
Podle mých zkušeností Microsoft Internet Security and Acceleration Server (ISA) se zapnutým Web Proxy Filtrem hlavičky „Accep-encoding : gzip“ ignoruje a posílá klientům „nakešovaný“ soubor v nekomprimované podobě.


Nastavení/aktivaci komprese lze provést v konfiguračním souboru webserveru nebo pomocí souboru .htaccess (Apache).

// compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

// Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

Více viz dokumentace k modulu mod_deflate

Pokud nemůžete měnit konfiguraci webserveru přímo (pravděpodobně na hostingu) a ani měnit obsah souboru .htaccess, ale používáte PHP, můžete kompresi zapnout přidáním jednoho řádku na začátek PHP skriptu

<?php
 if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); 
?>


Dalším krokem je minimalizace požadavků na server/cache u statických objektů, jakými jsou zejména obrázky. Pro obrázky je vhodné odstranit ETag hlavičky, což minimalizuje TCP komunikaci při zjišťování novějších obrázků z cache/proxy [4]. Rovněž je vhodné nastavit pro obrázky Expiry, Cache-Control a If-Modified hlavičky[4, 5], s dostatečně dlouhou dobou expirace – min 2 měsíce.

Hodnoty Expiry a Chache-Control lze rovněž nastavit buď v konfiguraci webserveru, pomocí .htaccess nebo přímo v hlavičce Vašich HTML souborů pomocí tagu META elementem META HTTP-EQUIV
Příklad:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" 
CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

Více viz specifikace RFC 2616

V PHP slouží pro posílání http hlaviček funkce PHP Header()
Příklad:

<?php
Header('Cache-Control: must-revalidate');
Header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');
?>


Optimalizace kódu stránek a rychlosti zobrazení obsahu

Základem optimalizace na straně kódu stránek je jednak minimalizace kódu samotného a dále pak minimalizace požadavků na objekty jakými jsou obrázky a různé externí skripty (JavaScript, CSS apod.).
Pro obrázky platí:
  • Používat vždy obrázky s korektní velikostí, tedy takových rozměrů, jaké se na stránce mají zobrazit. Tím nedochází k přenášení zbytečných dat.
  • Nepoužívat zmenšování pomocí atributů width a height, nicméně u všech IMG tagů tyto atributy definovat. Prohlížeč tak rychleji stránku vykreslí. Pomalejší načítání obrázků pak nemá vliv na konečný vzhled stránek.
  • Na stránkách, které obsahují značné množství obrázků, doporučuji rozdělit tyto obrázky, resp. jejich umístění, na více serverů. Dle specifikace HTTP/1.1 totiž vyplývá, že prohlížeč nemůže v jednom okamžiku stahovat více než dvě komponenty z jednoho serveru. Rozdělením zdrojů obrázků na více serverů tak dojde k paralelnímu načítání obrázků.
  • Vhodné je také přesunutí veškerých obrázků na samostatnou doménu, ze které se neposílají cookies.
Pro externí (ale i inline) skripty:
  • Minimalizovat velikost souborů s CSS styly a JavaScriptem. Mezery, tabulátory a jiné formátovací znaky usnadňují tvůrcům stránek orientaci v kódu, nicméně pro prohlížeč jsou k ničemu. Pouze zpomalují načítání stránky a zvyšují nároky na procesor při parsování dokumentu. Odstraněním zbytečných definicí z CSS, odstraněním zbytečných mezer, odřádkování a odsazení z JavaScript (Minify JS), HTML a CSS souborů lze snížit velikost až o 35%
  • Omezit nebo zrušit zobrazování neefektivních reklam (jakékoliv PPC, Affiliate apod.).Tyto reklamní systémy zpravidla využívají pro zobrazení reklamního banneru JavaScript. Většina prohlížečů se totiž chová tak, že při načítání externího JavaScript souboru blokuje ostatní, paralelní stahování dalších souborů.
    Pokud nechcete zobrazování reklamy zrušit, doporučuji přemístit kód pro zobrazení reklamy co možná nejvíce na konec stránky.

Nástroje pro optimalizaci webu

Optimalizace stránek je komplexní proces, který zahrnuje různé postupy a operace. Ne všechny postupy je možné aplikovat ať už z technických důvodů, nebo prostě proto, že nejsou ekonomické. Je proto vhodné před jeho zahájením provézt analýzu co se má optimalizovat, kde jsou slabiny www stránek a odhadnout, kde se optimalizace nejvíce projeví. Rovněž je nutné provést úvodní měření, aby bylo možno po ukončení optimalizace webu stanovit míru účinnosti.
V textu výše je uvedeno jen několik málo vybraných rad a optimalizačních postupů. Všechny tyto rady a mnoho dalších užitečných naleznete na internetu. Namátkou uvedu pouze dvě stránky, věnující se tomuto tématu – PageSpeed a YSlow. První série rad je vytvořena vývojáři Google, druhá pak komunitou kolem serveru Yahoo. Výhodou obou je, že existují zásuvné moduly (plug-in) do prohlížeče Mozilla Firefox, které na základě těchto pravidel www stránku otestují a výsledky zobrazí formou doporučení a přehledu. Máte tak okamžitě informaci, na co se primárně při optimalizaci stránek zaměřit.
Na internetu rovněž existuje několik on-line testovacích stránek. Odkazy na vybrané diagnostické nástroje naleznete na mém webu.

Závěr

Jelikož jsou moje stránky provozovány na jednom z pomocných serverů a rychlost linky je proto omezena, rozhodl jsem se vzhledem ke zvýšeným nárokům na kapacitu linky v období Vánoc (různé e-shop, účetní apod. transakce) přistoupit k optimalizaci svých www stránek s cílem minimalizovat dobu jejich načítání. Optimalizovanou verzi stránek, včetně upravené konfigurace webserveru, jsem nasadil na přelomu roku 2009. Jak se optimalizace projevila, ukazuje graf, který generuje nástroj GogoleSitemaps.

Graf - rychlost načítání stránek (2010-01-23)
Z grafu je patrné, že během cca 20.dnů došlo ke zrychlení načítání stránek z průměrných cca 10 sekund na nějaké 2 sekundy.


Literatura a zdroje:

[1] - King, B.A.: Zrychlete své WWW stránky!. Zoner Press,2004,432s.,80-86815-02-1

[2] – Ruibar, R.: Alchymie internetového úspěchu. ComputerMedia,[online].,,[cit. 2010-01-22], Dostupný na www :
<http://www.computermedia.cz/knihy/ukazka-alchymie-internet-uspechu.pdf>

[3] - How does load time affect my landing page quality? - AdWords Help. [online].,,[cit. 2010-01-22], Dostupný na www :<http://adwords.google.com/support/aw/bin/answer.py?answer=87144#tips>

[4] – Souders, S.: High Performance Web Sites. [online].,,[cit. 2010-01-22],
Dostupný na www :<http://stevesouders.com/hpws/rules.php>

[5] - How To Optimize Your Site With HTTP Caching | BetterExplained. [online].,,[cit. 2010-01-22], Dostupný na www :<http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/>
;  
Vaše názory a komentáře: 4 ;  Zobrazeno: 39220 x ;  Hodnoceno: 3 x ;  Hodnocení článku : Hodnocení článku:93.3%

Hodnocení článku: 1 2 3 4 5

Vaše názory a komentáře (4)
Petr KLOSKO
#225: 18.10.2012 ; 22:14:19
Ve středu 3.října 2012 uvolnil Google první stabilní verzi modulu mod_pagespeed pro webserver Apache. Instalaci modulu, výsledky testů a měření popisuje článek Optimalizace www stránek s Google mod_pagespeed pro web server Apache.
 
Petr KLOSKO
#116: 23.11.2010 ; 20:54:26
Před nedávnem zveřejnil Google open-source modul mod_pagespeed pro webserver Apache 2.2 a vyšší. Mod_pagespeed obsahuje několik filtrů pro optimalizaci JavaScriptu, HTML, CSS stylů, JPEG a PNG obrázků. Způsob použití naleznete na webu GoogleCode: http://code.google.com/speed/page-speed/docs/using_mod.htm
 
Petr KLOSKO
#87: 31.07.2010 ; 22:29:21
Aktualizace grafu GogoleSitemaps (31.7.2010)

Graf - rychlost načítání stránek (2010-07-31)

 
Petr KLOSKO
#51: 31.01.2010 ; 18:59:38
Doplnění: Page Speed verze 1.5 dostupná na http://code.google.com/speed/page-speed/download.html není kompatibilní s prohlížečem Mozilla Firefox 3.6.

Kompatibilní verze je dostupná zde: Page Speed 1.6
 

Přidat komentář
Jméno
E-Mail
Zadejte šestou čísici z čísla Zadejte šestou čísici z čísla
Pokud očekáváte odpověď na Vámi vložený komentář, zadejte Váš e-mail.
Vložením komentáře souhlasíte s pravidly.