web-dev-qa-db-fra.com

comment mettre correctement en cache un site web statique .htaccess

Le problème que j'ai remarqué avec mon site web statique. Est-ce que le fichier css ne se renouvelle pas une fois que j'ai mis à jour le code du site Web dans certaines zones (ajout de nouvelles images, texte, couleurs).

J'ai vérifié immédiatement une fois que j'ai mis à jour. Tout a bien été renouvelé sauf le css. (Les couleurs n'ont pas changé)

Heres mon .htaccess pour cache

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2628000, public" </filesMatch>

Mon objectif est que les mises à jour reflètent complètement une fois que vous êtes sur le site Web ou même cliquez sur le lien du site Web sur Google.

Dois-je ajouter ceci aussi?

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access 1 hour"
ExpiresByType image/gif "access 1 hour"
ExpiresByType image/jpeg "access 1 hour"
ExpiresByType text/javascript "access 1 hour"
ExpiresByType text/css "access 1 hour"
ExpiresByType text/html "modification 4 hours"
ExpiresDefault "access 2 days"

S'il vous plaît aider sur ce que je peux faire de mal ou quoi d'autre que je devrais ajouter dans le .htaccess pour cette question.

htaccesscache
1
Rivash Harripersad

C'est une épée à double tranchant. CSS est normalement configuré pour être mis en cache pendant une très longue période afin d'optimiser les temps de chargement de votre site Web après le premier chargement. D'où la ligne dans votre fichier .htacccess. Ne le changez pas avant de savoir vraiment ce que vous faites.

Si votre site Web n'utilise pas de système de gestion de contenu (je dois supposer ici que vous n'avez pas fourni suffisamment de détails), vous préféreriez modifier un lien vers ce fichier de ressources modifié (CSS dans ce cas) en ajoutant une chaîne de requête. Quelque chose comme ça

/css_directory/file.css?001

Chaque fois que vous mettez à jour CSS - modifiez cette valeur après ?.

C’est ce que font normalement les sites Web basés sur les CMS. De cette façon, vous contrôlez ce qui est en train d'être serveur pour vos visiteurs sans gaspiller leur bande passante à revérifier votre contenu supposé-statique (CSS) toutes les heures.

2
George

Les options standard pour cela consistent à utiliser une sorte d'automatisation dans laquelle la page HTML qui fait référence aux actifs css modifie l'URL css d'une manière ou d'une autre. Vous pouvez soit utiliser les paramètres d'URL tels que mentionnés par George, ou si vous êtes en mesure de changer dynamiquement le nom ou le chemin du fichier CSS, par exemple si vous combinez plusieurs fichiers. Quoi qu'il en soit, cela suppose que le navigateur va récupérer le code HTML et cette fois-ci avec le chemin d'accès au fichier css mis à jour, ce qui signifie que le navigateur devra à nouveau appeler le serveur pour obtenir le fichier css.

Changer la date d'expiration ou l'heure ne suffira pas, car pendant la période de cache, le navigateur ne recherchera pas de copie mise à jour. Vous pouvez essayer d'activer Etag dans htaccess, ce qui pourrait fonctionner (car ils devraient changer lorsque le contenu du fichier change), mais je n'ai pas testé cela.

2
Thangaraj

Mon fichier htaccess ressemble à ceci:

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

Vous devez absolument mettre en cache vos fichiers .js et .css afin que les utilisateurs n'aient pas à télécharger vos fichiers .js et .css à chaque chargement de page.

Lorsque je mets à jour mon css, j'ai la possibilité de changer le style src sur toutes mes pages (via mon fichier d’en-tête). Donc, lorsque je mets à jour mon css et que je veux que tous les utilisateurs obtiennent la copie du nouveau css, je change le fichier de fichier1.css en fichier2.css.

Si vous ne faites que mettre à jour le code dans le même fichier .css, quiconque possède une version en cache de votre fichier .css risque de ne pas recevoir la mise à jour avant l'expiration du cache.

Si vous ne pouvez pas modifier le nom de fichier du fichier .css ni tous les styles src de vos pages, vous pouvez mettre à jour la date d'expiration de votre cache dans htaccess afin que votre fichier .css expire plus tôt.

Pour ce faire, vous pouvez également définir l’expiration .css sur 1 jour après une nouvelle mise à jour. Cela obligera l'utilisateur à charger le fichier .css chaque fois qu'il visite votre site pour la nouvelle journée, mais cela garantit également qu'il obtiendra votre nouvelle mise à jour .css si sa version en cache est antérieure à un jour.

ExpiresByType text/css "access plus 86400  seconds"

86400 secondes = 24 heures

1
Michael d