Zrýchlite si Váš web

HTTP Cache sa stáva v súčasnosti veľmi dôležitým nástrojom pre zrýchlenie načítania webu. Dá sa využiť pri veľkých ale aj malých návštevnostiach.

Google už dávnejšie upozornil, že pri výsledkoch vyhľadávania bude uprednostňovať webové stránky, ktoré sa načítavajú rýchlejšie. Nejde však len o Google, aj my ľudia máme radi, ak sa web načíta rýchlejšie. Znamená to, že za ten istý čas prečítame alebo prezrieme viac obsahu na stránke. Rýchlejšie načítanie webu sa dá dosiahnuť viacerými metódami, v tomto článku si vysvetlíme práve HTTP Cache.

Cache (vo všeobecnosti dočasná pamäť zariadenia, ďalej len Cache, niekedy sa hovorí aj o Frontend Cache) môžeme využívať buď na klientskom prehliadači alebo na serveri. Obe majú svoje výhody aj nevýhody. Skôr ako začnem vysvetľovať rozdiely, je potrebné sa zamerať na tzv. HTTP hlavičky, ktoré ovplyvňujú Cache na oboch stranách.

HTTP hlavičky ovplyvňujúce Cache

Každý internetový prehliadač má možnosť si u seba ukladať informácie na nejakú dobu a v prípade potreby ich vie zobraziť priamo z lokálneho počítača a nemusí si tak sťahovať dáta znova zo servera. Obyčajne ide o obsah, ktorý sa mení len veľmi málo, ako sú napríklad obrázky, JavaScripty, CSS. Hovoríme im tiež že sú to statické súbory. Web serveri zvyknú byť nastavené tak, že tieto statické súbory sa automaticky ukladajú do pamäte prehliadača pri prvej návšteve a ostávajú tam uložené minimálne 7 dní, čo je aj minimálne odporúčanie Google. Hlavičky, ktorými vieme ovplyvniť Cache prehliadača:

Cache-Control

Pomocou tejto HTTP hlavičky vieme ovplyvniť, či sa má obsah ukladať pre ďalšie použitie alebo nie. Zároveň vieme prehliadaču povedať, že na akú dobu budeme dáta ukladať.

Nechceme nikdy ukladať žiadne dáta:

Ak chceme mať istotu, že do prehliadača prídu vždy čerstvé údaje, je potrebné nastaviť hlavičku nasledovne:

Cache-Control: no-cache

Privátna a verejná cache:

Privátna (private) cache znamená, že sa dáta môžu uložiť v prehliadači užívateľa ale nikde inde. To znamená, že ak je medzi servervom a klientským prehliadačom nejaká serverová Cache alebo CDN, tak na týchto sa obsah nemá ukladať:

Cache-Control: private

Verejná (public) cache sa ukladá v prípade, že ide o obsah, ktorý je spoločný a rovnaký pre všetkých návštevníkov webu. Napríklad logo spoločnosti sa mení veľmi zriedka, preto je dobré ho uložiť nie len v prehliadači ale aj v Cache web servera alebo v CDN:

Cache-Control: public

Expirácia obsahu:

Doteraz sme si vysvetlili ako môžeme prehliadaču povedať, či sa obsah má ukladať v prehliadači, alebo nie. Teraz si povieme, ako nastaviť obdobie počas ktorého bude obsah v Cache prehliadača:

Cache-Control: max-age=31536000

V príklade vyššie povieme prehliadaču, že si môže obsah u seba uložiť po dobu 31536000 sekúnd, čo je jeden rok.

Validácia obsahu:

Kontrola validity (platnosti) obsahu sa spustí, keď používateľ stlačí tlačidlo na opätovné načítanie webu. Spúšťa sa aj pri normálnom prehliadaní, hlavičky musia obsahovať:

Cache-Control: must-revalidate

ETag

Hlavička odpovede ETag je hodnota, ktorá sa môže použiť ako silný validátor. Obyčajne je vytvorená niektorým hash-ovacím mechanizmom z obsahu súboru. Akonáhle dôjde k akejkoľvek zmene v súbore, hash sa zmení. To znamená, ak hlavička ETag bola súčasťou odpovede zo servera, klient môže v hlavičke budúcich požiadaviek poslať hlavičku If-None-Match na overenie validity obsahu v cache.

Hlavička Last-Modified odpovede môže byť použitá ako slabý validátor. Považuje sa za slabý validátor preto, lebo server aj prehliadač môžu mať rôzne nastavený čas a platnosť aktuálneho stavu je maximálne 1 sekunda, potom sa musí v prehliadači vek obsahu interne prepočítať. Ak odpoveď servera obsahuje hlavičku Last-Modified, klient môže poslať hlavičku If-Modified-Since na overenie dokumentu uloženého v Cache.

Keď sa vykoná žiadosť o overenie, server môže buď ignorovať žiadosť o overenie a odpovedať s normálnou hodnotou 200 OK, alebo môže vrátiť 304 Not Modified (s prázdnym obsahom), aby inštruoval prehliadač, aby použil svoju kópiu v Cache. Odpoveď 304 môže obsahovať aj hlavičky, ktoré aktualizujú čas vypršania platnosti dokumentu v pamäti.

Vary

Hlavička Vary určuje, ktoré iné hlavičky sa majú zhodovať pri požiadavke na server s hlavičkami v uloženom obsahu v Cache. V podstate ide o to, že Cache si uloží viacero variant podľa toho, o aké konkrétne zariadenie ide. Najčastejšie sa stretneme s takýmto nastavením hlavičky:

Vary: Accept-Encoding

Táto hlavička sa používa vtedy, keď je obsah možné poslať do prehliadača komprimovaný, napríklad pomocou gzip. Keďže niektoré prehliadače nepodporujú žiadnu kompresiu alebo používajú rôzne metódy kompresie, mohlo by sa stať, že by sa do prehliadača poslal obsah, s ktorým si prehliadač nevie rady. Preto je potrebné udržať si v Cache všetky verzie kompresie. Toto sa týka hlavne serverových riešení. Prehliadač si bude pamätať len jednu verziu, tú, ktorú dokáže spracovať.

HTTP Cache v prehliadači

Tento spôsob ukladania obsahu do Cache je najpoužívanejší, robí to každý súčasný prehliadač a nemusíme pre funkčnosť obyčajne robiť žiadne zmeny. Každá webhostingová spoločnosť má vo svojich webhostingových programoch možnosť Cache obsahu na strane klienta štandardne zapnutú. Tieto štandardné nastavenia je možné zmeniť obyčajne pomocou .htaccess súboru takto:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|otf|ttf|woff|woff2|svg|css|js)$">
 Header set Cache-Control "public, max-age=604800"
</FilesMatch>

Príklad vyššie znamená, že všetky statické súbory je možné udržiavať v Cache na všetkých možných úrovniach (server, proxy, CDN, prehliadač,...) po dobu 7 dní.

VÝHODY: Veľmi jednoduchá implementácia, štandardne aktávna bežnom webhostingu.

NEVÝHODY: Udržiavať v Cache je možné aj obsah, ktorý nie je statický. Ide napríklad o obrázky generované pomocou knižnice GD v PHP jazyku. Tieto obrázky sa uložia na nejakú dobu v klientovom prehliadači, ale pri generovaní obsahu pre iné prehliadače, sa musí požiadavka na serveri vykonať znova. Riešením je server Cache, ktorú vysvetlím nižšie.

HTTP Cache na serveri

S možnosťou udržiavať obsah v Cache na serveri sa stretávame zriekavejšie. Už len samotný fakt využívania Cache na strane servera si vyžaduje zvýšené znalosti o fungovaní Cache. My v HostCreators máme bohaté skúsenosti so server Cache, môžete si o veľmi úspešnej implementácii prečítať v článku o tom, ako sme dokázali ustáť obrovskú návštevnosť na leteckých dňoch SIAF. V spomínanom článku sme využili na Cache tzv. Varnish, ktorý bol v čase implementácie najlepšie možné riešenie. Avšak nastavenie si vyžadovalo naozaj bohaté skúsenosti s programovacími jazykmi.

Okrem Varnish existujú aj jednoduchšie a dostupnejšie spôsoby priamo pomocou webových serverov Nginx alebo Apache. Pre našich užívateľov ponúkame vo verzii profi webhostingu jednoduché a intuitívne užívateľské prostredie pre aktivovanie a vyčistenie Cache na strane servera. Viac sa dočítate v návode, kde je popísaný podrobný manuál a ďalšie možnosti nastavovania.

VÝHODY: Hlavnou výhodou je to, že je možné uložiť do pamäte obsah, ktorý je náročný na výkon, napríklad úvodná stránka, alebo iná stránka, ktorá je často navštevovaná. Do cache môžeme ukladať aj statický obsah, pokiaľ máme úložisko Cache na SSD diskoch alebo v operačnej pamäti, čo výrazne zvýši rýchlosť načítavania.

NEVÝHODY: Pri zlom nastavení hlavičiek je možné, že sa do Cache uloží niečo, čo sa nemá uložiť. Napríklad ak ide o e-shop a v hlavičke stránky je zobrazená ikonka s množstvom produktov v košíku, je nežiadäce aby sa táto stránka uložila do Cache a odoslala užívateľovi, ktorý nemá v košíku nič.

Potrebujete pomoc?

Ak máte aj vy projekt, ktorý už výkonnostne melie z posledného a neviete ako ďalej, neváhajte a kontaktujte nás akýmkoľvek spôsobom. Radi sa na Váš projekt pozrieme a poradíme Vám bezplatne ako zvýšiť rýchlosť načítania stránok aj pri veľkých návštevnostiach.