Hlavní navigace

Zrychlujeme web

9. 11. 2009 22:09 (aktualizováno) | Martin Popelák

Úvodem je nutno připomenout, že neexistuje žádný konkrétní způsob, kterak načítání a samotný chod webové stránky urychlit. Vždy se jedná jen o sadu pravidel a triků, kterak zoptimalizovat stávající stav.

Každý požadavek je drahý

Browser musí nejdříve získat z názvu domény adresu, navázat TCP spojení a poté si vyžádat stránku, styly, scripty a obrázky. I když je naše „vzdálenost“ k serveru třebas jen 20ms, musíme to vynásobit počtem požadavků.

  • 1× DNS lookup
  • 1× navázání TCP spojení
  • 1× požadavek na získání samotné stránky
  • + 1 pokud dojde k redirectu
  • 1× pro každý styl
  • 1× pro každý externí script
  • 1× pro každý obrázek (v css, nebo ve stránce)

Tím samotný výčet zpomalení nekončí. Stránka se musí před zobrazením „sestavit.“ Tedy aplikuji se styly a provede se javascript. Ale i to se dá optimalizovat.

Co s tím ?

Při optimalizaci se nám bude hodit projekt Browserscope, kde najdeme informace a statistiky jednotlivých prohlížečů.

DNS + TCP

S tímto nic nenaděláme. Potřebuje to pro základní komunikaci mezi browserem a serverem.

Hlavní stránka + redirect

Se samotnou stránkou toho také moc nenaděláme. Některé framworky ale podporují přesměrování na straně serveru. Tím se ušetří jeden požadavek.

Kaskádové styly

Komprese
  • Všechny styly dát pouze do jednoho souboru a použít komprimačńí nástroj na zmenšení samotné velikosti
  • Můžeme použít například [webový nástroj csscompressor
  • Nebo na straně serveru ruby knihovnu a mít aktuální výsledek po dobu jedné revize aplikace
Optimalizace

Používat co nejpopisnější css selektory, abychom odlehčili rendrovacímu nástroji

div.selected {width:500px;he­ight:500px} div.selected > span {background-color:red} div.selected > span.inactive {background-color:gray}

Scripty

Komprese kódu

Můžeme použít například službu od googlu. A nebo použít celý projekt s možností stáhnutí javovského programu a použít ho stejně jako css kompresor na straně serveru. Tento nástroj slouží zároveň jako validátor, odstraňuje takzvaně mrtvý kód (což mnohdy není úplně ideální, jelikož ho můžeme volat odjinud) a kód zároveň optimalizuje.

Příklady

//Vstup var height = 50; var heightAdd = 25; function tellMeWidth() { alert(height + heightAdd); } tellMeWidth()

Použití maximální komprese a optimalizace

Kompresor v tomto režimu nepracuje jen s kódem samotným, ale i celým kontextem. Sečte proměnné a odstraní celé volání metody, jelikož v daném kontextu není použito jinak

alert(75);

Použití obyčejné komprese

var a=50,b=25;function c(){alert(a+b)};c();

Či jen odstranění „white spaces“

var height=50,heig­htAdd=25;functi­on tellMeWidth(){a­lert(height+he­ightAdd)}tellMe­Width();
Programátorská optimalizace
  • Důležité je kód psát tak, aby byl rychlý, přehledný a nedocházelo v něm k zbytečným operacím
  • Nenačítat kód, který na stránce nepoužíváme
  • Kód, který používáme, ale nepotřebujeme ho při inicializaci stránky (například nějaké komponenty jako je kalendář, autocompleter apod.) načítat až poté

Obrázky

CSS pozadí

Zde je jen použití triku, kdy se všechny obrázky tvořící pozadí a nemají nastavenou vlastnost repeat uloží do jednoho obrázku a jejich umístění se určuje pomocí souřadnic

body.background-main-bg * { background-image: url(main-bg.png); background-color:transparent; background-repeat: no-repeat; background-position: –10000px –10000px;} .album_bg {background-position: 0px 0px !important;} .bg_reg_button {background-position: 85px 0px !important;} .bg_reg_button_y­ellow {background-position: 107px 0px !important;} .bg_reg_button_gre­en {background-position: 129px 0px !important;} .ikona {background-position: 151px 0px !important;} .ico_concepts {background-position: 151px 41px !important;}
Obrázky ve stránce

Toto se dá řešit jedině pomocí javascriptu, kdy obrázky, které nejsou vidět při úvodním zobrazení načteme později například pomocí pluginu v jQuery LayzyLoad


Článek inspirován přednáškou Make the web faster na Google Developer Day 2009