CDN i strategie cache'owania
Konfiguracja CDN, cache headers i optymalizacja dostarczania zasobów
Czym jest CDN i cache?
CDN (Content Delivery Network) to sieć serwerów rozproszonych geograficznie, która serwuje treść z najbliższego serwera użytkownikowi, znacznie zmniejszając czas ładowania.
Cache'owanie to przechowywanie kopii zasobów (obrazy, CSS, JS) w przeglądarce lub na serwerach pośredniczących, aby uniknąć ponownego pobierania.
CDN - podstawy
1. Wybór CDN
- Cloudflare - darmowy plan, łatwa konfiguracja, automatyczne optymalizacje
- CloudFront (AWS) - skalowalny, integracja z AWS, pay-as-you-go
- Vercel/Netlify - automatyczny CDN, optymalizacja out-of-the-box
- Fastly - enterprise, bardzo szybki, edge computing
2. Co serwować przez CDN?
- Obrazy (WebP, JPEG, PNG)
- Pliki CSS i JavaScript
- Fonty (woff2, woff)
- Wideo i audio
- Inne statyczne zasoby
Nie cache'uj przez CDN: HTML (może zawierać dynamiczne treści), dane osobowe, zasoby wymagające autentykacji.
Cache Headers
1. Cache-Control
Kontroluj, jak długo zasoby powinny być cache'owane:
// Statyczne zasoby (obrazy, CSS, JS) - cache długoterminowy Cache-Control: public, max-age=31536000, immutable // Dynamiczne treści - cache kr ótkoterminowy Cache-Control: public, max-age=3600, must-revalidate // Brak cache'owania (HTML, dane wrażliwe) Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0
💡 Wskazówka:
Użyj immutable dla zasobów z hash'em w nazwie (np. main.abc123.js). Przeglądarka wie, że zasób nigdy się nie zmieni i nie sprawdza aktualizacji.
2. ETag i Last-Modified
Pozwalają przeglądarce sprawdzić, czy zasób się zmienił bez pobierania go ponownie:
ETag: "abc123def456" Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT // Przeglądarka wysyła: If-None-Match: "abc123def456" If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT // Jeśli zasób się nie zmienił, serwer odpowiada: 304 Not Modified
Strategie cache'owania
1. Browser Cache
Cache w przeglądarce użytkownika - najszybszy dostęp:
- Dla statycznych zasobów:
max-age=31536000(1 rok) - Dla zasobów z hash'em: dodaj
immutable - Dla HTML:
no-cachelub krótki cache
2. CDN Cache
Cache na serwerach CDN - zmniejsza obciążenie origin servera:
- Cache-Control określa, jak długo CDN przechowuje zasoby
- CDN może mieć własne ustawienia cache (Cloudflare Page Rules)
- Purge cache gdy aktualizujesz zasoby
3. Application Cache
Cache na poziomie aplikacji (Redis, Memcached) - dla dynamicznych danych:
- Cache wyników zapytań do bazy danych
- Cache wygenerowanych HTML dla statycznych stron
- Cache danych z API
Checklista CDN i cache'owania
CDN
- Skonfiguruj CDN dla statycznych zasobów
- Użyj HTTPS dla wszystkich zasobów
- Włącz automatyczną kompresję (Gzip/Brotli)
- Konfiguruj purge cache dla aktualizacji
Cache Headers
- Ustaw długoterminowy cache dla statycznych zasobów (1 rok)
- Użyj immutable dla zasobów z hash'em
- Brak cache lub krótki cache dla HTML
- Włącz ETag i Last-Modified