Napíšete do prehliadača worldwideweb.sk, stlačíte Enter a stránka je tam. Pôsobí to ako jeden krok, no v skutočnosti ide o reťaz niekoľkých samostatných rozhovorov medzi vaším počítačom a strojmi, ktoré môžu stáť na druhom konci Európy. Keď sa web „seká“, takmer vždy sa dá ukázať prstom na jeden konkrétny článok tejto reťaze. Preto sa oplatí poznať ich všetky.
1. Prehliadač najprv číta, čo ste napísali
Riadok s adresou je zároveň vyhľadávacie pole. Prehliadač preto najskôr rozhodne, či ide o adresu, alebo o hľadaný výraz. Ak je to adresa, doplní chýbajúce časti – typicky schému https://, a ak za doménou nie je žiadna cesta, aj lomku pre koreňovú adresu (z example.sk sa stane https://example.sk/). Pri adrese s cestou lomku na koniec nepridáva. Ako sa adresa skladá, rozoberáme v samostatnom článku o URL.
Ešte pred prvým bajtom do siete sa pozrie do zoznamu HSTS. Ak web v minulosti poslal hlavičku Strict-Transport-Security alebo je na zozname, ktorý prehliadače dostávajú vopred (tzv. preload), prehliadač sa k nemu vôbec nepokúsi pripojiť nešifrovane. Z http:// urobí https:// sám, bez presmerovania zo servera.
2. DNS: z mena sa stane číslo
Počítače sa v sieti hľadajú podľa IP adries, nie podľa mien. Prehliadač sa teda opýta: aká adresa patrí k worldwideweb.sk? Najprv skúsi vlastnú pamäť, potom operačný systém a až potom DNS resolver – u poskytovateľa internetu alebo verejný. Ten v prípade potreby prejde od koreňových serverov cez register domény .sk až k menným serverom konkrétnej domény. Podrobne to opisujeme v článku Ako funguje DNS.
Z vlastnej skúsenosti: keď stránka dlho „premýšľa“ a ešte sa nič nezačalo načítavať, býva vinníkom práve DNS alebo pomalé pripojenie, nie samotný web.
3. TCP: podanie ruky
S IP adresou v ruke otvorí prehliadač spojenie. Pri klasickom HTTP/1.1 a HTTP/2 je to protokol TCP, ktorý začína trojitým podaním ruky: klient pošle SYN, server odpovie SYN-ACK a klient potvrdí ACK. Až potom sa môžu posielať dáta. Celé to stojí jednu cestu tam a späť – a ak je server na inom kontinente, je to citeľných niekoľko desiatok milisekúnd. TCP dnes popisuje RFC 9293.
Pri HTTP/3 sa namiesto TCP použije protokol QUIC nad UDP. Ten spája nadviazanie spojenia a šifrovanie do jedného kroku, takže ušetrí jednu výmenu. Prehliadač sa o podpore HTTP/3 zvyčajne dozvie až z odpovede servera, preto prvá návšteva často beží ešte cez TCP.
4. TLS: dohoda o šifrovaní
Pri adrese s https:// nasleduje TLS. Prehliadač a server sa dohodnú na šifrách, server predloží certifikát a prehliadač overí, či patrí k doméne a či ho podpísala dôveryhodná certifikačná autorita. Pri TLS 1.3 na to stačí jedna výmena tam a späť (staršie TLS 1.2 potrebovalo dve). Ak ste na webe boli nedávno, dá sa spojenie obnoviť ešte rýchlejšie. Zámok v paneli adresy znamená práve toto: spojenie je šifrované a druhá strana dokázala, že je držiteľom domény. Nič viac – o poctivosti webu nehovorí.
5. HTTP: konečne otázka a odpoveď
Teraz prehliadač pošle požiadavku, napríklad GET / HTTP/1.1 s hlavičkou Host: worldwideweb.sk, informáciou o jazyku, podporovanej kompresii a uloženými cookies. Server odpovie stavovým kódom (najčastejšie 200 OK), hlavičkami a telom – v tomto prípade HTML dokumentom. Ak server odpovie 301 alebo 302, prehliadač dostane novú adresu a časť krokov zopakuje. Preto má zmysel odkazovať priamo na konečnú adresu a nehromadiť presmerovania.
Na tomto mieste často vzniká najväčšie čakanie, ktoré už nie je vina siete: server musí stránku poskladať. Pri WordPresse to znamená spustiť PHP, opýtať sa databázy a vyrobiť HTML. Preto weby používajú cache stránok – hotové HTML sa pošle okamžite.
6. Z textu sa stane strom
Prehliadač nečaká na celý dokument. HTML spracúva priebežne, ako prichádza, a skladá z neho DOM – stromovú štruktúru prvkov. Popri tom objavuje ďalšie zdroje: štýly, skripty, obrázky, písma. Na každý z nich musí poslať ďalšiu požiadavku, často na tú istú, už otvorené spojenie, niekedy na úplne inú doménu (a tam sa DNS, TCP a TLS opakujú).
Zo štýlov vzniká CSSOM. Kým ho prehliadač nemá, obsah nevykreslí – inak by stránka „preskakovala“ zo surovej podoby do naštylovanej. Skripty bez atribútov defer alebo async navyše zastavia spracovanie HTML, kým sa nestiahnu a nevykonajú. Toto je najčastejší dôvod, prečo je biela obrazovka dlhšia, než by musela.
Zaujímavý detail: TCP na začiatku spojenia neposiela neobmedzene. Začína s malým oknom, ktoré podľa RFC 6928 predstavuje desať segmentov, teda približne 14 kB. MDN preto odporúča, aby sa to najdôležitejšie na zobrazenie prvej obrazovky zmestilo práve do tejto prvej dávky.
7. Rozloženie, vykreslenie, zloženie
Z DOM a CSSOM vznikne strom vykresľovania – len prvky, ktoré budú naozaj vidieť. Nasleduje layout (výpočet, kde presne bude ktorý prvok a aký bude veľký), paint (vyplnenie pixelov) a composite (poskladanie vrstiev v správnom poradí, často s pomocou grafickej karty). Ak sa niečo zmení – dobehne obrázok bez zadaných rozmerov alebo neskoro načítané písmo –, časť tejto práce sa opakuje. Používateľ to vidí ako poskakovanie textu; Google to meria ukazovateľom CLS.
Kde sa dá ušetriť
- Cache. Pri druhej návšteve môže prehliadač preskočiť DNS (má ho v pamäti), znovu použiť spojenie a vziať štýly či obrázky z disku. Preto je prvá návšteva vždy najpomalšia.
- Menej domén. Každá cudzia doména (písma, analytika, reklama) znamená ďalšie DNS, TCP a TLS. Pri našich weboch sme pre túto úvahu stiahli písma na vlastný server.
- Rozmery obrázkov. Atribúty
widthaheightumožnia vyhradiť miesto skôr, než obrázok príde. - Skripty s
defer. HTML sa spracuje bez prerušenia.
Ak si chcete reťaz pozrieť na vlastné oči, otvorte v prehliadači nástroje pre vývojárov (F12), záložku Network a obnovte stránku. Pri každej požiadavke uvidíte rozpis: čakanie na DNS, pripojenie, TLS, čakanie na prvý bajt a sťahovanie. Po pár pokusoch začnete pomalé weby „čítať“ – a zistíte, že problém málokedy býva tam, kde by ste ho tipovali.
