Pamięć podręczna strony internetowej, znana także jako cache, to miejsce, w którym przeglądarka, hosting albo sieć CDN przechowuje kopię pobranych już zasobów: obrazów, arkuszy CSS, skryptów JavaScript i dokumentów HTML. Przy kolejnej wizycie część plików nie musi wędrować przez internet, więc podstrona wyświetla się szybciej. Mechanizmem steruje serwer polem Cache-Control w odpowiedzi HTTP, na przykład wartość max-age=31536000 pozwala trzymać element przez rok.
Mechanizm działania pamięci podręcznej
Pamięć podręczna działa tak, że przed wysłaniem żądania Chrome czy Firefox sprawdzają dwa lokalne magazyny: bufor skryptu service worker oraz cache HTTP. Do sieci program sięga dopiero wtedy, gdy w żadnym z nich nie znajdzie potrzebnego pliku. Gdy użytkownik odwiedza stronę internetową, otrzymuje komplet elementów do wyświetlenia, a te z odpowiednią dyrektywą trafiają na dysk, aby przy następnych wejściach:
- Zmniejszyć ilość danych przesyłanych z serwera.
- Przyspieszyć czas ładowania strony.
- Zmniejszyć obciążenie hostingu.
Gdy zapisana kopia się zestarzeje, przeglądarka wysyła token ETag albo datę Last-Modified. Jeśli zawartość jest bez zmian, odpowiedzią jest kod 304 Not Modified bez ponownego przesyłania pliku, a na ekranie pojawia się wersja już posiadana.
Rodzaje pamięci podręcznej
Wyróżniamy cztery rodzaje pamięci podręcznej, a różni je miejsce, w którym leży kopia: urządzenie użytkownika, hosting albo pośrednik w sieci.
- Pamięć podręczna przeglądarki: Dane trzymane na urządzeniu odwiedzającego, które web.dev nazywa też cache HTTP. Obejmuje pliki statyczne takie jak arkusze stylów, skrypty JavaScript oraz grafiki.
- Pamięć podręczna serwera: Gotowe podstrony albo ich fragmenty zapisane po stronie hostingu, dzięki czemu aplikacja nie składa ich od nowa przy każdym żądaniu i krócej czekasz na wynik.
- Pamięć podręczna CDN: Sieci dostarczania treści (Content Delivery Network) trzymają kopie plików na rozproszonych geograficznie maszynach. Według web.dev to pośredni bufor, więc dyrektywa private zabrania mu zapisu.
- Pamięć podręczna proxy: Pośrednik między użytkownikiem a serwerem, na przykład w sieci firmowej, który obsługuje wielu odbiorców jednocześnie. Odpowiedź oznaczoną jako public wolno zachować w dowolnym miejscu tego typu.
Korzyści z używania pamięci podręcznej
Pamięć podręczna daje cztery korzyści: krótszy czas wczytywania, mniej żądań do hostingu, mniejszy transfer i lepsze warunki do osiągnięcia dobrych wyników Core Web Vitals.
- Szybsze ładowanie stron: Plik z cache HTTP, który jeszcze nie wygasł, Chrome bierze automatycznie, bez łączenia się z internetem.
- Zredukowane obciążenie serwera: Aktualna kopia nie wywołuje żądania wcale, a kod 304 nie zawiera ponownie całej treści, co ma znaczenie przy dużym natężeniu ruchu.
- Oszczędność danych: Mniej pobieranych megabajtów to mniejsze zużycie pakietu przy mobilnych połączeniach.
- Poprawa pozycji w Google: Szybkość ładowania to jeden z elementów optymalizacji strony, a Centrum wyszukiwarki pisze, że najważniejsze systemy rankingowe Google starają się nagradzać dobre wyniki tych metryk.
Zarządzanie czasem życia zasobów w pamięci podręcznej
Czasem życia zasobów w pamięci podręcznej zarządzasz trzema narzędziami: polami odpowiedzi HTTP, wersjonowaniem plików i usuwaniem nieaktualnych kopii.
Ustawianie nagłówków HTTP
Okres przechowywania ustalasz polami, takimi jak Cache-Control lub Expires. Zapis Cache-Control: max-age=31536000 to 31 536 000 sekund, czyli rok, i według web.dev jest to maksymalna obsługiwana wartość. Dyrektywa private dopuszcza zachowanie kopii tylko na urządzeniu odwiedzającego, a public w dowolnym buforze. Pominięcie tego pola nie wyłącza cache: Chrome sam zgaduje wtedy termin na podstawie typu treści.
Wersjonowanie plików
Gdy zmieniasz treść lub zasoby na stronie, dodawaj numer wydania do adresu (np. style.css?v=1.2.3) albo skrót zawartości w nazwie (np. main.x234dff.css). Program traktuje wtedy poprawiony arkusz jako nowy element, a poprzedni link może bezpiecznie trzymać kopię przez rok.
Czyszczenie pamięci podręcznej
Nieaktualną kopię użytkownik usuwa w ustawieniach przeglądarki, ale właściciel strony nie powinien na to liczyć. Dla zasobów, które mają być weryfikowane przed każdym użyciem, na przykład dokumentu HTML bez numeru wydania w adresie, web.dev zaleca Cache-Control: no-cache. Taki plik wolno zachować, lecz przy kolejnym wejściu Chrome pyta hosting o jego aktualność, a całkowity zakaz zapisu daje dopiero no-store.
Problemy związane z pamięcią podręczną i ich rozwiązania
Pamięć podręczna sprawia trzy typowe problemy: pokazuje nieaktualne dane, zajmuje miejsce na urządzeniu i może przechować treść przeznaczoną dla jednej osoby.
- Nieaktualne dane: Po aktualizacji strony użytkownik może zobaczyć starszą wersję z bufora. Rozwiązaniem jest numer wydania w adresach plików oraz walidacja przez ETag z kodem 304.
- Zajęcie miejsca na urządzeniu: Duża ilość zapisanych materiałów zajmuje pamięć telefonu albo komputera. Elementy, których nie ma sensu trzymać, oznaczasz no-store i program nie zachowa żadnej ich kopii.
- Problemy z personalizacją: Treści dynamiczne lub spersonalizowane, takie jak koszyk albo panel klienta, mogą wyświetlać się niepoprawnie, gdy cache przechowuje je bez ograniczeń. Takie odpowiedzi wysyłasz z Cache-Control: private, żeby nie trafiły do CDN, albo z no-store.
Strategia buforowania dla różnych typów zasobów
Dobór dyrektywy zależy od tego, czy adres elementu zmienia się razem z jego treścią. Obrazy, czcionki, CSS i JavaScript z wersją w nazwie mogą leżeć w cache przez rok, dokument HTML zwykle wymaga sprawdzenia przy każdym żądaniu, a dane prywatne nie powinny lądować u pośredników. Poniższa tabela pokazuje, jaka wartość pasuje do którego typu.
| Element | Nagłówek Cache-Control |
|---|---|
| Arkusz z wersją w nazwie (main.x234dff.css) | max-age=31536000 |
| Dokument HTML bez wersji w adresie | no-cache |
| Treść jednego użytkownika (koszyk, konto) | private |
| Dane, których nie wolno zapisywać | no-store |
Wykorzystanie Service Workers
Nowoczesne aplikacje internetowe mogą wykorzystywać Service Workers do zaawansowanego zarządzania pamięcią podręczną. Taki skrypt ma własny magazyn kopii, który Chrome sprawdza przed cache HTTP, a programista decyduje, co trafia do środka i kiedy jest odświeżane. Według web.dev service worker może nadal zwracać pliki przy niestabilnym połączeniu, kiedy zwykły bufor HTTP zawodzi, więc strona może działać także w trybie offline.
Wpływ pamięci podręcznej na metryki wydajności
Pamięć podręczna wpływa na wskaźniki Core Web Vitals, bo plik z aktualnej lokalnej kopii przeglądarka wczytuje bez połączenia z internetem. Według web.dev dobre wartości to Largest Contentful Paint (LCP) do 2,5 sekundy, Interaction to Next Paint (INP) do 200 milisekund i Cumulative Layout Shift (CLS) do 0,1, mierzone na 75 percentylu odsłon, osobno dla telefonów i komputerów. INP zastąpił w 2024 roku metrykę First Input Delay (FID). Wyniki swojej strony sprawdzisz w raporcie "Podstawowe wskaźniki internetowe" w Search Console.
Efektywne zarządzanie pamięcią podręczną wymaga zbilansowania między szybkością działania strony a aktualnością prezentowanych treści. Dobrze skonfigurowany cache to rok przechowywania dla plików z wersją w nazwie, weryfikacja dokumentów HTML przy każdej wizycie i zakaz zapisu dla danych prywatnych, co daje użytkownikom świeżą zawartość przy mniejszym zużyciu zasobów serwera.
