O webu

    Rychlost

    Jak zrychlit načítání a vytvořit rychle se načítající stránku.

    Jak funguje načítání stránky

    Pro začátek je vhodné pochopit princip, kterým probíhá načítání stránky.

    1. Uživatel zadá adresu domény do prohlížeče a stiskne Enter. Nebo se na web proklikne.

    2. Pro danou doménu proběhne tzv. DNS Lookup (v překladu hledání v systému doménových jmen, DNS = Domain Name System), čímž se z doménového jména zjistí skutečné umístění serveru (IP adresa). To zabere nějaký čas. Výhoda je, že to stačí udělat pouze jednou. Potom se IP adresa domény uloží do cache a další požadavky i případné načítání dalších stránek DNS Lookup provádět nebude.

      Z toho plyne, že stahování obsahu z více domén znamená více DNS Lookupů a potenciální zdržení stránky.

      Toto zdržení jde minimalisovat pomocí HTTP hlavičky nebo <link> značky preconnect:

    3. Prohlížeč se pokusí s webovým serverem navázat TCP spojení. To zabere nějaký čas, protože je tzv. trojcestné (three-way handshake). Prohlížeč pošle požadavek na server, ten mu odpoví, prohlížeč odpoví serveru. To všechno pochopitelně bude mít nějakou časovou prodlevu.

    4. Následně (po navázání spojení) konečně webový server (například Apache) dostane HTTP požadavek a může začít připravovat obsah.

      Zde záleží na rychlosti serveru a rychlosti skriptů obsah připravující. Nejrychlejší odpověď bude typicky u statických souborů (statické HTML stránky, obrázky, styly, skripty).

    5. Obsah se následně začně stahovat do prohlížeče. Zde se projeví další vlastnost TCP spojení nazývaná Slow-start. Ta slouží jako ochrana před zahlcením příjemce a funguje tak, že se začíná posílat pomalu a postupně se zrychluje.

      V praxi to znamená, že není možné ihned využít maximální „rychlost“ připojení, ale rychlost se musí rozjet. I tak ale typicky samotné stažení souboru netrvá nejdelší dobu celého požadavku. Většinu doby častěji zabere DNS Lookup, navázání spojení a připravení dat na serveru.

      Velký datový objem je tedy zpravidla problém pouze pro pomalá připojení, řekněme do nízkých jednotek megabitů za sekund nebo pro uživatele s datovým limitem. Při rychlosti nad 5 Mbs už většinu času více zabere samotná režije s HTTP požadavkem.

      Příklad požadavku na hlavní stránku jecas.cz:

      Doba jednotlivých částí požadavku na soubor

      Je tedy vidět, že TCP se hodí pro dlouhé přenosy velkého objemu dat, místo krátkých přenosů spousty malých souborů, což je případ použití na webové stránce. Jelikož každé spojení má poměrně vysokou režii, bývá vhodné jich potřebovat co nejméně.

    6. Když prohlížeč takto získá obsah stránky, začne v něm hledat externí objekty:

      • ikonu webu (favicon),
      • obrázky,
      • externí CSS,
      • externí JavaScript,
      • externí objekty (rámy, videa, pluginy a podobně)

      Každý z těchto prvků potom znamená další HTTP požadavek, načež externí prvky mohou způsobit zase další požadavky (obrázky v CSS, připojení dalších externích skriptů nebo stylů v JavaScriptu či kompletní načítání stránky v <iframe>).

      Zde jde velmi rychle narazit na limit souběžných HTTP připojení, který čítá kolem 6 spojení k jedné doméně zároveň (Firefox, Chrome).

      • Browserscope – přehled maximálních počtů HTTP spojení

      To je další důvod pro minimalisaci jejich počtu. Protože další požadavky budou muset čekat na odbavení těch předchozích.

    7. Jak se začne do prohlížeče stahovat obsah, začne se zpracovávat a vykreslovat stránka.

      Zde hraje roli taková nepěkná věc, kterou je blokování vykreslování. Prohlížeče čekají na externí styly a skripty v hlavičce stránky (<head>).

      Na CSS se čeká proto, že v opačném případě by musel prohlížeč stránku vykreslovat vícekrát. Nejdříve bez stylů, potom se styly (případě ještě v nějakém mezistavu s částečně načtenými styly).

      Pokud je CSS soubor větší nebo zkrátka chceme mít načítání co možná nejrychlejší, řešení je stěžejní části CSS umístit přímo do HTML značky <style>. Stěžejní části jsou styly pro obsah, který je tzv. nad ohybem, což je část stránky ihned viditelná před jakýmkoliv rolováním.

      Na JavaScript se potom čeká kvůli tomu, že používání JS funkcí z externího *.js v on* HTML atributech nebo <script> značkách by se odkazovalo na neexistující (ještě nenačtené) věci.

      Dobrým zvykem bývá dělat stránky pokud možno funkční bez JS, takže nevadí asynchronní načtení skriptů.

    Co je cílem?

    Pro rychlost reakce se obecně udávají tyto časové parametry:

    • odpověď do 100 milisekund vypadá jako okamžitá,
    • odpověď do 1 vteřiny je sice se znatelnou prodlevou, ale uživatele nějak zvlášť neobtěžuje,
    • po 10 vteřinách načítání dojde návštěvníkovi trpělivost a půjde dělat něco jiného (osobně bych

    Cílem je tedy se dostat pod 100 milisekund, pochopitelně je otázka za jako cenu.

    Analysování načítání

    Před prováděním konkrétní optimalisačních technik je dobré nejdříve prozkoumat, jak si stránka vede.

    Užitečný je k tomu zejména nástroj WebPagetest, který po zadání URL stránku vyhodnotí a přehledně znázorní průběh načítání.

    Odkazy jianm

    backface-visibility -webkit-backface-visibility: hidden
    HTML atribut lang

    HTML atribut lang

    K čemu slouží a vyplatí se používat HTML atribut lang?

    HTML <time>

    HTML značka <time>

    HTML element <time>. Jak a proč ho použít na stránce.

    Komentáře

    Web jecas.cz píše Bohumil Jahoda, kontakt
    Seznam všech článků
    2013–2024