Les modifications CSS ne s'affichent pas

Si vous modifiez les fichiers CSS de votre site et que vous avez effacé le cache WP Rocket, mais que vous ne voyez pas les changements de suite, c'est parce qu'ils restent bloqués dans le cache de votre navigateur. Vous remarquerez que, peu importe combien de fois vous effacez le cache WP Rocket, vous voyez toujours l'ancien fichier, vous ne pourrez le voir qu'après avoir effacé le cache de votre navigateur.

Vider le CSS utilisé

Vous devriez utiliser cette option lorsque :

• Vous devez utiliser cette option lorsque vous apportez des modifications aux feuilles de style ou ajoutez/modifiez des CSS personnalisés via WordPress Customizer (ou un plugin).
• Certaines options personnalisées d'un thème ont été modifiées.
• Vous devez effacer les images optimisées par la fonctionnalité Optimiser les images critiques (depuis WP Rocket 3.16).

Mise en cache du navigateur

Pour plus d'informations sur la mise en cache du navigateur, vous pouvez lire cet article (EN) :   
https://wp-rocket.me/blog/browser-caching-explained-in-plain-english/

Pour vous donner un bref aperçu du problème et de ce qui se passe :

Disons que vous avez un fichier : style.css
Lorsque vous visitez votre site Web, votre navigateur télécharge ce fichier et en conserve une copie dans son cache local, c'est-à-dire qu'il se retrouve sur votre ordinateur, dans ce navigateur, et pas dans le cache WP Rocket.

Lorsque vous mettez à jour ce fichier CSS, vous devez informer votre navigateur qu'il a été mis à jour, sinon il vous dira: "J'ai déjà style.css, pas besoin de le télécharger à nouveau, il est là... voilà !" Et il vous montre l'ancienne version.

Pour éviter ça, généralement les fichiers ont un numéro de version ajouté comme ceci :

style.css? ver=1

Et lorsque le fichier est mis à jour, la version est aussi mise à jour: style.css? ver=1.1

Ceci permet au navigateur de savoir quand télécharger la nouvelle version au lieu de réutiliser l'ancienne version en cache. C'est le busting du cache navigateur.

Comment faire sauter le cache du navigateur

Utiliser Minifier / Combiner dans WP Rocket

En activant les options Minifier ou Minifier / Combiner dans WP Rocket , WP Rocket fera sauter le cache navigateur. Lorsque ces options sont activées, après avoir apporté un changement à vos fichiers, videz le cache de WP Rocket et les noms de fichiers seront alors mis à jour. 

Notez que cela ne sera appliqué que là où la mise en cache est appliquée. Ainsi, si vous êtes connecté à votre site, sans que le cache utilisateur soit activé, vous ne verrez pas les effets.

Faire sauter le cache sans utiliser minifier / combiner

Nous fournissons ces informations à titre de guide - vous devez les mettre en œuvre vous-même. 

Le plus important est de toujours de s'assurer que le numéro de version est mis à jour. Vous pouvez le faire en changeant simplement le numéro de version en haut de votre feuille de style après avoir effectué une modification :

Cette version sera reflétée dans la nouvelle chaîne de requête ( query string), appelant le navigateur à télécharger cette nouvelle version.

Si vous utilisez l'option  "Ressources Statiques" de WP Rocket, la mise à jour de la version de la feuille de style poussera le plugin à générer une nouvelle version de votre feuille de style sans query string. Ainsi, vos visiteurs verront toujours la dernière version.

Notre option Ressources Statiques encode le numéro de version dans le nom de fichier pour buster le cache du navigateur. Si vous utilisez un plugin différent pour supprimer les chaînes de requête sur vos fichiers, il le fera probablement de manière incorrecte, en supprimant simplement la chaîne de requête sans fournir de moyen de buster le cache, vous ne devriez donc plus l'utiliser ;)

REMARQUE : si vous avez d'autres niveau de cache comme CloudFlare, CloudProxy de Sucuri ou un autre service CDN, etc., vous devrez peut-être effacer les caches de ceux-ci pour voir vos dernières mises à jour CSS.

Themes particuliers - Genesis, X Theme etc

Lorsque vous utilisez certains thèmes, comme la Genesis et ses thèmes enfants, vous devez faire quelque chose d'un peu différent pour mettre à jour la version de la feuille de style. Lors de l'utilisation d'un thème enfant Genesis, le numéro de version dans la chaîne de requête est par défaut le numéro de version du thème parent. C'est problématique car même si vous mettez à jour votre version de thème enfant, cela ne modifiera pas la chaîne de requête. 

Avec Genesis, vous devez ajouter la ligne suivante à votre functions.php puis y mettre à jour le numéro de version, et non pas dans la feuille de style :

define( 'CHILD_THEME_VERSION', '2.1.8' );

Avec X Theme, vous devez faire quelque chose de similaire, vous trouverez ici les détails :  https://theme.co/apex/forums/topic/cache-busting-child-theme-stylesheet-custom-version-query-string/