web-dev-qa-db-fra.com

Comment surcharger le cache des utilisateurs lorsque de nouveaux actifs / contenus sont disponibles

Je viens d’exécuter un test de vitesse de page sur Google sur mon site et l’une des choses qu’il est suggéré de faire est d’utiliser la mise en cache du navigateur. Je fais déjà la mise en cache de votre navigateur pour la plupart des images volumineuses et d’autres ressources qui changent fréquemment, mais cela suggère également que j’ajoute la mise en cache du navigateur pour:

  • Images UI .png
  • CSS minifié
  • JS minifié
  • Balise JS Google Analytics provenant de Google CDN (cache actuellement 2 heures)
  • Balise de suivi JS tiers provenant d'un CDN tiers (mémoire cache actuellement de 4 heures)

Sur les 2 derniers qui sont hébergés par des tiers, je ne peux pas définir les paramètres de cache.

Sur les 3 premiers points, je ne veux pas vraiment les configurer pour qu'ils soient mis en cache, comme si, par exemple, la navigation sur le site Web était modifiée, les graphiques HTML, CSS, JS et UI devaient tous être mis à jour, si un l’utilisateur avait une partie de cette mise en cache, cela pourrait signifier qu’ils servaient du HTML qui n’était pas synchronisé avec les fichiers JS, CSS, UI pngs mis en cache.

Y a-t-il un moyen de contourner cela en étant capable de définir quelque chose de côté navigateur ou serveur qui me permettrait de mettre en cache les fichiers JS, CSS, UG pngs, mais si/quand je fais un changement et qu'ils doivent être mis à jour, je pourrais mettre en place un avis qui permet à tous les visiteurs des navigateurs de télécharger à nouveau tous les actifs sans utiliser leur cache précédent?

Dans le cas où il est demandé: Sage serveur, le site utilise Apache.

cachecache-control
2
sam

Je suis d'accord avec Stephen pour dire que le "cache busting" est la voie à suivre.

Y a-t-il autre chose qui pourrait être fait côté serveur, comme la définition d'une nouvelle règle Apache

Vous pouvez utiliser le module de réécriture Apache (assurez-vous que mod_rewrite est installé) pour mapper un nom d'URL commençant par quelque chose de commun et le mapper sur un fichier réel.

Par exemple, vous pouvez utiliser une règle comme celle-ci dans votre .htaccess:

RewriteRule ^path/to/imagename-([0-9]+).jpg$ /path/to/image.jpg [L]

Dans cette règle, si quelqu'un entre http://example.com/path/to/imagename-12345.jpg , le fichier /path/to/image.jpg est chargé et le navigateur traite le image. le '([0-9] +)' signifie n'importe quel nombre et n'importe quel nombre de chiffres. Cela peut représenter le numéro de version. Donc, demandes à http://example.com/path/to/imagename-1.jpg et http://example.com/path/to/imagename-2.jpg Le serveur chargera /path/to/image.jpg mais le navigateur client ne le saura pas. Il y a des tonnes de tutoriels en ligne sur la rédaction d'expressions régulières pour Apache.

Maintenant que vous avez compris cela, vous pouvez faire la même chose pour vos fichiers HTML et autres fichiers. Cette règle dans .htaccess est un exemple:

RewriteRule ^path/to/htmlname-([0-9]+).html$ /path/to/html.html [L]

Ensuite, les seules modifications que vous devez apporter à votre code sont toutes des références aux actifs.

Personnellement, je recommande un langage côté serveur et la définition de variables pour vos fichiers d'actif afin que vous n'ayez besoin de changer la référence qu'une seule fois, pas 100 fois.

Par exemple, considérons ce fragment HTML:

<p>This is <a href="bones.html">a bone</a> and 
we got lots of <a href="bones.html">bones</a> so
check out our <a href="bones.html">bones</a> today
or check <a href="bones.html">bones</a> tomorrow.</p>

Quatre liens mènent exactement au même fichier HTML et il serait fastidieux de les remplacer tous un par un. Considérons maintenant le même fragment en PHP:

<?php
$url="bones.html";
?>
<p>This is <a href="<?php echo $url; ?>">a bone</a> and 
we got lots of <a href="<?php echo $url; ?>">bones</a> so
check out our <a href="<?php echo $url; ?>">bones</a> today
or check <a href="<?php echo $url; ?>">bones</a> tomorrow.</p>

Maintenant, tout ce que vous avez à faire est de changer bones.html une fois et la variable $url correspondra immédiatement à la nouvelle valeur.

** METTRE À JOUR **

Grâce à un commentaire et à une pétition de cerveau nocturne, je viens de me rendre compte qu'il serait beaucoup plus simple d'écrire des règles pour renvoyer les demandes de fichier portant le même nom de fichier mais des numéros de version différents pour le même fichier. J'ai modifié ma réponse pour refléter cela.

2
Mike