Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images

Toujours dans un but de poster des petites astuces et de répondre aux questions de mes collègues, amis ou clients, voici un petit billet pour vous expliquer quelques pratiques pour forcer le cache navigateur à re-télécharger certains éléments de votre site qui ont changé, mais qui restent en cache navigateur, car le nom du fichier, lui, est toujours le même.

En effet, le navigateur garde en mémoire certains éléments (css, images, javascript etc…) afin d’améliorer la vitesse de chargement. Mais il arrive que de petites modifications ne soient pas prises en compte ce qui peut perturber l’affichage et/ou la navigation des internautes sur votre site. Bien entendu, en tant que développeur, vous savez qu’il faut vider le cache navigateur, mais certains visiteurs (et surtout vos clients) ne le savent pas forcément. Alors, il existe quelques astuces pour essayer de palier à ce soucis.

css

Renommer les fichiers

Bien entendu, il vous est possible de renommer tous les fichiers qui ont été modifiés, mais ça peut s’avérer fastidieux, surtout si vous apportez souvent de petites modifications.

Utilisation des requêtes via le ?

Déjà plus pratique, il vous est possible d’utiliser lors de l’appel du ou des fichiers une requête « factice » après le point interrogation « ? ».

Comme ceci par exemple :

<link href="css/style.css?1234" type="text/css" rel="stylesheet" />

Et donc modifier juste l’appel à chaque modification, « 1234 » deviendra « 12345 » etc…

Si vous utilisez PHP, nous pouvons améliorer ce petit procédé et le rendre automatique, exemple simple :

<link href="css/style.css?<?php echo time(); ?>" type="text/css" rel="stylesheet" />

Ce qui le modifiera à chaque fois et le navigateur le téléchargera à chaque fois.

Cependant, il est possible d’améliorer cela, éviter ainsi le téléchargement systématique du fichier, et faire en sorte que ce dernier ne soit téléchargé uniquement si le fichier à été modifié, exemple :

<link href="css/style.css?<?php echo filemtime('css/style.css');" type="text/css" rel="stylesheet" />

Petite astuce simple à mettre en place et qui peut s’avérer utile dans certains cas 😉

Bon code à tous !

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

3 Comments

  1. Merci pour l’astuce, souvent ennuyé avec le cache.

    Je galère à expliquer aux clients que leur cache doit être vidé, il me disent « pourquoi mes modifs ne sont pas prises en compte »

    Post a Reply
  2. Un problème récurent pour tous les spécialistes du web 🙂 en tout cas, ça peut toujours servir 😉

    Post a Reply

Trackbacks/Pingbacks

  1. Retrouvez le blog sur votre réseau favori | LudiBlog - [...] Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images [...]
  2. Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images | LudiBlog | Développement Web et sites | Scoop.it - [...] Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images | ...…
  3. Récupérer un Favicon (.ico) en PHP via Google | LudiBlog - [...] Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images [...]
  4. Référencement – 10 annuaires de sites web | LudiBlog - [...] Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée.