CDN i cache — jak przyspieszyć stronę firmową globalnie
Strona ładuje się 3 sekundy? Połowa użytkowników już odeszła. CDN i właściwy cache potrafią skrócić ten czas o 40–70% bez zmian w kodzie.
Strona ładuje się 3 sekundy? Dla połowy użytkowników to za długo — opuszczą ją zanim zdążą przeczytać pierwszą linijkę tekstu. Google też to wie i penalizuje wolne strony w wynikach wyszukiwania. CDN (Content Delivery Network) to jedna z najprostszych technik, która realnie skraca czas ładowania — często o 40–70% bez jednej linii zmian w kodzie.
Jak działa CDN i dlaczego to ma sens
CDN to sieć serwerów rozproszonych po całym świecie. Gdy użytkownik z Gdańska otwiera stronę hostowaną na serwerze w Nowym Jorku, pliki statyczne — obrazki, CSS, JavaScript, fonty — są serwowane z najbliższego węzła CDN, który może znajdować się w Frankfurcie, Amsterdamie albo Pradze. Mniejsza odległość fizyczna oznacza mniejsze opóźnienia sieciowe, które w branży nazywamy latency. Popularne CDN-y to Cloudflare, BunnyCDN, Fastly i AWS CloudFront.
Cloudflare — CDN, który polecam na start
- Darmowy plan obejmuje CDN, podstawową ochronę DDoS i analitykę ruchu
- Konfiguracja sprowadza się do zmiany serwerów DNS na Cloudflare — reszta działa automatycznie
- Automatyczne minifikowanie HTML, CSS i JavaScript bez dotykania kodu
- Kompresja Brotli zamiast przestarzałego gzip — pliki są o 15–20% mniejsze
- Serwer w Warszawie zapewnia świetną latency dla polskich użytkowników
- Always Online serwuje cache strony gdy Twój serwer jest chwilowo niedostępny
Cache — co cachować, a czego absolutnie nie
Cache to zapisana kopia treści serwowana bez generowania jej od nowa przy każdym żądaniu. Pliki statyczne — obrazki, fonty, arkusze CSS — możesz cache'ować nawet przez rok. Treści dynamiczne takie jak koszyk zakupowy, sesja użytkownika czy panel logowania nie powinny być cache'owane w ogóle. Strony blogowe i produktowe to złoty środek — cache od kilku godzin do kilku dni działa tu świetnie. W Cloudflare zarządzasz tym przez Cache Rules lub starsze Page Rules.
Nagłówki Cache-Control — jak je ustawiać
Cache na poziomie przeglądarki i pośrednich serwerów kontrolujesz przez nagłówek HTTP Cache-Control. Dla zasobów z hashem w nazwie pliku (budowanych przez webpack lub Vite) używaj max-age=31536000, immutable — przeglądarka nigdy nie odpyta serwera o ten plik. Dla dokumentów HTML stosuj no-cache, co oznacza, że przeglądarka zawsze pyta serwer, ale może dostać odpowiedź 304 Not Modified bez pobierania całej treści. Dyrektywa stale-while-revalidate pozwala CDN serwować lekko przestarzały cache natychmiast, odświeżając go w tle.
Optymalizacja obrazów — największy zysk prędkości
Obrazy stanowią zazwyczaj 60–80% całkowitej wagi strony. Format WebP jest o 30% lżejszy od JPEG przy tej samej wizualnej jakości, a AVIF jest jeszcze wydajniejszy, choć wsparcie przeglądarek wciąż rośnie. Next.js ma wbudowany komponent Image, który automatycznie konwertuje do WebP, generuje srcset dla różnych rozdzielczości ekranu i lazy-loaduje obrazy poza ekranem. To jeden z pierwszych elementów, który konfiguruję w każdym projekcie — efekty są natychmiastowe i mierzalne.
Core Web Vitals — metryki, które liczy Google
- LCP (Largest Contentful Paint) — czas do wyświetlenia największego elementu, cel poniżej 2,5 s
- INP (Interaction to Next Paint) — responsywność na kliknięcia i gesty, cel poniżej 200 ms
- CLS (Cumulative Layout Shift) — stabilność wizualna, cel poniżej 0,1
- TTFB (Time to First Byte) — czas odpowiedzi serwera, CDN obniża go zwykle o 50–80%
Kiedy CDN nie pomoże — typowe pułapki
CDN nie jest panaceum. Wolna baza danych, nieoptymalizowany kod JavaScript czy render-blocking skrypty spowolnią stronę niezależnie od CDN. Jeśli pierwsze zapytanie do bazy danych trwa 2 sekundy, CDN może cache'ować wynik, ale pierwsze żądanie zawsze będzie powolne. Duży bundle JS blokuje rendering zanim przeglądarka pokaże cokolwiek użytkownikowi. Skrypty analityczne i remarketingowe bez atrybutu defer lub async blokują parsing HTML. Zanim wdrożysz CDN, sprawdź w Chrome DevTools i PageSpeed Insights gdzie faktycznie leży wąskie gardło.
