Optimalizácia rýchlosti www stránok | devLife.eu
Jún
1st

Optimalizácia rýchlosti www stránok

Zaradené do HTML a CSS | Publikoval rado


Ako zrýchliť www stránku/aplikáciu? Odpoveď na túto otázku sa môže veľmi komplikovať v závislosti na tom, ako je daná stránka napísaná. Opravovať po niekom nejaký sprasený php skript alebo sa snažiť nájsť pomalšie miesta v nejakom rozsiahlom CMS systéme môže zabrať veľa času a výsledný efekt bude pravdepodobne nepostrehnuteľný (samozrejme, že pokiaľ sa obyčajná stránka generuje pár sekúnd, tak to bude asi problém a ten treba riešiť).

Pri optimalizácií je veľmi dôležité uvedomiť si, čo z pohľadu užívateľa trvá najdlhšie. To, či sa nejaká stránka bude generovať 30 ms alebo 130 ms z pohľadu užívateľa až tak nezaváži, keď sa k tomu pridá čas komunikácie a prenosu po sieti, spracovania (X)HTML, načítanie všetkých CSS a JavaScriptov …
A tieto prvky zaberú podstatne viac času – pre návštevníka stránok. Preto je veľmi dôležité zamerať sa aj na optimalizáciu načítavanie.

Samotná optimalizácia nie je ťažká. Dokonca je mnohokrát ľahšia ako úprava v zdrojových kódoch aplikácie (php, jsp,…). Stačí dodržať niekoľko základných bodov, ktoré spočívajú nastavení servera alebo úpravou html šablóny. Sú to hlavne:

Minimalizovať počet súborov

Nepoužívať zbytočne desiatky obrázkov pre ikonky a tlačidlá, veľa rôznych CSS a javascriptov. Lepšie je ich zlúčiť a tým znížiť počet súborov, ktoré musí prehliadač stiahnuť.

Používať cache a ETag

ETag je HTTP hlavička, ktorá sa používa na zistenie, či sa daný súbor zmenil, alebo ho musí prehliadač stiahnuť znova. Ale aj tak sa prehliadač posiela požiadavok na server a čaká na odpoveď. Preto je lepšie využiť cache (prehliadač sa na súbory ani neopýta, ak ich už má), ktorú by bolo vhodné defaultne nastaviť na pol roka a viac a to aj pre súbory ako CSS a JS. Aby sa v prípade zmeny súbory automaticky načítali znova, dá sa využiť ?parameter, takže CSS môže vyzerať nejak následovne:

<link rel=“stylesheet” href=“style.css?1″ type=“text/css” />

V prípade zmeny sa len zamení parameter za iný a súbor sa načíta znova.

Umiestniť externé skripty až na koniec

Väčšina prehliadačov pri načítavaní JavaScriptu pozastaví ďalšie zobrazovanie stránky. Takže ak sa umiestni na začiatok do <head>, tak celá stránka bude čakať, kým sa stiahne a vykoná. Z toho dôvodu je vhodné ich dávať až na koniec, kde prípadne zdržanie až tak nevadí, pretože návštevník si medzičasom už môže stránky čítať.

Neuzatvárať hneď spojenia

Dovoliť prehliadaču ponechať si otvorené spojenie aspoň pár sekúnd a nezakazovať ho pomocou hlavičky Connection: Close. Prehliadač si tak nemusí pri každom prvku vytvárať nové spojenie. Táto vlastnosť je štandardne zapnutá.

Minimalizovať DNS requesty

Zistenie DNS záznamu nie je práve najrýchlejšia operácia a pokiaľ danú adresu návštevník nemá nacacheovanú, môže trvať aj viac než 100 ms. Preto je výhodne mať na stránke čo najmenej prvkov z iných domén. Samozrejme toto sa prejavuje len pri prvom zobrazení.

Be Sociable, Share!



Komentáre k článku

  1. Od webdesign dňa Jún 3, 2008 | Odpovedať

    fajn clanok… mne sice vela nedal ale vela webov je na tom naozaj biedne a urcite im toto pomoze 😉

Pridať komentár