Jak dodać nagłówki Expires Headers na stronie?

Kiedy przeglądarka odwiedza stronę internetową, zasoby takie jak pliki CSS czy obrazy mogą zostać pobrane i zapisane w pamięci podręcznej przeglądarki. Dzięki temu, jeśli użytkownik wróci na tę samą stronę w przyszłości, zasoby te mogą zostać wczytane bez konieczności pobierania ich ponownie. To znacznie przyspiesza ładowanie strony i poprawia ogólną wydajność.

Expire headers to część standardu HTTP, która pozwala na ustalenie daty ważności dla zasobów strony WWW, takich jak pliki CSS, JavaScript, obrazy itp. Zasoby te przechowywane są w pamięci podręcznej przeglądarki i nie trzeba pobierać ich z serwera.

Expire headers definiują, przez jak długi czas przeglądarka powinna przechowywać dany zasób w pamięci podręcznej przed sprawdzeniem, czy jest dostępna nowsza wersja. Jeśli na stronie brakuje nagłówków expire headers, przeglądarka może być zmuszona do pobierania zasobów za każdym razem, gdy użytkownik odwiedza stronę, nawet jeśli te zasoby nie uległy zmianie od ostatniej wizyty. To może prowadzić do nadmiernego obciążenia serwera i opóźnień w ładowaniu strony. Dlatego Google Page Speed Insights rekomenduje wdrożenie rozwiązania Expire headers na stronie.

Dodanie nagłówków expire headers do odpowiedzi serwera HTTP pozwala na ustalenie daty ważności dla konkretnych zasobów. Przeglądarka może wtedy zapamiętać tę datę i używać informacji o ważności, aby określić, czy powinna pobierać zasób z pamięci podręcznej czy z serwera. W ten sposób można zwiększyć wydajność strony internetowej poprzez zmniejszenie ilości zbędnych żądań sieciowych i skrócenie czasu ładowania.

Jak dodać expire headers?

Edytuj plik .htaccess w katalogu głównym swojej strony, np. public_html/.htaccess wypróbowując następujący kod, dopasowując wartości liczbowe:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month”
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year”
ExpiresByType image/gif "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month”
ExpiresByType application/xhtml+xml "access 1 month""
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 4 days"
</IfModule>

Aby edytować plik .htaccess możesz użyć narzędzia Zarządzania plikami dostępnego w panelu hostingowym.

Far future expires headers - co to takiego?

Far future expires headers, czyli w tłumaczeniu nagłówki "expires" na daleką przyszłość. Takie nagłówki odnoszą się do ustawienia bardzo odległej daty ważności dla zasobów na stronie internetowej. Zamiast korzystać z daty wygaśnięcia w bliskiej przyszłości, można ustawić datę ważności na bardzo daleki termin w przyszłości, np. kilka lat.

Przy użyciu far future expires headers przeglądarka może pobrać zasoby z serwera tylko raz i zachować je w pamięci podręcznej na bardzo długi czas. Oznacza to, że przy kolejnych odwiedzinach strony przeglądarka nie będzie musiała ponownie pobierać tych zasobów z serwera, co przyspiesza ładowanie strony dla użytkowników. Jest to szczególnie przydatne dla zasobów, które rzadko ulegają zmianom, takich jak pliki CSS, czcionki, obrazy tła itp.

warning

Jednak trzeba uważać przy ustawianiu far future expires headers, ponieważ jeśli zasób faktycznie ulegnie zmianie przed ustaloną datą ważności, przeglądarka może nie pobrać nowszej wersji, dopóki nie upłynie ustalony czas ważności. Dlatego ważne jest odpowiednie zarządzanie cachem i dbanie o aktualizację zasobów w odpowiednich momentach, aby uniknąć problemów z nieaktualnymi danymi dla użytkowników.

Far future expires headers z daleką datą - problem.

Jeśli np. rok wcześniej ustawiłeś nagłówki z odległą o kila ładnych lat, a chcesz już teraz zmienić np. logo na stronie to musisz pamiętać o wykorzystaniu kilku technik. Inaczej, przeglądarką nie pobierze nowego pliku logo.jpg dopóki nie nie upłynie czas ważności cache lub użytkownik nie wyczyści cache przeglądarki.

Rozwiązanie: Wgraj plik logo.jpg pod inną nazwą. Zmiana nazwy pliku spowoduje że przeglądarką pobierze go na nowo i ustawi swój cache.

Zastosuj wersję jako parametr - dla developerów

• Aby przeglądarka pobrała nową wersję pliku, możesz zastosować technikę dodania parametru do nazwy pliku. Dowolnego parametru. Na przykład, możesz użyć adresu URL takiego jak logo.jpg?v=2 zamiast po prostu logo.jpg. Zmiana wartości parametru, w tym przypadku ?v=2, powoduje, że przeglądarka traktuje adres URL jako nowy zasób, który musi zostać pobrany z serwera.

• możesz użyć funkcji filemtime() w PHP, do dynamicznego generowania unikalnego parametru, który zmienia się wraz z czasem modyfikacji pliku,

<?php
$filePath = 'assets/img/logo.jpg';
$imageUrl = $filePath . '?v=' . filemtime($filePath);
?>

<img src="<?php echo $imageUrl; ?>" alt="Logo">

Warto pamiętać że funkcja filemtime() jako parametr przyjmuje ścieżkę lokalną zamiast URL. W przypadku WordPress możemy wykorzystać takie combo z funkcjami get_theme_file_path(), get_theme_file_uri().

<?php
$path = ('assets/img/logo.png');
$filePath = get_theme_file_path($path);
$fileUrl = get_theme_file_uri($path);
$fileModifiedTime = filemtime($filePath);
$imageUrl = $fileUrl . '?v=' . $fileModifiedTime;
?>
<img src="<?php echo $imageUrl; ?>" alt="Logo">