Choseho weblog o webu

Největší český portál Seznam.cz začíná datově a technologicky optimalizovat své stránky. Již jsme mohli zaregistrovat, že se snaží propagovat své dial-up připojení jistou formou benefitů (např. zmizení horní reklamy v e-mailu). Dalším vstřícným krokem k uživatelům s pomalejším připojením bylo vložení všech invokačních (spouštěcích) kódů reklam na úplný konec stránky.

Proč JavaScript až na konci stránky?

Reklamní kódy jsou na Seznam vkládány převážně přes javascript, a pokud je takový javascript někde uprostřed stránky, tak prohlížeč nepokračuje s načítáním stránky dokud nemá stažený includovaný javascript. A to ještě nepočítám s dalším http požadavkem. Jestliže měl uživatel pomalé připojení (např. modem), tak se výrazně prodlužovala doba načítání stránky, protože bylo nutné čekat na odpověď od reklamního serveru. To s přesunutím kódů na konec stránky odpadá a stránky se bez jediného "zaseknutí" stáhnou celé (myšleno obsahově). A když uživatel má obsah, začnou postupně naskakovat reklamy.

Toto řešení je ideální z hlediska provozovatele webu. Zadavatel reklamy by mohl přijít s námitkou, že se reklama nebude zobrazovat tak často. Jistě, to je možné, a tak záleží na dohodě obou stran, ale reálná čísla ze statistik které mám k dispozici ukazují, že tomu tak není a nevniká žádný významnější rozdíl v počtu impresí.

Technické řešení

Umístěním javascriptů na konec stránky nám vznikne menší problém - Jak výsledek skriptu dostat na své místo ve stránce? Určitou pomocí mohou být CSS, ale ne vždy se dají aplikovat. Seznam to řeší pomocí jednoduchého javascriptu, který přes DOM rozhazuje výsledky javascriptů na správné místo ve stránce. Stačí ve stránce vytvořit prvek, přiřadit mu unikátní identifikátor (např. id="sem-dej-vysledek") a zavolat příslušný skript, který se postará o vše potřebné. Zmíněný skript vypadá takto:

<script type="text/javascript">
function placeAds(advertsCont) {	
	var isdom = (navigator.platform.indexOf("Mac")!=-1) ? true : false;
	var adsCont = document.getElementById(advertsCont);
	var ads = adsCont.getElementsByTagName('div');
	for (i = 0; i < ads.length; i++){
		x = (isdom) ? 0 : i; 
		if ((ads[x]) && (ads[x].id.indexOf('Box') != -1)){
			var aa = ads[x].id.substring(0,ads[x].id.indexOf('Box'));
			if (document.getElementById(aa)) {
				var kam = document.getElementById(aa);
				if (isdom) kam.appendChild(ads[x]);
				else kam.innerHTML = ads[x].innerHTML;
			}
		}
	}
}
placeAds('reklamy');
</script>

Skript pro svojí práci potřebuje zadat pouze název rodičovského prvku, který má procházet a poté jeho "děti" začne dávat na správné místo ve stránce. Zde je důležité dám "dětem" správné id, protože podle toho skript pozná, kam má obsah prvku na stránce vložit. Identifikátor je velmi podobný, jen je rozšířen o "Box", tedy např. id="sem-dej-vysledekBox"). Skript zmíněné "Box" odřízne a již ví, kam má obsah prvku umístit. Toto řešení je naprosto obecné a skript je schopen rozmístit cokoliv.

Lepší než dlouhé sáhy textu je jednoduchý příklad, na kterém si lze velmi dobře představit, jak skript pracuje.

Komprimace stránek pomocí GZIP

Seznam již v současné chvíli provádí poslední testy s komprimací stránek pomocí Gzip. Dnes je široká podpora komprese na straně prohlížečů, a tak lze již gzip kompresi vcelku bez obav použít. Ale v případě, že klient komprimaci nepodporuje, není problém poslat nezkomprimovanou stránku.

Gzip díky svému algoritmu (který je mimořádně vhodný pro HTML) dokáže velmi efektivně zkomprimovat zdrojový kód. Z vlastní zkušenosti vím, že se kompresní poměr pohybuje mezi 60-80%, což je velmi pěkné číslo. Aplikace Gzip je nejsnažší a nejméně nákladná na web, který má předgenerované statické stránky. Nicméně každému je jasné, že takových webů příliš není a většina stránek je generovaná "on-the-fly" (při požadavku). Ale ani generované stránky nejsou pro gzip problém, když se Apache dobře nakonfiguruje. Nicméně je nutné počítat s tím, že znatelně stoupne režie na výdej stránky, cca o 25%. To je pochopitelné, protože on-line komprimace je samozřejmě velmi náročná na CPU. To ale kompenzují velké úspory přenosu dat a podstatné zrychlení stahování stránek.

Pro základní zasvěcení to stačí a zatím se nechci detailně rozepisovat o způsobu konfigurace apache, gzipu a ani o jeho algoritmu apod., leda že by byli zájemci :) Hodně informací k tématu je také v knize Zrychlete si své WWW stránky, kterou taktéž doporučuji.

---