Web Developmentpokročilý

Čo je Caching?

Caching je technika ukladania kópií dát alebo zdrojov na miesto, odkiaľ sa dajú rýchlejšie získať pri opakovanom prístupe. Na webe sa cachujú HTML stránky, obrázky, skripty a API odpovede na úrovni prehliadača, CDN alebo servera. Výrazne znižuje dobu načítania a zaťaženie servera.

Definícia Caching

Čo je caching

Caching (po slovensky ukladanie do vyrovnávacej pamäte) je fundamentálna technika informatiky, pri ktorej sa výsledky náročných operácií uložia pre opakované použitie. Na webe caching znamená, že prehliadač si pri prvej návšteve uloží zdroje (obrázky, CSS, JavaScript, fonty) a pri opakovanej návšteve ich načíta z lokálneho úložiska namiesto opätovného sťahovania zo servera.

Úrovne cachovania na webe

  • Browser cache — prehliadač ukladá zdroje na disk podľa HTTP hlavičiek Cache-Control a ETag
  • CDN cacheCDN servery cachujú obsah blízko k používateľom po celom svete
  • Server cache — aplikačný server cachuje výsledky databázových dotazov alebo vyrenderované stránky
  • Service Worker cache — Cache API umožňuje programatické riadenie cachovania

Cache-Control hlavička

HTTP hlavička Cache-Control je primárny mechanizmus riadenia cachovania:

  • max-age=31536000 — zdroj je platný 1 rok (pre statické assets s hashom v názve)
  • no-cache — prehliadač musí overiť platnosť u servera pred použitím
  • no-store — zdroj sa nesmie cachovať (pre citlivé dáta)
  • stale-while-revalidate — použije starú verziu kým na pozadí sťahuje novú

Praktický príklad

Príklad: Firemný web má JavaScript bundle main.abc123.js (hash v názve) a HTML stránku index.html.

Pre JavaScript sa nastaví Cache-Control: public, max-age=31536000, immutable — prehliadač ho cachuje na 1 rok. Pri zmene kódu sa vygeneruje nový hash (main.def456.js) a prehliadač stiahne novú verziu.

Pre HTML sa nastaví Cache-Control: no-cache — prehliadač vždy overí u servera, či má aktuálnu verziu. Ak server odpovie 304 Not Modified, použije cachenovanú verziu. Výsledok: opakovaná návšteva sa načíta za 200 ms namiesto 2 sekúnd.

Často kladené otázky

Čo je caching na webe?

Caching je ukladanie kópií webových zdrojov (obrázkov, skriptov, stránok) pre rýchlejší prístup pri opakovanej návšteve. Zdroje sa nemusia znovu sťahovať zo servera, čo výrazne zrýchľuje načítanie stránky.

Ako vymazať cache prehliadača?

V prehliadači stlačte Ctrl+Shift+Delete (Cmd+Shift+Delete na Macu) a vyberte „Cached images and files". Pre vývojárov: v DevTools je možné zaškrtnúť „Disable cache" na záložke Network.

Čo je rozdiel medzi no-cache a no-store?

no-cache neznamená „necachuj" — prehliadač zdroj cachuje, ale pred každým použitím overí u servera, či je stále aktuálny. no-store zakazuje akékoľvek cachovanie a zdroj sa vždy sťahuje nanovo.

Ako cachuj statické assets najefektívnejšie?

Použite fingerprinting — vložte hash obsahu do názvu súboru (napr. main.abc123.js) a nastavte Cache-Control: max-age=31536000, immutable. Pri zmene obsahu sa zmení hash a prehliadač automaticky stiahne novú verziu.

Súvisiace pojmy

Service Worker

Service Worker je JavaScript skript, ktorý beží na pozadí prehliadača nezávisle od webovej stránky. Funguje ako proxy medzi prehliadačom a sieťou — dokáže zachytávať sieťové požiadavky, cachovať zdroje a umožniť offline fungovanie webu. Je kľúčovou technológiou pre Progressive Web Apps (PWA).

Kompresia

Kompresia je proces zmenšenia veľkosti dát pomocou kompresných algoritmov pred ich odoslaním z webového servera do prehliadača. Prehliadač prijaté dáta dekomprimuje a zobrazí. Na webe sa najčastejšie používajú algoritmy Gzip a Brotli, ktoré dokážu zmenšiť textové súbory o 60-90 %.

Preloading

Preloading je technika, ktorá prehliadaču nariaďuje čo najskôr stiahnuť dôležitý zdroj (font, obrázok, skript), ešte pred tým, než ho parsér HTML prirodzene objaví. Používa sa element <link rel="preload"> v hlavičke stránky. Zrýchľuje vykreslenie kritických zdrojov.

Prefetching

Prefetching je technika, ktorá prehliadaču naznačuje, aby na pozadí stiahol zdroje, ktoré bude používateľ pravdepodobne potrebovať v budúcnosti — typicky na ďalšej stránke. Má nízku prioritu a nezdržiava načítanie aktuálnej stránky. Používa sa element <link rel="prefetch">.

Gzip

Gzip je najrozšírenejší kompresný algoritmus na webe, ktorý zmenšuje veľkosť textových súborov o 60-80 %. Bol vytvorený v roku 1992 a je podporovaný prakticky všetkými webovými servermi a prehliadačmi. Na webe sa používa na kompresiu HTML, CSS, JavaScript a JSON súborov.

Potrebujete pomôcť s webom?

Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.