Technológie
HTTP/2 už na všetkých serveroch

HTTP/2 už na všetkých serveroch

HTTP/2 prináša nové možnosti ako zrýchliť načítanie web stránky v prehliadačoch a to bez komplikovaných kompilácií a deployovaní na web serveri. V priemere ide až o 30% zrýchlenie bežného webu.

Trochu histórie

Protokol na prenos webu HTTP 1.1, ako ho poznáme ešte stále aj dnes, bol uvedený do života v roku 1997. Pochopiteľne, v dnešnej dobe už tvorcovia webu narážali na mnohé výkonnostné problémy, preto sa iniciatívy ujal Google a vymysleli tzv. SPDY protokol. Toto naštartovalo proces štandardizácie, pretože asi neexistoval na svete vývojár, ktorý by toto zrýchlenie nechcel. Preto sa konzorcium IETF rozhodlo na základe SPDY protokolu uviesť do života HTTP/2.0. Toto sa udialo v máji 2015. Už koncom roka 2015 mala väčšina najpoužívanejších prehliadačov zabudovanú podporu na HTTP/2.0. Takže ubehlo, "iba" 18 rokov, waauuuuuu

Aká je podpora?

Všetky naše webové serveri už majú zavedenú podporu pre HTTP/2.0 cez TLS ale aj bez šifrovanej komunikácie. Webové prehliadače ale podporujú iba šifrovanú komunikáciu pomocou TLS, čiže cez HTTPS. Toto ale už v dnešnej dobe nie je žiaden problém, pretože aj u nás si už môžete vygenerovať certifikát Lets Encrypt úplne zadarmo.

Aký je rozdiel medzi HTTP/1.1 a HTTP/2.0?

Tu je zoznam hlavných zmien, ktoré ocení každý z nás, viac si o nich povieme nižšie:

  • Multiplexing
  • Server push
  • Kompresia hlavičiek

Multiplexing

V HTTP/1.1 bola každá požiadavka na nejaký zdroj na webe vybavená samostatným requestom na server. To znamená, že ak sme mali na webe 10 obrázkov, tak sa pre tieto obrázky vykonalo 10 samostatných requestov. Keďže má každý prehliadač nastavený limit na počet súčasne vykonávaných požiadaviek na jednu doménu, stávalo sa, že sa začali niektoré obrázky načítavať až keď sa vybavili predchádzajúce požiadavky. Názorne tento proces vysvetluje nasledujúci obrázok:

Praktická ukážka

Pripravili sme pre vás ukážku, v ktorej vidno, aký veľký rozdiel je v načítaní toho istého obsahu pomocou HTTP/2.0 a HTTP/1.1. V príklade sa načítava 400 obrázkov, každý o veľkosti 1,4 KB. Obrázky sú síce rovnaké, ale každý má unikátnu URL adresu, takže sa tým obíde cache prehliadača. Poďme na to:

Server push

Veľmi zaujímavá a užitočná vlastnosť HTTP/2.0. Určite sa Vám už stalo, že ste mali nejaké tlačítko, ktoré malo obrázkové pozadie a pri prechode myši ponad tlačítko sa toto pozadie zmenilo na iný obrázok. Avšak kým nebol obrázok stiahnutý v prehliadači, vzniklo pri prechode isté nepríjemné prebliknutie počas doby načítavania nového obrázka. Pomocou Server push si môžete tento obrázok poslať do prehliadača ešte pred tým, ako bude reálne použitý.

Kompresia hlavičiek

Kompresia obsahu (css, js, html,...) sa používala už dávno. V HTTP odpovedi zo servera sa ale vždy nachádzajú aj tzv. hlavičky, ktoré ale doteraz neboli komprimované. V HTTP/2.0 sa už aj hlavičky komprimujú, čo predstavuje ďalšie zrýchlenie načítania webu.

Čo už nemusíme robiť v HTTP2?

Keďže HTTP/1.1 malo už spomínané obmedzenia, vývojári robili isté opatrenia pre zrýchlenie načítania webu, ktoré už v dobe HTTP2 nie sú potrebné.

Spájanie súborov dokopy

Web developeri často spájali dokopy viacero CSS, JS súborov do jedného väčšieho súboru, alebo obrázkov do tzv. sprite súborov. Toto spôsobilo redukciu HTTP requestov na minimum. Problém ale nastal v tom, že ak sa zmenil napríklad iba čiastkový CSS súbor, museli programátori pregenerovať celý CSS súbor, kde bol čiastkový súbor použitý. Takže ak sa zmenil čo i len jeden riadok súboru, užívateľov prehliadač si musel stiahnuť všetky CSS deklarácie.

V HTTP2 sa už nevytvára nová požiadavka na server, preto už technika spájania súborov nie je potrebná. Skôr je dobré zamerať sa na využitie cache (dočasnej pamäte) prehliadača a deliť CSS a JavaScripty na čiastkové súbory podľa predpokladanej frekvencie zmien v budúcnosti.

Ďalším problémom spájania zdrojov do jedného celku je v tom, že nie každá podstránka vyžadovala všetky CSS a JavaScript deklarácie, avšak ak sa všetko spojilo do jedného súboru, muselo sa všetko načítať už na úvodnej stránke.

Inlinové umiestnenie zdrojov

Často developeri používali namiesto načítania externých CSS, JS alebo obrázkov, tzv. inlinové vloženie, to znamená, že CSS, JS sa vložilo priamo do HTML a obrázky sa vložili pomocou base64 kódovania takto:

<img src="data:image/png;base64,Rw0KGgoAAAANSUhEUgAAAEAABA...">

Tak isto ako pri spomínanom spájaní CSS a JS do väčších celkov, problém nastáva v tom, že ak sa zmení obsah html, načíta sa obrázok znova, ikeď sa vôbec nezmenil. Možnosť efektívne využívať cache prehliadača sa tak úplne stráca.

Ak nevyhnutne vyžadujeme, aby pri vykresľovaní stránky už bol prítomný v prehliadači nejaký CSS súbor alebo obrázok, môžeme tak urobiť pomocou server push technológie HTTP2.

Trieštenie obsahu na niekoľko subdomén

Prehliadače majú štandardne nastavený limit na počet súčasných požiadaviek na jednu doménu. Preto ak máte na stránke 100 obrázkov, a načítavate ich stále z tej istej domény, tak prehliadač začne sťahovať napríklad prvých 20 obrázkov, ďalších 20 obrázkov začne sťahovať až keď sú stiahnuté všetky predchádzajúce obrázky. Tak sa predĺžilo zobrazovanie stránky. V HTTP/1.1 sa tento nedostatok obchádzal tak, že sa obrázky nesťahovali iba z jednej domény, ale vytvorili sa subdomény napríklad v takomto tvare:

  • static0.hostcreators.sk
  • static1.hostcreators.sk
  • static2.hostcreators.sk
  • ...
  • static9.hostcreators.sk

Tak sa dosiahlo, že všetky obrázky sa začali sťahovať súčasne. To ale vyžadovalo zvýšené požiadavky na nastavenie servera ale aj samotnej aplikácie. Muselo sa dodržať to, aby bol ten istý obrázok vždy sťahovaný z rovnakej subdomény, aby sa nestalo to, že sa obrázok uloží v prehliadači viackrát z rôznych subdomén, ikeď ide o ten istý súbor.

V HTTP/2.0 nás tento problém nemusí trápiť, lebo z princípu multiplexingu sa vždy vytvorí iba jedno pripojenie na server a vrámci neho sa prenesú všetky potrebné súbory a to súčasne.

Ktoré praktiky z HTTP/1.1 sú stále dobré?

Protokol HTTP/2.0 nevyriešil všetky problémy, s ktorými sa potýka web developer. Preto sú niektoré techniky alebo zaužívané praktiky stále vhodné aj v dobe HTTP/2.0:

Minimalizujte DNS požiadavky

HTTP/2.0 mení spôsob komunikácie medzi prehliadačom a web serverom, ako získa prehliadač IP adresu web servera z doménového názvu, zabezpečuje tzv. DNS služba (domain name system). Tento proces ostáva nezmenený, preto je dôležité minimalizovať požiadavky na DNS server.

Používanie CDN

CDN slúžia na distribúciu obsahu webu na rôzne geologicky rozmiestnené miesta po svete. Napríklad ak potrebujete obrázok zobraziť v prehliadači v New Yourku, tak je lepšie, keď sa obrázok začne sťahovať zo servera v New Yourku a nie z Bratislavy. Presne toto zabezpečujú CDN služby.

Využívanie CACHE prehliadača

Ak si prehliadač stiahne napríklad obrázok alebo CSS, JS súbor a my prehliadaču povieme, že si ho môže u seba uschovať po dobu 7 dní (cache prehliadača), tak pri budúcej návšteve už obrázok nebude sťahovať.

Minimalizovanie veľkosti odpovedí zo servera

Vždy sa snažte minimalizovať veľkosť dát, ktoré sa prenášajú do prehliadača. Minifikujte preto HTML, CSS, JavaScript, optimalizujte obrázky pre web a používajte kompresiu obsahu napríklad pomocou gzip.

Vyvarujte sa zbytočným presmerovaniam

HTTP presmerovanie 301 a 302 je pri prechode na nový web nevyhnutné. V opačnom prípade je potrebné tieto presmerovania minimalizovať a už vôbec nepoužívať niekoľko násobné zreťazené presmerovania.