web-dev-qa-db-fra.com

Contrôle du cache du navigateur

Premièrement: Je suis un concepteur qui connaît le HTML et le CSS, pas un programmeur. Je suis donc très en avance pour mes connaissances et ma compréhension limitées: ) Le squelette de mon site Web est basé sur un seul fichier HTML et sur quelques fichiers CSS et JS que je modifie sur mon ordinateur et que je copie au format FTP si nécessaire. Ces fichiers n'ont pas été écrits par moi, mais je les édite du mieux que je peux.

Deuxièmement: J'utilise PageSpeed ​​Insight de Google pour consulter mon site Web. Une partie importante de mon score faible résulte de l'absence ou de la mauvaise mise en cache des fichiers. J'ai cherché un peu partout sur le Web mais je n'ai pas réussi jusqu'à présent, soit parce que je ne comprends pas les solutions, soit ils ne sont pas pertinents (par exemple destinés à WordPress sites etc.).

Ma question: Comment puis-je ajouter une limite de cache à l'ensemble de mon site (css, js, fichiers image, etc.) à l'aide de modifications de code sous html/css/php /autres fichiers.

Je veux que la limite soit mensuelle (les changements ne se produisent pas souvent). Le problème concerne principalement les images qui ne changent pas leurs noms de fichiers lors de la mise à jour.

Notes: Mon site est avec GoDaddy, je crois qu’il utilise un serveur Apache 2.0. J'ai lu le fichier .htaccess ne met pas en cache et Google Pagespeed me dit de tirer parti de la mise en cache du navigateur lorsque la mise en cache est déjà activée mais je ne les ai pas bien comprises. Où et comment utiliser ce code? Cela pourrait être la réponse si on pouvait élaborer pour moi.

Merci


Des modifications seront ajoutées ici si nécessaire:

1
Yar

.htaccess est un fichier dans lequel vous pouvez ajouter des directives pour modifier les en-têtes de vos fichiers. vous pouvez ajouter le code suivant ci-dessous dans htaccess qui déterminera un délai d'expiration pour chaque type de fichier. Le délai d'expiration par défaut sera de 7 jours. Ensuite, si le type de fichier est présent dans la liste, Apache choisira la directive plutôt que la valeur par défaut.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/x-icon                              "access plus 1 year"
ExpiresByType image/jpeg                                "access plus 1 month"
ExpiresByType image/gif                                 "access plus 1 month"
ExpiresByType image/png                                 "access plus 1 month"
ExpiresByType application/font-woff                     "access plus 1 month"
ExpiresByType application/x-font-woff                   "access plus 1 month"
ExpiresByType application/font-ttf                      "access plus 1 month"
ExpiresByType application/x-shockwave-flash             "access plus 1 month"
ExpiresByType application/pdf                           "access plus 7 days"
ExpiresByType application/javascript                    "access plus 7 days"
ExpiresByType text/css                                  "access plus 7 days"
ExpiresByType application/atom+xml                      "access plus 1 hour"
ExpiresByType application/rdf+xml                       "access plus 1 hour"
ExpiresByType application/rss+xml                       "access plus 1 hour"
ExpiresByType application/json                          "access plus 0 seconds"
ExpiresByType application/ld+json                       "access plus 0 seconds"
ExpiresByType application/schema+json                   "access plus 0 seconds"
ExpiresByType application/vnd.geo+json                  "access plus 0 seconds"
ExpiresByType application/xml                           "access plus 0 seconds"
ExpiresDefault "access plus 7 days"
#ExpiresByType text/html "access plus 0 seconds"
#ExpiresByType text/plain "access plus 0 seconds"
#ExpiresByType application/octet-stream "access plus 0 seconds"
</IfModule>

En tant que développeur, vous pouvez alors me faire part de vos commentaires. Je voudrais savoir si ces délais d'expiration sont un problème pour HTML et PHP. Laissez-moi vous expliquer: lorsque vous modifiez un fichier, obtenez-vous toujours l'ancienne page du cache ou de la page mise à jour. Si vous avez ce genre de problème, faites le moi savoir. Si vous avez un problème de cache, décommentez les dernières lignes du code.

Ensuite, si vous pouvez voir l'en-tête d'une page php, vous obtenez

HTTP/1.1 200 OK
Date: Sat, 10 Oct 2015 16:20:14 GMT
Server: Apache/2
X-Powered-By: PHP/5.6.13
Vary: Cookie,User-Agent
Cache-Control: max-age=604800
Expires: Sat, 17 Oct 2015 16:20:14 GMT 
Content-Type: text/html; charset=UTF-8

17 oct. Moins 10 oct = 7 jours (règle par défaut) et 604800 secondes = 7 jours

Ensuite, si vous obtenez l'en-tête d'une URL jpg:

HTTP/1.1 200 OK
Date: Sat, 10 Oct 2015 16:25:03 GMT
Server: Apache/2
Last-Modified: Fri, 04 Sep 2015 16:49:12 GMT
ETag: "a6d-51eeeadece009"
Accept-Ranges: bytes
Content-Length: 2669
Cache-Control: max-age=2592000
Expires: Mon, 09 Nov 2015 16:25:03 GMT
Content-Type: image/jpeg

09 novembre moins 10 oct. = 2592000 secondes = 30 jours = 1 mois générique

1
Nicolas Guérinet