htaccess vs modifications site, quelle stratégie ? Merci

[underthenet]

Bonjour à toutes et à tous,

J'ai un petit portfolio fait à la main avec Bootstrap hébergé sur une offre perso OVH.
Habituellement, je ne le modifie pas souvent et je l'optimise pour pagespeed avec un htaccess comme ci-dessous.
En ce moment j'ai besoin de le modifier plus souvent (html, css, images...) et donc mes visiteurs qui reviennent, ne voient pas les modifications, conformément aux consignes de mon htaccess.

Alors, quelle est la stratégie à adopter ?
Remplacer temporairement 1 year par 1 hour et max-age-311104000 par max-age-3600 ?
Supprimer le htaccess ?
Laisser la solution en place combien de temps ?

Je dois dire que je me suis souvent poser la question, j'ai souvent cherché des réponses, sans succès.
Merci de votre aide.

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresDefault "access plus 1 year"
   ExpiresByType image/jpg "access plus 1 year"
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   AddType image/x-icon .ico
   ExpiresByType image/ico "access plus 1 year"
   ExpiresByType image/icon "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType text/html "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"
   ExpiresByType application/x-javascript "access plus 1 year"
   ExpiresByType video/ogv "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/webm "access plus 1 year"
</IfModule>

<IfModule mod_headers.c>
   <FilesMatch "\\.(ico|jpe?g|png|ttf|eot|woff|woff2)$">
      Header set Cache-Control "max-age=311104000, public"
   </FilesMatch>
   <FilesMatch "\\.(css)$">
      Header set Cache-Control "max-age=311104000, public"
   </FilesMatch>
   <FilesMatch "\\.(html|htm)$">
      Header set Cache-Control "max-age=311104000, public"
   </FilesMatch>
   <FilesMatch "\\.(js)$">
      Header set Cache-Control "max-age=311104000, private"
   </FilesMatch>
</IfModule>

 

[colonies]

Il faut ajouter un identifiant de version à chacune de tes ressources. Si tu le passe en query string, ça forcera le rechargement sans pour autant provoquer un comportement inattendu.
Par exemple :

<link rel="stylesheet" href="/mes_styles.css?v1">

Le fichier chargé sera bien mes_styles.css, mais en changeant ce qu'il y a derrière le ?, le navigateur devra recharger le fichier.
L'idéal est d'avoir un système pour mettre à jour automatiquement ce qu'il y a derrière le ?, par exemple, si tu as PHP, en ajoutant le timestamp de la dernière modification du fichier :

<link rel="stylesheet" href="/mes_styles.css?<?= filemtime('/chemin/complet/vers/mes_styles.css') ?>">

 

[underthenet]

Bonjour à tous, merci Colonies
Il faut que je précise que je ne suis pas un dev, mais juste chef de projet fonctionnel.
Si je comprends bien, il suffirait que j'ajoute, dans mon fichier index.html et que je renomme en index.php, la ligne :

<link rel="stylesheet" href="/mes_styles.css?<?= filemtime('/chemin/complet/vers/mes_styles.css') ?>">

pour que les consignes du htaccess soient outrepassées ?
Et pour une image je peux faire ça :

<img src="images/fichier.png<?= filemtime('/chemin/complet/vers/fichier.png ')" />

Merci encore.

 

[colonies]

pour que les consignes du htaccess soient outrepassées ?

En fait ça n'outrepasse rien. Une adresse avec un paramètre qui change doit être rechargée, le navigateur ne peut rien déduire de la partie avant le(s) paramètre(s) d'URL, que ce soit un fichier .css, .js ou .png, ça n'a pas d'importance. Ce sont des extensions qui correspondent généralement à des fichiers statiques, mais le navigateur n'en a aucune garantie puisqu'on peut réécrire les URL, et leur contenu pourrait donc changer en fonction du paramètre derrière le ? de l'URL.

Dans ton cas, le paramètre ne sert à rien en lui-même, mais le fait qu'il change forcera le navigateur à télécharger la nouvelle version du fichier (et il sera servi par le cache pendant 1 an si l'utilisateur revient, dans ton cas, tant que le paramètre ne change pas).

 

[underthenet]

Merci Colonies
Ok, je comprends mieux, et en effet quand je regarde dans le cache de firefox j'ai bien monstyle.css?
Mais du coup comment je pourrais faire pour le fichier index.php lui-même ?
Merci encore de ta patience.

 

[colonies]

Mais du coup comment je pourrais faire pour le fichier index.php lui-même ?

Ton index.php doit envoyer des headers au navigateur pour indiquer qu'il ne doit pas être mis en cache. Il faut mettre, en début de fichier :

<?php
header("Expires: -1");
header("Cache-Control: private, no-cache");
?>

Note : tu as bien quelque chose derrière le point d'interrogation de "monstyle.css?" ?
Tu devrais avoir un nombre, par exemple : monstyle.css?1647110265
Tiens, voilà une fonction qui renvoie l'url avec le timestamp de dernière modification du fichier :

function urlts(string $path): string {
   return "$path?" . filemtime($_SERVER['DOCUMENT_ROOT'] . $path);
}

Exemples d'appel :

<link rel="stylesheet" href="<?= urlts('/css/mon_style.css') ?>">
<script src="<?= urlts('/js/mon_js.js') ?>"></script>