Jak ustawić nagłówki wygasania dla CSS, JS i obrazów?

38

Niedawno przeanalizowałem moją stronę przy pomocy dodatku pagepeed w Firebug. Zasugerowało mi ustawienie wygasania dla CSS, JS i plików obrazów.

Zastanawiam się, jak to zrobić?

css javascript cache page-speed KoolKabin
źródło

Odpowiedzi:

37

Zaktualizuj konfigurację Apache, aby uwzględnić poniższe dyrektywy jako część podstawowej konfiguracji :

# 
# associate .js with "text/javascript" type (if not present in mime.conf)
# 
AddType text/javascript .js

# 
# configure mod_expires
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# 
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 2692000 seconds"
    ExpiresByType image/jpeg "access plus 2692000 seconds"
    ExpiresByType image/png "access plus 2692000 seconds"
    ExpiresByType image/gif "access plus 2692000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
    ExpiresByType text/css "access plus 2692000 seconds"
    ExpiresByType text/javascript "access plus 2692000 seconds"
    ExpiresByType application/x-javascript "access plus 2692000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

# 
# configure mod_headers
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
# 
<IfModule mod_headers.c>
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|js)$">
        Header set Cache-Control "max-age=2692000, public"
    </FilesMatch>
    <FilesMatch "\\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </FilesMatch>
    Header unset ETag
    Header unset Last-Modified
</IfModule>
John Conde
źródło
Dostaję błąd 500 serwera wewnętrznego, gdy umieszczam go w pliku .htaccess
KoolKabin,
Twoja konfiguracja Apache może nie obsługiwać wszystkich powyższych opcji. Zaktualizuję tę odpowiedź wkrótce, aby pomóc rozwiązać ten problem.
John Conde
Mój Drupal zawiera odwołania do javascript / css, takie jak: www.example.com/misc/jquery.js?v=1.4.4 lub www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293 wydaje się nie działać dla takich plików. Czy jest aktualizowany na dzisiaj?
AgA
2
@JohnConde Dlaczego wygasa i nagłówki? Ponadto, czy na przykład podczas aktualizacji obrazu lub css należy zmienić nazwę pliku? Lub w przypadku pliku css wersja działa: test.css? 123?
powstanie przeciw
14

Możesz umieścić to w swoim htaccess:

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

Będzie celował w pliki z tymi rozszerzeniami (ico, flv, jpg itd.) I ustawi nagłówek Expires na czas dostępu (A) plus 30 dni (2592000 sekund). Możesz również dodać to na poziomie serwera, jeśli masz do tego dostęp.

DisgruntledGoat
źródło
2

Zależy to od hosta i sposobu serwera tych rzeczy. Opcja 1) jeśli kontrolujesz serwer, zrób apache, aby dodać nagłówki wygasające w odpowiedzi Opcja 2) jeśli nie kontrolujesz serwera WWW lub serwujesz obrazy / js / css / etc, możesz ustawić te nagłówki ze skryptu, który serweruj je

Pamiętaj, że te wskazówki są godne polecenia, ale nie są absolutną prawdą. Są one bardziej w celu zaoszczędzenia przepustowości niż przyspieszenia Twojej witryny. Więc jeśli masz mały ruch na swojej stronie, nie martw się zbytnio o to.

Ilian Iliev
źródło
Jestem z opcją 2. Jak ustawić te nagłówki ze skryptu. Skrypt oznacza php lub który?
KoolKabin
Możesz sprawdzić stackoverflow.com/questions/2185449/... jest to przykład python, ale jeśli znasz programowanie, myślę, że zrozumiesz. W php będziesz musiał użyć nagłówków (). Należy jednak pamiętać, że w tym przypadku wszystkie pliki „statyczne” będą musiały być obsługiwane przez skrypt, co zwiększy przydział procesora. Teraz przychodzi mi do głowy, że jest trzecia opcja. Użyj CDN dla tych plików.
Ilian Iliev,
2

Konfiguracja wygasa w Lightspeed Web Server

Zaloguj się do konsoli administracyjnej, a następnie> Serwer-> Ogólne-> Wygasa Ustawienia-> Wygasa według typu

Dodaj następujące:

text/css=A604800, text/javascript=A604800, application/javascript=A604800, application/x-javascript=A604800, application/x-shockwave-flash=A604800, image/gif=A604800, image/jpg=A604800, image/jpeg=A604800, image/png=A604800, image/ico=A604800, image/icon=A604800

604800 to sekundy wygaśnięcia, które powinny być dostosowane do twoich potrzeb, ponieważ jego 168 godzin, czyli 7 dni. Dodatkowo Light Speed ​​Server korzysta z htaccess, który musisz dodać następujący wiersz:

ExpiresActive On

Alternatywnie, jeśli nie masz dostępu do konsoli administratora, wypróbuj następujący plik .htaccess:

  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800
Simon Hayter
źródło