Cache-control, czyli jak przyśpieszyć wczytywanie strony internetowej

Istnieje wiele sposobów na przyśpieszenie działania witryny, a w samej sieci powstało już tysiące poradników, dzięki którym „podobno” nasza strona zacznie działać szybciej i będzie osiągać lepsze wyniki w narzędziu Google PageSpeed Insights.

Często jednak wprowadzane zmiany są zbyt agresywne, co powoduje, iż strona internetowa przestaje wyczytywać się poprawnie. W przypadku nagłówka cache-control jest jednak zupełnie inaczej. Dodanie tego kodu do strony internetowej zwiększy jej wydajność, skróci czas wczytywanie zasobów oraz doda Ci cennych punktów w oczach Google.

Nie wierz mi na słowo – sprawdź już teraz i napisz komentarz.

Cache-control, czyli nitro w internecie

Dodając nagłówek cache-control sprawisz, iż przeglądarka zapisze wskazane pliki na dysk komputera, dzięki czemu dalsze przeglądanie strony nie będzie wymagało każdorazowego pobierania plików takich jak .js, .css, czy .webp i .webp. Oczywiście możemy wskazać ich dowolną ilość, jednak ja przedstawię Ci już gotowy kod, który znakomicie przyśpieszy Twoją stronę internetową:

<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|JPG)$"> Header set Cache-Control "max-age=4838400, public"
</FilesMatch> <FilesMatch "\.(css|js)$"> Header set Cache-Control "max-age=4838400, private"
</FilesMatch>
</IfModule>

Dlaczego warto stosować cache control?

Odpowiedź jest prosta: jest to zalecenie samego Google, a jeżeli coś poleca nam właściciel najpopularniejszej wyszukiwarki internetowej, to nie jest to przypadkowe działanie.

Jednak poza samymi punktami i (być może) lepszym pozycjonowaniem strony, zyska przede wszystkim użytkownik, który szybko i komfortowo będzie mógł przeglądać zawartość Twojej strony internetowej.

Nie tylko cache-control

W tym momencie chciałbym podzielić się z Tobą jeszcze jedną regułą, którą możesz dodać do pliku .htaccess na swoim serwerze. Jej działanie jest bardzo zbliżone do control-cache, jednak w tym wypadku nie ustalamy maksymalnego czasu po jakim przeglądarka internetowa ma ponownie pobrać na dysk dane, a na sztywno ustawiamy czas wygaśnięcia konkretnych plików po stronie użytkownika:

<ifModule mod_mime.c>
AddType application/x-font-ttf ttc ttf
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot
</ifModule>
<ifModule mod_expires.c>
ExpiresActive On ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType text/x-javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType application/x-font-ttf "access plus 216000 seconds"
ExpiresByType application/font-woff "access plus 216000 seconds"
ExpiresByType application/x-font-woff "access plus 216000 seconds"
ExpiresByType font/woff "access plus 216000 seconds"
ExpiresByType application/font-woff2 "access plus 216000 seconds" </ifModule>

Pamiętaj jednak, aby nie stosować obu reguł w jednym czasie, bowiem przyniesie to efekt odwrotny do zamierzonego i spadek wydajności strony internetowej.

Cache-control dla NGINX

Jeżeli jednak zamiast serwera Apache posiadasz NGINX spróbuj dodać ten kod jako administrator w konfiguracji Virtual Hosta:

location ~* \.(png|jpg|jpeg|gif|ico)$ {
expires 1y;
log_not_found off;
}
location ~* \.(js|css)$ {
expires 30d;
log_not_found off;
}


Powinno zadziałać jak w przypadku .htaccess!

Podsumowanie

W jednym i w drugim przypadku efekt będzie taki sam. Nie ma jednoznacznej odpowiedzi na pytanie, czy nagłówek control-cache jest lepszy, aniżeli znacznik Expires, jednak w naszym przypadku dużo lepiej sprawdził się ten drugi, który znaczące podniósł wynik w narzędziu Google Speed Insight oraz skrócił czas wczytywania strony Porady.org.

Daj znać jak poszło u Ciebie!