Foire aux questions

Optimisez votre site (cache et compression)

Par l'équipe technique Easy-Hébergement · Mis à jour le

La vitesse d’un site influence l’expérience des visiteurs, leur taux de conversion et le référencement (Google mesure les Core Web Vitals). Ce tutoriel présente les deux leviers les plus efficaces côté hébergement : la mise en cache et la compression, puis quelques pistes pour réduire le temps de réponse du serveur.

1 - Mesurer avant de modifier

Commencez par relever l’état de départ avec PageSpeed Insights (testez une page d’accueil et une page de contenu, en version mobile). Il affiche trois indicateurs à surveiller :

  • LCP (affichage du plus gros élément) : visez moins de 2,5 s ;
  • INP (réactivité aux clics) : visez moins de 200 ms ;
  • CLS (stabilité de la mise en page) : visez moins de 0,1.

Pour le détail des requêtes, ouvrez les outils de développement de votre navigateur (touche F12), onglet Réseau : la colonne Taille indique si chaque fichier vient du réseau ou du cache du navigateur.

2 - Exploiter le cache du navigateur

Sans consigne de votre part, le navigateur peut retélécharger à chaque visite des fichiers qui ne changent presque jamais (images, feuilles de style, scripts, polices). Il suffit de lui indiquer combien de temps il peut les conserver. Sur l’hébergement mutualisé, ces réglages se placent dans un fichier .htaccess à la racine de votre site (là où se trouve le fichier index).

Le bloc ci-dessous définit une durée de conservation par type de fichier. Le HTML reste volontairement court, car il change à chaque publication.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 hour"

    # Images, polices : 1 an
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/avif "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"

    # CSS et JavaScript : 1 mois (voir la remarque sur le versionnage plus bas)
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"

    # Pages HTML : courte durée
    ExpiresByType text/html "access plus 5 minutes"
</IfModule>

L’en-tête Cache-Control

Le même résultat s’exprime avec l’en-tête Cache-Control, que lisent tous les navigateurs et les caches intermédiaires (CDN, proxys). Ne l’appliquez qu’aux fichiers statiques, jamais aux pages PHP :

<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|webp|avif|svg|woff2)$">
        Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "max-age=2592000, public"
    </FilesMatch>
</IfModule>

Les ETags

Les ETags servent à savoir si un fichier a changé depuis la dernière visite. Sur une architecture en cluster comme la nôtre, un même fichier peut porter des dates de modification différentes d’un serveur à l’autre, ce qui fait échouer cette vérification. Comme les durées de cache ci-dessus la rendent inutile pour les fichiers statiques, vous pouvez désactiver les ETags :

Header unset ETag
FileETag None

Versionner les fichiers modifiés

Avec une longue durée de cache, un visiteur qui a déjà votre feuille de style ne verra pas sa nouvelle version avant l’expiration. La solution est de changer l’adresse du fichier à chaque modification : style.css?v=2, ou mieux un nom contenant un identifiant (style.3f9a1c.css). WordPress, Prestashop et la plupart des CMS le font déjà automatiquement pour leurs propres fichiers ; pensez-y surtout pour vos fichiers personnalisés.

3 - Compresser les fichiers texte

La compression réduit fortement le poids du HTML, des feuilles de style et des scripts transmis au visiteur (souvent d’un facteur 3 à 5). Le module mod_deflate la gère :

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
    AddOutputFilterByType DEFLATE text/javascript application/javascript application/json
    AddOutputFilterByType DEFLATE application/xml application/rss+xml image/svg+xml
</IfModule>

Inutile de compresser les images JPEG, PNG, WebP ou AVIF, ni les polices WOFF2 : ces formats sont déjà compressés.

4 - Réduire le temps de réponse du serveur

Le temps de réponse (TTFB) est le délai avant l’arrivée du premier octet de la page. Google le considère comme bon en dessous de 800 ms. Il varie selon l’heure et le contenu de la page, mais plusieurs leviers dépendent de vous :

  • Utilisez une version récente de PHP, nettement plus rapide que les anciennes versions : voir comment modifier la version de PHP ;
  • Activez un cache de pages si vous utilisez un CMS : un plugin de cache pour WordPress, le cache intégré de Prestashop (Paramètres avancés > Performances). La page est alors servie sans exécuter PHP à chaque visite ;
  • Limitez les extensions et modules inutiles, chacun alourdit la génération de la page ;
  • Évitez les requêtes lourdes vers la base de données (vérifiez les extensions qui enregistrent beaucoup de données ou qui lancent des requêtes à chaque affichage).

5 - Alléger le contenu de la page

Une fois le cache et la compression en place, les gains suivants viennent des fichiers eux-mêmes :

  • Images : utilisez les formats WebP ou AVIF, redimensionnez-les à la taille affichée, indiquez leurs attributs width et height (cela évite les sauts de mise en page) et ajoutez loading="lazy" aux images situées sous la première vue ;
  • JavaScript : chargez les scripts non essentiels avec l’attribut defer et supprimez ceux dont vous ne vous servez plus (widgets, traceurs, anciennes bibliothèques) ;
  • Polices : limitez le nombre de polices et de graisses, privilégiez le format WOFF2 hébergé sur votre site avec font-display: swap.

6 - Vérifier le résultat

Relancez PageSpeed Insights sur les mêmes pages. Dans l’onglet Réseau de votre navigateur, rechargez la page une deuxième fois : les fichiers statiques doivent apparaître comme servis depuis le cache (mémoire cache ou disque) plutôt que téléchargés. Notez que les mesures de terrain de Google (Core Web Vitals) se mettent à jour sur plusieurs semaines.

Avertissement

Sauvegardez votre fichier .htaccess avant de le modifier : une erreur de syntaxe peut rendre le site inaccessible (erreur 500). Appliquez de préférence ces réglages quand votre site est en production, et testez-les sur quelques pages avant de généraliser. Pour forcer votre navigateur à ignorer son cache et à recharger intégralement une page, utilisez Ctrl+F5 (ou Cmd+Maj+R sur Mac).