
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.
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


Wynajem magazynu w minuty zamiast dni - automatyzacja umów i płatności
Klient: Balticon S.A.
Branża: Logistyka / LogTech

Dr Marcus - strona internetowa z katalogiem produktów
Klient: Dr Marcus
Branża: Motoryzacja / Mobility
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.

Powiązane usługi
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ć) iimmutable(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 tymno-store,immutableczystale-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=Npozwala 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 dyrektywastale-if-errorpodaje 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
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.
Gamifikacja w e-learningu - sposoby na większe zaangażowanie użytkowników
Gamifikacja w e-learningu działa, ale słabiej, niż obiecują prezentacje, i potrafi zaszkodzić. Zamiast listy mechanik pokazujemy pięć potrzeb uczącego się, z których każda wymaga innych narzędzi, oraz to, jak sprawdzić, czy punkty i odznaki naprawdę coś zmieniają.
Microlearning w aplikacjach mobilnych - jak stworzyć produkt, który angażuje użytkowników
Microlearning w aplikacjach mobilnych to nauka w porcjach na kilka minut, ale sama krótkość niczego nie załatwia. Rozkładamy jedną sesję na części, wyjaśniamy, jak działają powtórki, skąd brać treści, co musi stać pod spodem i po czym poznać, że użytkownicy naprawdę się uczą.
Crystallize jako headless commerce - kiedy warto go wybrać?
Crystallize to norweska platforma headless commerce, która łączy zarządzanie danymi produktowymi, treści i sprzedaż w jednym systemie. Pokazujemy cztery sygnały, że pasuje do Twojej firmy, trzy sytuacje, w których lepiej wybrać coś innego, i jak policzyć jej koszt, zanim przyjdzie pierwszy rachunek za użycie.
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.
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.






