Passer au contenu principal

Qu'est-ce que le Cache? ⚡

L'un des secrets pour un chargement rapide des sites web est le cache ! Je vais vous expliquer ce qu'est le cache et comment il fonctionne de manière simple pour que même les débutants puissent comprendre !

Comparer le cache à la vie quotidienne ?​

Comparons le cache à un bloc-notes sur le bureau ?

L'histoire du bloc-notes 📝​

Sans bloc-notes (sans cache) :

Chaque fois que vous avez besoin du numéro de téléphone d'un ami
1. Ouvrir le tiroir
2. Sortir l'annuaire téléphonique
3. Chercher le numéro
4. Remettre l'annuaire
→ Prend du temps à chaque fois 😓

Avec bloc-notes (avec cache) :

Noter les numéros fréquemment utilisés sur un bloc-notes sur le bureau
1. Regarder le bloc-notes
2. Appeler immédiatement !
→ Rapide et pratique ⚡

Le cache fonctionne de la même façon !

Stocker temporairement
les données fréquemment utilisées
à proximité
→ Accès rapide !

Définition du cache​

Cache

  • Stocker temporairement les données fréquemment utilisées dans un stockage rapide
  • Amélioration de la vitesse est l'objectif
  • L'original reste intact, seule la copie est stockée

Pourquoi avons-nous besoin d'un cache ?​

Comparaison de vitesse​

Récupérer des données depuis le serveur :
Navigateur → (Internet) → Serveur → Données → (Internet) → Navigateur
Temps : 500ms (lent 🐌)

Récupérer des données depuis le cache :
Navigateur → Cache local → Données
Temps : 10ms (rapide ⚡)

→ 50 fois plus rapide !

Types de cache​

1. Cache navigateur 🌐​

Cache stocké dans le navigateur web

Première visite :
Navigateur → Serveur : "index.html s'il vous plaît"
Serveur → Navigateur : [Transfert fichier + "Vous pouvez le mettre en cache"]
Navigateur : Enregistrement du fichier

Visite suivante :
Navigateur : "Ah, c'est dans le cache !" → Utilisation immédiate
→ Chargement rapide sans requête serveur ⚡

Ce qui est stocké :

  • Fichiers HTML
  • Fichiers CSS
  • Fichiers JavaScript
  • Images (logos, icônes, etc.)
  • Polices

2. Cache CDN 🌍​

Stockage distribué sur des serveurs dans le monde entier

Utilisateur (France) → Serveur CDN (Paris) → Contenu
                  ↓
            Réponse rapide ⚡

vs

Utilisateur (France) → Serveur d'origine (USA) → Contenu
                  ↓
            Réponse lente 🐌

3. Cache serveur 💾​

Cache de données sur le serveur

Mise en cache des résultats de requêtes de base de données
Mise en cache des réponses API
Mise en cache des résultats de calcul

4. Cache mémoire (RAM) 🧠​

Stocké dans la mémoire de l'ordinateur

Ordre de vitesse :
Cache mémoire (le plus rapide) ⚡⚡⚡
Cache disque (rapide) ⚡⚡
Réseau (lent) ⚡

Processus de fonctionnement du cache​

1. Première requête (Miss de cache)​

1. Navigateur : "J'ai besoin de logo.png !"
2. Vérification du cache : "Pas trouvé ?"
3. Requête au serveur : "logo.png s'il vous plaît"
4. Réponse du serveur : [Fichier + Politique de cache]
5. Utilisation du fichier + Enregistrement en cache

2. Deuxième requête (Hit de cache)​

1. Navigateur : "J'ai besoin de logo.png !"
2. Vérification du cache : "Trouvé !" ✅
3. Utilisation immédiate depuis le cache
→ Pas de requête serveur ⚡

En-têtes de contrôle du cache​

Le serveur indique au navigateur comment mettre en cache :

Cache-Control​

Cache-Control: max-age=3600
→ Utiliser le cache pendant 3600 secondes (1 heure)

Cache-Control: no-cache
→ Vérifier avec le serveur à chaque fois

Cache-Control: no-store
→ Ne pas mettre en cache

Cache-Control: public
→ Tout le monde peut mettre en cache

Cache-Control: private
→ Seul le navigateur de l'utilisateur peut mettre en cache

Expires​

Expires: Wed, 21 Oct 2025 07:28:00 GMT
→ Le cache est valide jusqu'à cette date

ETag​

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
→ Identifiant unique du fichier
→ Vérifie si le fichier a changé

Validation du cache​

Requête conditionnelle​

Navigateur → Serveur : "J'ai le fichier, a-t-il changé ?"
           If-None-Match: "33a64df55..."

Serveur → Navigateur : "Pas de changement !"
           304 Not Modified

Navigateur : "Alors j'utilise le cache !" ✅
Si le fichier a changé :
Serveur → Navigateur : "Il a changé !"
           200 OK + nouveau fichier

Avantages du cache​

✅ Vitesse de chargement rapide​

Première visite : 3 secondes
Deuxième visite : 0,5 seconde ⚡
→ 6 fois plus rapide !

✅ Réduction de la charge du serveur​

1 million de visiteurs
→ 90% sans requête serveur grâce au cache
→ Le serveur ne traite que 100 000 requêtes

✅ Réduction des coûts​

Réduction du trafic réseau
→ Réduction des coûts serveur 💰

✅ Utilisation hors ligne​

Les pages mises en cache
peuvent être consultées sans Internet

Inconvénients du cache​

❌ Contenu obsolète​

Même si le fichier est mis à jour
l'ancienne version en cache est utilisée

❌ Utilisation de l'espace de stockage​

L'accumulation du cache
occupe de l'espace disque

❌ Gestion du cache nécessaire​

Définir un délai d'expiration approprié
Stratégie d'invalidation du cache nécessaire

Résolution des problèmes de cache​

Problème 1 : Les mises à jour ne s'affichent pas !​

Solutions :

  1. Actualisation forcée (Hard Refresh)
Windows : Ctrl + F5
Mac : Cmd + Shift + R
  1. Supprimer le cache
Chrome : Paramètres → Effacer les données de navigation → Cache
  1. Mode navigation privée
Ctrl + Shift + N (Chrome)
→ N'utilise pas le cache

Problème 2 : Renommer le fichier (Cache Busting)​

Solution pour les développeurs :

<!-- Mauvais exemple -->
<link rel="stylesheet" href="style.css">

<!-- Bon exemple : Ajouter un numéro de version -->
<link rel="stylesheet" href="style.css?v=1.2.3">

<!-- Meilleur exemple : Hash de fichier -->
<link rel="stylesheet" href="style.abc123.css">

Lorsque le fichier change, le nom change aussi pour un nouveau téléchargement !

Stratégies de cache​

1. Ressources statiques (ne changent pas)​

Logos, icônes, bibliothèques

Cache-Control: max-age=31536000, immutable
→ Cache pendant 1 an (garantie sans changement)

2. Contenu fréquemment mis à jour​

Articles de presse, listes de produits

Cache-Control: max-age=300
→ Cache pendant 5 minutes seulement

3. Informations personnelles​

Profil utilisateur, informations de compte

Cache-Control: private, no-cache
→ Navigateur utilisateur uniquement, validation à chaque fois

4. Ne jamais mettre en cache​

Page de paiement, informations sensibles

Cache-Control: no-store
→ Cache interdit

Gestion du cache dans le navigateur​

Outils de développement Chrome​

F12 → Onglet Network
→ Vérifier le cache dans la colonne "Size"

(disk cache) = Chargé depuis le cache disque
(memory cache) = Chargé depuis le cache mémoire
Affichage de la taille = Téléchargé depuis le serveur

Supprimer le cache​

Chrome :

Paramètres → Confidentialité et sécurité
→ Effacer les données de navigation
→ Cocher Images et fichiers en cache
→ Effacer

Exemples d'utilisation réelle​

Exemple 1 : Cache d'image​

Première visite :
GET /logo.png
← 200 OK (1 Mo téléchargé, 500ms)
Cache-Control: max-age=86400

Visite suivante :
GET /logo.png
← (disk cache) (0 Ko, 10ms)
→ 50 fois plus rapide ! ⚡

Exemple 2 : Fichier CSS​

<link rel="stylesheet" href="styles.abc123.css">

Cache-Control: max-age=31536000, immutable
→ Cache 1 an, hash inclus dans le nom du fichier
→ Le nom change également lors de la modification du fichier

Exemple 3 : Cache de réponse API​

// Réponse du serveur
Cache-Control: max-age=60

// Si vous appelez la même API pendant 1 minute
→ Utilise la réponse en cache
→ Réduit la charge du serveur

Questions fréquemment posées (FAQ)​

Q1 : Quelle est la différence entre cache et cookie ?​

R :

  • Cache : Stockage de fichiers (chargement rapide)
  • Cookie : Stockage de petites données (maintien d'état)

Q2 : Faut-il supprimer fréquemment le cache ?​

R : Généralement non !

  • Le navigateur le gère automatiquement
  • Supprime automatiquement les anciens si l'espace manque
  • Suppression manuelle uniquement en cas de problème

Q3 : Le cache en mode navigation privée ?​

R : Uniquement cache temporaire

  • Tout est supprimé à la fermeture de la fenêtre
  • N'utilise pas le cache existant

Q4 : Quelle est la capacité du cache ?​

R : Varie selon le navigateur :

  • Chrome : ~50 Mo par site
  • Cache total : ~quelques Go

Q5 : Le cache est-il utilisé sur mobile ?​

R : Oui ! Fonctionne de la même façon.

  • Économise les données
  • Chargement rapide

Invalidation du cache (Cache Invalidation)​

L'un des problèmes les plus difficiles en informatique :

"Quand faut-il supprimer le cache ?"

Stratégies​

  1. Basé sur le temps
Expiration automatique toutes les 10 minutes
  1. Basé sur les événements
Suppression du cache lors de la mise à jour des données
  1. Gestion des versions
Inclure version/hash dans le nom du fichier

Prochaines étapes 🚀​

Si vous avez compris le cache :

  1. ✅ Qu'est-ce qu'un Cookie ? - Une autre méthode de stockage du navigateur
  2. ✅ Comprendre les requêtes/réponses HTTP - Comment fonctionnent les en-têtes de cache
  3. ✅ Qu'est-ce qu'un VPN ? - Sécurité Internet

Conclusion​

Le cache est la magie qui rend le Web rapide ! ⚡

Points à retenir :

  • Cache = Stockage temporaire
  • Objectif : Amélioration de la vitesse
  • Stocke les données fréquemment utilisées
  • Géré automatiquement, pas besoin de s'en soucier
  • Supprimer uniquement en cas de problème

Grâce au cache, les sites web se chargent rapidement. La prochaine fois que vous surfez sur le Web, essayez de sentir le cache au travail ! 🚀