Comment définir les en-têtes d'expiration pour CSS, JS et Images?

38

J'ai récemment analysé mon site Web avec l'addition pagespeed sur firebug. Il m'a suggéré de définir l'expiration sur les fichiers CSS, JS et image.

Je me demande comment je fais ça?

css javascript cache page-speed KoolKabin
la source

Réponses:

37

Mettez à jour votre configuration Apache pour inclure les directives ci-dessous dans votre configuration principale :

# 
# 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
la source
Je reçois une erreur de 500 serveur interne lorsque je le place dans mon fichier .htaccess
KoolKabin
Votre configuration Apache peut ne pas prendre en charge toutes les options énumérées ci-dessus. Je mettrai à jour cette réponse sous peu pour aider à résoudre ce problème.
John Conde
Ma Drupal contient des références javascript / css telles que: www.example.com/misc/jquery.js?v=1.4.4 ou www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293, it ne semble pas fonctionner pour de tels fichiers. Est-il mis à jour à compter d'aujourd'hui?
AgA
2
@JohnConde Pourquoi les deux expirent et les en-têtes? De plus, lors de la mise à jour d'une image ou d'un fichier CSS, par exemple, le fichier doit-il être renommé? Ou pour un fichier css la gestion des versions fonctionne: test.css? 123?
risé le
14

Vous pouvez mettre ceci dans votre htaccess:

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

Il cible les fichiers portant ces extensions (ico, flv, jpg, etc.) et définit l'en-tête Expires sur le temps d'accès (A) plus 30 jours (2592000 secondes). Vous pouvez également ajouter ceci au niveau du serveur si vous y avez accès.

Chèvre mécontente
la source
2

Cela dépend de l'hôte et de la façon dont vous serveurz ces choses. Option 1) Si vous contrôlez le serveur, assurez-vous qu'apache ajoute des en-têtes d'expiration dans la réponse. Option 2) Si vous ne contrôlez pas le serveur Web, ou si vous utilisez le serveur images / js / css / etc, vous pouvez définir ces en-têtes à partir du script. serveur eux

N'oubliez pas que ces indications sont recommandables mais pas la vérité absolue. Ils sont plus destinés à vous faire économiser de la bande passante qu’à accélérer votre site Web. Donc, si vous avez un faible trafic sur votre site, ne vous inquiétez pas trop à ce sujet.

Ilian Iliev
la source
Je suis avec l'option 2. Comment définir ces en-têtes à partir du script? Script signifie php ou lequel?
KoolKabin
Vous pouvez vérifier stackoverflow.com/questions/2185449/… ceci est un exemple en python, mais si vous êtes familier avec la programmation, je pense que vous comprendrez l'idée. En php, vous devrez utiliser des en-têtes (). Mais gardez à l'esprit que dans ce cas, tous les fichiers "statiques" devront être traités via le script, ce qui augmentera votre quota de CPU. Maintenant, il me semble qu’il existe une 3ème option. Utilisez CDN pour ces fichiers.
Ilian Iliev
2

La configuration expire sur le serveur Web Lightspeed

Connectez-vous à la console d'administration puis> Serveur-> Général-> Paramètres d'expiration-> Expire par type

Ajouter ce qui suit:

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 est les secondes de l'expiration, ce qui devrait convenir à vos besoins puisque ses 168 heures correspondent à 7 jours. De plus, Light Speed ​​Server utilise un htaccess auquel vous devez ajouter la ligne suivante:

ExpiresActive On

Sinon, si vous n'avez pas accès à la console d'administration, essayez le fichier .htaccess suivant:

  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
la source