Optimiser la mise en cache HTTP/2 pour booster votre site

Publié le 20/07/2025 dans Performance & Scalabilité

Introduction

Optimiser la mise en cache HTTP/2 pour booster votre site

Le protocole HTTP/2 révolutionne la performance web grâce au multiplexing, à la priorisation des flux et à la compression des en-têtes. Mais sans une stratégie de cache efficace, vous ne tirez pas tout le potentiel de HTTP/2. Dans ce guide, nous détaillons pas à pas comment configurer et optimiser la mise en cache pour :

  • Réduire la latence
  • Diminuer le nombre de requêtes réseau
  • Améliorer le temps de chargement perçu
  • Renforcer votre SEO grâce à des pages plus rapides

1. Activer HTTP/2 sur votre serveur web

Pourquoi HTTP/2 ?

  • Multiplexing : plusieurs requêtes/réponses sur une même connexion TCP
  • Compression HPACK : réduction de la taille des en-têtes
  • Priorisation : ordonnancement des ressources critiques

Configuration Nginx

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate     /etc/ssl/certs/example.crt;
    ssl_certificate_key /etc/ssl/private/example.key;

    # Activer HTTP/2
    http2 on;

    # Configuration SSL recommandée
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    
    location / {
        root /var/www/html;
        index index.html;
    }
}

Astuce SEO : vérifiez avec l’outil en ligne KeyCDN HTTP/2 Test que votre site est bien servi en HTTP/2.

Configuration Apache

<IfModule http2_module>
    Protocols h2 h2c http/1.1
</IfModule>

<VirtualHost *:443>
    ServerName example.com

    SSLEngine on
    SSLCertificateFile /etc/ssl/certs/example.crt
    SSLCertificateKeyFile /etc/ssl/private/example.key

    # Activer HTTP/2
    ProtocolsHonorOrder On
    Protocols h2 h2c http/1.1

    DocumentRoot "/var/www/html"
</VirtualHost>

2. Paramétrer Cache-Control et ETag

Une bonne gestion du cache HTTP permet de réutiliser les ressources statiques sans les recharger inutilement.

Cache-Control

# Exemple pour des fichiers CSS, JS versionnés
Cache-Control: public, max-age=31536000, immutable

# Exemple pour des images
Cache-Control: public, max-age=604800

# Pour les pages HTML dynamiques
Cache-Control: private, no-cache, must-revalidate

ETag

ETag: "3e86-410-1288c7a3"
Last-Modified: Tue, 20 Jul 2025 10:15:00 GMT

Bonnes pratiques :

  1. Versionnez vos assets (hash dans le nom de fichier) pour prolonger la durée de cache
  2. Sérialisez et minifiez CSS/JS pour réduire la taille
  3. Mettez en place un CDN pour décharger votre serveur et réduire la latence géographique

3. Prendre en charge Push et Preload

HTTP/2 Server Push

# Exemple Nginx
location = / {
    http2_push /css/main.css;
    http2_push /js/app.js;
}

Attention : n’abusez pas du Push, car cela peut pénaliser si le client a déjà la ressource en cache.

Préchargement avec <link rel="preload">

<head>
  <!-- Charger le CSS critique en priorité -->
  <link rel="preload" href="/css/main.css" as="style">
  <link rel="preload" href="/js/app.js" as="script">
</head>

Checklist SEO pour Preload :

  • Utilisez as="script" ou as="style" pour indiquer le type
  • Évitez de précharger trop de ressources (sélectionnez uniquement celles au-dessus de la ligne de flottaison)
  • Surveillez les rapports Lighthouse pour identifier les opportunités de preload

4. Surveiller et ajuster en continu

Outils de mesure

  • Lighthouse (Chrome DevTools)
  • WebPageTest
  • GTmetrix

Indicateurs clés

  • First Contentful Paint (FCP)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)

Exemple d’amélioration :
Avant optimisation (Lighthouse) :
- FCP : 2,3 s
- TTI : 4,7 s

Après optimisation avec HTTP/2 + cache :
- FCP : 1,1 s
- TTI : 2,8 s

Conclusion

La combinaison de HTTP/2 et d’une stratégie de cache avancée (Cache-Control, ETag, Server Push, Preload) permet de réduire drastiquement la latence et d’améliorer significativement l’expérience utilisateur, ce qui profite directement à votre SEO.

En résumé :

  1. Activez HTTP/2
  2. Configurez des en-têtes de cache stricts et versionnez vos assets
  3. Utilisez judicieusement Server Push et Preload
  4. Mesurez, ajustez et itérez

En appliquant ces bonnes pratiques, vous offrez à vos visiteurs un site ultra-rapide et performant, et gagnez des places dans les résultats de recherche Google.

← Retour aux articles