bloggerselite logo

Mise en cache des navigateurs sur WordPress : tout ce qu’il faut savoir

Mise en cache des navigateurs sur WordPress : tout ce qu'il faut savoir

La vitesse des pages est plus importante que jamais pour obtenir un bon classement dans les SERPs de Google, ainsi que pour offrir une expérience de qualité à vos utilisateurs. Si vous souhaitez atteindre un score de 90 sur Google PageSpeed Insights, vous avez besoin de tous les outils possibles dans la boîte à outils pour y parvenir, y compris la mise en cache du navigateur !

De nos jours, vous trouverez un certain nombre d’options pour améliorer la vitesse des pages, mais l’une des façons les plus intelligentes d’améliorer la vitesse de votre site web est d’exploiter correctement la mise en cache du navigateur.

Dans cet article, nous allons voir comment exploiter la mise en cache du navigateur et vous aider à corriger les avertissements de mise en cache du navigateur que vous avez rencontrés en testant les performances de votre site.

Qu’est-ce que la mise en cache des navigateurs – et pourquoi en avons-nous besoin ?

Le principe de la mise en cache est de “sauvegarder” une version actualisée de votre site web pour permettre aux visiteurs d’y accéder plus rapidement.

Voici une idée générale de la manière dont cela fonctionne : Si vous êtes un artiste, la mise en cache représente la différence entre avoir une photographie de votre dessin à portée de main et devoir redessiner l’image chaque fois que votre ami demande à la voir. En effet, la photographie “se souvient” de ce qui a déjà été partagé et le conserve pour un affichage ultérieur.

En termes plus techniques, voici une brève description de ce qui se passe en coulisses lorsqu’un utilisateur accède à votre domaine dans son navigateur web :

  1. Le visiteur saisit votre URL.
  2. Son navigateur envoie une requête à votre serveur.
  3. Le serveur de votre site web rassemble toutes les données et les envoie au navigateur de l’utilisateur.
  4. Le navigateur affiche la page du site web.

C’est assez simple, n’est-ce pas ?

Mais les sites web modernes sont des choses compliquées à multiples facettes, avec tout ce qu’il faut pour fonctionner en même temps, du texte aux images en passant par les scripts et les feuilles de style. Et si vous êtes comme des millions de propriétaires de sites web qui s’appuient sur WordPress, tout cela est enveloppé dans une couche de code PHP avec de nombreux processus supplémentaires en cours d’exécution.

C’est pourquoi un site web WordPress sans mise en cache du navigateur peut prendre beaucoup de temps à charger. L’étape 3 ci-dessus peut prendre du temps lorsque le site doit envoyer des données pour chaque élément et script d’une page. La raison pour laquelle la plupart des pages web en ligne se chargent plus rapidement lors des visites suivantes est la mise en cache, où différents éléments de votre site web ont été sauvegardés localement pour un utilisateur, évitant au site de devoir servir chaque élément à partir de zéro à chaque fois.

Afin d’éviter un ralentissement indésirable pour les utilisateurs et une charge excessive sur votre serveur web, examinons rapidement la mise en cache du navigateur dans WordPress, ce qu’est l’erreur “Leverage Browser Caching” et comment la corriger.

Comment tirer parti de la mise en cache du navigateur

Si vous gérez un site web, vous devez savoir que la mise en cache du serveur fait référence au processus par lequel votre site web génère des pages web mises en cache pour votre site web. Il s’agit de la mise en cache côté serveur – la mise en cache côté navigateur est ce qui se passe lorsque les utilisateurs accèdent à votre site web dans leur navigateur.

C’est le revers de la même médaille. Lorsque vous exploitez la mise en cache du navigateur, vous donnez des instructions à votre serveur sur la durée pendant laquelle les ressources doivent être mises en cache dans les navigateurs de vos visiteurs.

En règle générale, pour tirer parti de la mise en cache du navigateur, vous devez définir des en-têtes HTTP afin de fixer des délais d’expiration appropriés pour les différents types de fichiers de votre site web. La manière dont vous procéderez dépendra du fait que votre serveur web fonctionne sous Nginx ou Apache, et que vous souhaitiez saisir le code vous-même ou utiliser un plugin WordPress.

Nous aborderons ci-dessous quelques-unes des méthodes les plus courantes pour configurer la mise en cache de votre navigateur.

Correction de l’effet de levier sur la mise en cache du navigateur

Que vous la mettiez en place pour la première fois ou que vous l’ayez déjà activée, la mise en cache du navigateur doit être optimisée pour fonctionner correctement. Lorsque vous testez les performances de votre site, vous obtenez généralement un avertissement de mise en cache du navigateur si vous n’avez pas établi de règles de mise en cache ou si les délais d’expiration sont trop courts.

En règle générale, les ressources statiques devraient expirer au bout d’un an, tandis que les éléments dynamiques devraient expirer au bout d’une semaine, voire moins. Les éléments mis en cache sont sauvegardés localement pour un utilisateur dans son navigateur web, mais ils ne sont pas sauvegardés pour toujours – après un délai d’expiration spécifié, ces différents éléments doivent être rechargés par un utilisateur à partir du serveur de votre site. Le contenu réellement statique comprend des éléments tels que les logos ou les styles CSS globaux, mais pratiquement tout le reste est dynamique et doit être mis à jour plus fréquemment.

Si vous avez déjà fait passer votre site WordPress par PageSpeed Insights de Google, ou par des outils de test de sites web populaires comme Pingdom et GTMetrix, vous avez peut-être déjà rencontré l’avertissement “leverage browser caching” (mise en cache du navigateur).

Il se présente comme suit dans l’outil PageSpeed de Google :
Avertissement de Google PageSpeed Insights concernant l’exploitation de la mise en cache du navigateur

a warning from google pagespeed insights on levera

La meilleure façon d’y remédier dépend de votre site web et de votre hébergeur, mais nous allons passer en revue différentes méthodes pour vous aider à tirer parti de la mise en cache du navigateur.

Utiliser des plugins pour tirer parti de la mise en cache du navigateur

Si vous exploitez un site web WordPress, vous pourrez peut-être sauter les étapes de codage plus complexes décrites plus loin dans cet article et vous contenter d’utiliser des plugins WordPress de qualité pour tirer parti de la mise en cache du navigateur.

W3 Total Cache

L’un des meilleurs plugins pour une mise en cache efficace du navigateur est W3 Total Cache. Il s’agit d’un plugin gratuit qui permet d’améliorer le référencement et l’expérience utilisateur de votre site en réduisant les temps de chargement. Il s’agit d’un cadre de mise en cache complet, ce qui signifie que vous pouvez gérer pratiquement tous les aspects de la mise en cache à partir d’un seul endroit !

backend settings of w total cache x

Alors, êtes-vous prêt à utiliser W3 Total Cache pour tirer parti de la mise en cache du navigateur ? Voici comment procéder !

Étape 1 : Activer la mise en cache du navigateur

Après avoir installé et activé W3 Total Cache (W3TC), vous pouvez commencer à modifier les paramètres pour tirer parti de la mise en cache du navigateur.

Tout d’abord, allez dans les Réglages généraux sous l’onglet Performance dans la barre latérale de votre tableau de bord WordPress. C’est là que vous pourrez ajuster les réglages.

Descendez jusqu’à la section Cache du navigateur et assurez-vous que la case Activer le cache du navigateur est cochée.

browser caching settings on w total cache x

Étape 2 : Spécifier la politique globale de mise en cache du navigateur

Après avoir activé la mise en cache du navigateur, cliquez sur Cache du navigateur dans les options du plugin pour accéder à cette page. Vous y trouverez une liste de paramètres pour la politique globale de mise en cache du navigateur que vous pouvez personnaliser.

Les cases à cocher comprennent plusieurs options permettant d’exploiter la mise en cache du navigateur sur votre site web. Il est conseillé de cocher toutes les cases du haut.

w total cache leveraging browser settings x
  • Définir l’en-tête expires – L’en-tête expires est un délai d’expiration d’une entité du web, qu’il s’agisse d’un document HTML, d’un fichier CSS, d’une image, etc. La longueur spécifiée dans cet en-tête détermine la durée de validité du cache de l’entité.
  • Définir l’en-tête de contrôle du cache – L’en-tête de contrôle du cache est un en-tête supplémentaire destiné à encourager la mise en cache par le navigateur.
  • Définir la balise d’entité (eTag) – La balise eTag est une balise de validation qui rend la mise en cache du navigateur plus efficace.
  • Définir l’en-tête W3 Total Cache – Il s’agit d’un en-tête défini par W3TC pour faciliter l’identification des fichiers optimisés.
  • Activer la compression HTTP (gzip) – La compression Gzip réduit le temps de téléchargement des fichiers texte.

Ces paramètres globaux de mise en cache du navigateur étant activés, vous pouvez maintenant ajuster manuellement les en-têtes appropriés pour votre site.

Étape 3 : Spécifier les en-têtes de cache

Comme vous le verrez dans les sections Apache et Nginx de ce billet, une étape importante pour tirer parti de la mise en cache du navigateur consiste à spécifier les en-têtes de cache. Plus précisément, vous devez indiquer aux navigateurs des utilisateurs combien de temps ils doivent conserver les éléments mis en cache avant qu’ils n’expirent à l’aide de commandes spécialisées.

css and js settings on w total cache x

Vous pouvez modifier la durée de vie des en-têtes pour les types de fichiers suivants :

  • Fichiers CSS et JS
  • Fichiers HTML et XML
  • Fichiers médias et autres

La durée de vie est mesurée en secondes. Par exemple, pour les fichiers CSS et JS, vous devriez viser l’équivalent de deux semaines, soit 604800 secondes.

En fin de compte, la durée de mise en cache des différents éléments dépend de vous. Il s’agit de tester ce qui fonctionne le mieux.

Vous pouvez utiliser le mode de prévisualisation intégré de W3 Total Cache pour tester les modifications avant de les déployer, que vous trouverez dans les Paramètres généraux.

w total cache general settings x

Leverage Browser Caching (mise en cache du navigateur)

Oui, il existe un plugin WordPress pour la mise en cache du navigateur qui s’appelle littéralement “Leverage Browser Caching“. Il s’agit d’un outil open source que vous pouvez télécharger ici.

leverage browser caching plugin from wordpress org x

Pourquoi choisir ce plugin ? Si vous n’êtes pas intéressé par l’installation d’un plugin de mise en cache complet comme W3 Total Cache, le plugin Leverage Browser Caching est une option qui se concentre sur cette activité spécifique. Si tout ce que vous recherchez est un moyen de corriger l’erreur de mise en cache du navigateur, c’est peut-être tout ce dont vous avez besoin.

Il est également très simple : lorsque vous l’activez, il commence à fonctionner immédiatement, et vous pouvez le désactiver pour l’arrêter également.

La méthode consiste à ajouter directement le code de mise en cache du navigateur dans le fichier .htaccess de votre serveur Apache (voir ci-dessous pour apprendre à le faire manuellement).

Code (Apache) pour tirer parti de la mise en cache du navigateur

Si vous préférez vous salir les mains, vous pouvez vous passer complètement des plugins de mise en cache de WordPress et entrer du code vous-même.

Les serveurs web fonctionnent généralement avec Apache ou Nginx. Comment savoir lequel utilise le vôtre ?

Si votre site dispose d’un fichier .htaccess, vous savez que vous devrez suivre les instructions du code Apache. Voici comment exploiter la mise en cache du navigateur pour votre serveur Apache à l’aide d’un code personnalisé.

Une fois que vous avez vérifié que votre serveur fonctionne sous Apache, connectez-vous à votre cPanel ou utilisez une application FTP pour accéder à votre serveur.

wordpress file manager on cpanel x

Localisez maintenant votre fichier .htaccess. Pour ce faire, vous devrez peut-être afficher les fichiers cachés (dotfiles), car le fichier .htaccess peut être caché par défaut.

Votre fichier .htaccess devrait ressembler à l’image ci-dessous. Gardez à l’esprit que vous pouvez généralement le modifier directement sur le serveur, ou que vous pouvez le télécharger et l’ouvrir dans un simple éditeur de texte.
Fichier Htaccess

word image

N’oubliez pas que vous disposez de plusieurs options pour définir les règles de mise en cache du navigateur : Les en-têtes Cache-Control ou les en-têtes Expire.

Techniquement, vous pouvez utiliser les deux en même temps, mais ce n’est pas obligatoire. Si vous ne savez pas lequel choisir, Cache-Control est plus récent et généralement recommandé – mais certains outils de test de vitesse comme GTmetrix peuvent toujours vérifier les en-têtes Expires.

Voici comment définir les deux types d’en-têtes Apache.

En-têtes “Cache-Control” d’Apache

Une fois que vous avez ouvert votre fichier .htaccess, vous devez ajouter l’extrait de code suivant au début de votre fichier .htaccess :

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Comme pour l’en-tête Cache-Control, vous pouvez ajouter ces en-têtes Expire en tête de votre fichier .htaccess. Voici le format de code à utiliser :

## EXPIRES CACHING ##
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Dès que vous avez défini ces en-têtes sur votre serveur, vous pouvez facilement les vérifier à partir des DevTools de Chrome. Il vous suffit de vous rendre dans l’onglet réseau, de cliquer sur une ressource et de vérifier le type d’en-tête que vous avez ajouté : Cache-Control, Expires, ou les deux.

Si c’est le cas, votre travail est terminé !

Code (Nginx) pour exploiter la mise en cache des navigateurs

Nginx (prononcé “Engine-x”) est un serveur web open source qui alimente plus de 400 millions de sites web.

Comme avec Apache, vous disposez de quelques options pour définir les délais d’expiration de la mise en cache des éléments statiques et dynamiques de votre site web.

En-têtes “Cache-Control” de Nginx

Ajoutez l’extrait suivant à l’intérieur de votre bloc serveur, qui est généralement situé dans /etc/nginx/site-enabled/default.

location ~* \.(png|jpg|jpeg|gif)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform";
}
location ~* \.(js|css|pdf|html|swf)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

En-têtes “Expires” de Nginx

Ajoutez l’extrait suivant à l’intérieur de votre bloc serveur, qui est généralement situé dans /etc/nginx/site-enabled/default.

location ~* \.(jpg|jpeg|gif|png)$ {
    expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
    expires 30d;
}

Avertissement concernant la mise en cache du navigateur par Google Analytics

Certains utilisateurs peuvent constater que, même si les en-têtes de mise en cache appropriés sont définis sur leur serveur d’origine, ils peuvent toujours rencontrer un avertissement de mise en cache du navigateur dans Google Analytics.

Il s’agit d’un problème distinct de ceux que vous avez déjà rencontrés. La bonne nouvelle, c’est que vous avez déjà effectué le travail le plus important pour votre site. La plupart des améliorations de la vitesse dues à la mise en cache devraient être là maintenant.

Toutefois, une erreur peut encore se produire à cause du script analytics.js de Google, hébergé sur les serveurs de Google. C’est ironique, mais Google Analytics utilise son propre fichier JavaScript pour communiquer avec votre site web, ce qui pourrait déclencher la même erreur de mise en cache s’il n’est pas installé localement.

google analytics warning on leveraging browser cac

Vous pouvez optimiser l’utilisation de Google Analytics sur votre site à l’aide d’un plugin gratuit appelé Complete Analytics Optimization Suite (CAOS). Le plugin CAOS est un moyen automatique d’héberger Google Analytics localement et de résoudre entièrement les erreurs de mise en cache du navigateur que vous rencontrez.

Ressources complémentaires :

Conclusion

Pourquoi est-il si important de tirer parti de la mise en cache du navigateur ?

En mettant en place des règles sur la manière dont les navigateurs doivent mettre en cache votre site web, vous pouvez améliorer considérablement la vitesse des pages de votre site. Il existe des plugins WordPress ou des extraits de code que vous pouvez facilement utiliser pour définir la durée pendant laquelle un navigateur doit mettre en cache les différents éléments de votre site.

Une fois ces règles en vigueur, votre site web devrait automatiquement se charger plus rapidement pour la plupart des utilisateurs, en particulier lors de visites répétées. Pour tester l’efficacité de votre mise en cache sur la vitesse des pages, vous pouvez toujours vous tourner vers un outil gratuit comme PageSpeed Insights de Google, ou vers une option payante comme GTmetrix.

Bien que la vitesse des pages ne soit pas la condition sine qua non du classement ou de l’expérience utilisateur, elle fait une énorme différence – et la bonne nouvelle est qu’il ne faut pas beaucoup de temps pour activer correctement la mise en cache du navigateur pour votre site WordPress.

Avez-vous des questions sur la mise en cache du navigateur, les meilleurs plugins de mise en cache ou l’amélioration de la vitesse de votre site ? N’hésitez pas à nous en faire part dans les commentaires ci-dessous !

Partager cet Article :
Newsletter
Recevez des astuces et des ressources gratuites directement dans votre boîte de réception.
Derniers Articles
☰ Navigation Rapide
0
J'adorerais vos pensées, veuillez commenter.x