web-dev-qa-db-fra.com

htaccess exploite la mise en cache du navigateur pour les images et les CSS

J'essaie de créer un fichier htaccess pour mon site Web et les informations de pageSpeed ​​ont montré qu'il existe des images et un fichier CSS sans expiration. 

Je ne sais pas trop par où commencer ni comment procéder. J'ai ce code tiré d'un didacticiel en ligne et je me demandais si cela suffirait pour fonctionner. 

<IfModule mod_expires.c>
ExpiresActive On
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
</IfModule>

Ou est-ce que ce code fait ce que j'ai besoin de faire?

Merci

apache.htaccess
25
Sam

essayez quelque chose comme

<IfModule mod_expires.c> 
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 86400 seconds"
  ExpiresByType application/x-javascript "access plus 86400 seconds"
</IfModule>

ou 

<FilesMatch "\.(?i:gif|jpe?g|png|ico|css|js|swf)$">

  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>

</FilesMatch>
44
NullPoiиteя

Je sais que c'est une réponse tardive, mais ce qui précède n'a pas fonctionné pour moi. Au lieu de cela, j'ai utilisé ce qui suit:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=31536050"
</FilesMatch>
25
Matthew Johnson

La réponse ci-dessus fonctionne pour moi, mais je souhaite également ajouter une autre extension de fichier dans .htaccess. Le code ci-dessous me donne une bonne solution. 

Code complet .htaccess à transmettre à Google PageSpeed ​​Insight: 

  1. Activer la compression
  2. Tirer parti de la mise en cache du navigateur
# Enable Compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
</IfModule>
<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# Leverage Browser Caching
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</IfModule>

Il existe également certaines configurations pour divers serveurs Web, voir ici .
J'espère que cela aiderait à obtenir le score de 100/100.

9
Sahil Patel

Concernant la réponse de Matthew Johnson ci-dessus, telle quelle, cela ne fonctionne pas pour moi sur mon site Web Laravel5.2 Mais j'ai ajouté 'php' à la liste et cela a fonctionné! Merci Matthew Johnson

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|php|txt|xsl)$">
Header set Cache-Control "max-age=31536050"
</FilesMatch>
0
Vasko