Front-end

Cache-Control – jak działa ustawianie czasu buforowania pobieranych danych

Cache-Control to nagłówek HTTP, który pozwala na kontrolowanie buforowania danych przez przeglądarki internetowe. Jest to szczególnie ważne przy tworzeniu stron internetowych, ponieważ pozwala na zwiększenie szybkości ładowania strony poprzez przechowywanie części danych na komputerze użytkownika.

Tomasz Kozon - CEO Boring Owl

Tomasz Kozon

CEO

12 maj 2022

Wczytywanie strony a Cache-Control

Wczytywanie się danej witryny internetowej określane jest jako buforowanie. Kiedy użytkownik odwiedza stronę po raz pierwszy, wówczas wszystkie jej elementy są pobierane i tworzy się kopia pewnej części plików w pamięci urządzenia. Dzięki temu przy kolejnej próbie otwarcia tej samej strony uruchamia się ona szybciej, ponieważ w pamięci podręcznej wciąż są dostępne załadowane wcześniej elementy, co usprawnia proces ładowania witryny. Przy korzystaniu z sieci CDN zasada jest podobna.

Cache-Control pozwala administratorowi na optymalizację strony. Daje możliwość precyzyjnego zarządzania parametrami buforowania poszczególnych zasobów danego serwisu. Dzięki temu odciążane są: łącze klienta, serwer plików oraz HTTP i wpływa na szybsze wczytanie podstron. Ważne, aby robić to umiejętnie.

Nagłówek Cache-Control jest elementem nierozerwalnie związanym z buforowaniem strony. Można go samodzielnie skonfigurować i w ten sposób wskazać sieci CDN oraz przeglądarce, w jaki sposób powinny buforować zawartość w postaci obrazów, treści, fontów czy plików XML, JS oraz JSON.

 

Powiązane case studies

Czas buforowania

W przypadku Cache-Control kluczowym elementem jego konfiguracji jest czas, w którym dany element będzie obecny w pamięci podręcznej. Parametr Time to Live (TTL), określa maksymalny wiek zasobów, jaki mogą osiągnąć w pamięci podręcznej. Po tym czasie zostaną unieważnione i usunięte, a co za tym idzie, będzie trzeba je pobrać na nowo.

 

Ustawienie długiego czasu buforowania sprawdza się w przypadku zasobów niezmiennych na danej stronie. Dla pozostałych warto go ograniczyć, w przeciwnym razie stare przeglądarka będzie wczytywała stare zasoby, które generują opóźnienia.

Czas ładowania strony

Powiązane usługi

Web development

Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.

SEO / GEO

Pomagamy zwiększać widoczność stron w Google i w odpowiedziach generowanych przez AI. Łączymy techniczne SEO, optymalizację treści i pracę nad strukturą serwisu. Zaczynamy od audytu, a najważniejsze zalecenia przekładamy na konkretne wdrożenia w kodzie.

Ustawienia Cache-Control

Cache-Control można ustawić na kilka sposobów. Wariant publik pozwala na buforowanie elementów strony dosłownie każdemu. No-cache służy wymuszeniu na użytkownikach ponownej weryfikacji, a ma na celu wymuszenie na przeglądarce sprawdzenia dostępności aktualizacji. Opcja private kierowana jest do danych poufnych, które mogą być buforowane jedynie lokalnie, z wyłączeniem CDN oraz proxy. Natomiast no-store wyłącza buforowanie w ogóle i jest przeznaczone dla tzw. danych wrażliwych.

 

Większość firm hostingowych odpowiednio formatuje nagłówek Cache-Control za swoich klientów. Administrator strony może samodzielnie zmienić ustawiania czasu buforowania pobieranych danych dzięki nagłówkom Cache-Control. W internecie nie brakuje przykładów komend, którymi można się posłużyć. Do przydatnych komend można zaliczyć: no-transform, max-age = , czy FilesMatch.

 

Należy jednak robić to umiejętnie, żeby nie zaszkodzić witrynie poprzez zmniejszenie przepustowości i zwiększenie czasu ładowania, będące wynikiem wczytywania starszych, mniej istotnych dla użytkownika treści. Wszelkie generowane w ten sposób opóźnienia wpłyną na negatywne odczucia i zniechęcą do odwiedzania strony. Cache-Control to ważny element w UX.

FAQ

FAQ – Cache-Control

  • Cache-Control to nagłówek HTTP sterujący cache'owaniem zasobów: mówi przeglądarce i CDN-owi, jak długo zasób jest świeży, kiedy trzeba go pobrać ponownie i kto może go przechowywać. Najważniejsze dyrektywy: max-age (czas świeżości w sekundach), s-maxage (odpowiednik dla cache współdzielonych, np. CDN), no-cache (przed użyciem zweryfikuj z serwerem), no-store (nie zapisuj wcale), public/private (czy CDN może przechowywać) i immutable (zasób nigdy się nie zmienia). To fundament wydajności webu.

  • max-age=31536000, immutable — dla statycznych zasobów z hashem w nazwie (main.abc123.css): przeglądarka trzyma je rok i nigdy nie pyta. max-age=3600 — typowe dla odpowiedzi API cache'owanych godzinę. no-store — dla danych wrażliwych: transakcji bankowych, danych osobowych. no-cache — dla stron HTML, które zawsze warto zweryfikować z serwerem. private — dla treści per użytkownik, których CDN nie powinien współdzielić.

  • Expires to nagłówek z czasów HTTP/1.0 podający bezwzględną datę wygaśnięcia — problematyczny, bo rozjechany zegar psuje cache. Cache-Control (HTTP/1.1) używa czasu względnego (max-age=3600 — godzina od teraz) i ma znacznie bogatszy zestaw dyrektyw, w tym no-store, immutable czy stale-while-revalidate. Gdy oba nagłówki są obecne, wygrywa Cache-Control. Współczesna praktyka: używać wyłącznie Cache-Control, Expires traktować jako zaszłość.

  • Dyrektywa stale-while-revalidate=N pozwala serwować przeterminowaną wersję zasobu, podczas gdy nowa pobiera się w tle. Przykład: max-age=3600, stale-while-revalidate=86400 — zasób świeży przez godzinę, a przez kolejną dobę może być podany „stary", z cichym odświeżeniem. Efekt: zero opóźnienia dla użytkownika i ostateczna spójność treści. Typowe zastosowania to serwisy informacyjne, blogi i strony kategorii e-commerce; pokrewna dyrektywa stale-if-error podaje starą wersję, gdy serwer źródłowy zawiedzie.

  • Cloudflare respektuje nagłówki automatycznie, a Workers pozwalają modyfikować zachowanie cache na edge'u. AWS CloudFront łączy Cache-Control z własnymi ustawieniami minimalnego i maksymalnego TTL. Vercel spina to z mechanizmami Next.js — nagłówkami w API routes i ISR. Netlify i Fastly dają programowalną kontrolę na brzegu sieci. Uniwersalna praktyka: agresywny cache dla zasobów statycznych (rok), krótki dla treści dynamicznych (minuty) i stale-while-revalidate tam, gdzie liczy się i szybkość, i świeżość.

Blog

Powiązane artykuły

Czytaj więcej
Front-end

Jam Stack – przełom czy dobrze znana technologia?

Jam Stack to technologia, która polega na budowaniu aplikacji internetowych za pomocą statycznie generowanych stron, które są hostowane na serwerach CDN. Jest coraz bardziej popularny wśród programistów, ponieważ oferuje wiele korzyści, takich jak szybkość, niskie koszty utrzymania i bezpieczeństwo.

Tomasz Kozon
17 lut 2022
Front-end

Centra - headless e-commerce dla marek premium i globalnych

Centra to szwedzka platforma headless e-commerce dla marek modowych i lifestyle'owych, które sprzedają na wielu rynkach i jednocześnie prowadzą hurt. Na przykładzie marki, która przerosła swój sklep, pokazujemy, co Centra załatwia, czego nie zrobi za firmę i kiedy lepiej wybrać Shopify Plus lub platformę open source.

Tomasz Kozon
07 paź 2026
Front-end

Lynx - nowa alternatywa dla React Native?

Lynx to otwartoźródłowy framework od ByteDance, na którym działają fragmenty TikToka. Wyjaśniamy, czym różni się od React Native, dlaczego jest silnikiem do osadzania, a nie gotowym zestawem do budowy aplikacji, i w jakich trzech sytuacjach ma sens, a w jakich nie.

Tomasz Kozon
24 wrz 2026