Comment tirer parti du cache du navigateur dans WordPress

Un navigateur Web comme Chrome stocke les fichiers statiques et les met en cache lorsque vous visitez un site Web pour la première fois. Ces fichiers stockés sont généralement des fichiers statiques tels que satellite, javascript et fichiers CSS. Nous l'appelons cache du navigateur car il est stocké dans la mémoire du navigateur, sur votre ordinateur.

Si vous exécutez un test de vitesse de votre WordPress blog, vous pourriez trouver une recommandation disant :

« Tirez parti de la mise en cache du navigateur ».

C'est une suggestion courante donnée par de nombreux outils de test de vitesse.

La capture d'écran ci-dessus provient de GTmetrix. Pour la recommandation "exploiter le cache du navigateur", il a donné au blog 87 notes.

Lorsque vous résolvez ce problème, vous constatez une amélioration des scores de vitesse de votre page. La mise en cache du navigateur est essentielle pour faites en sorte que votre site Web se charge rapidement.

Dans cet article, laissez-moi vous montrer comment tirer parti de la mise en cache du navigateur sur votre serveur en quelques étapes.

1. Utilisation du plugin WordPress W3 Total Cache

Si vous êtes sur WordPress, les choses seraient simples car il vous suffit d'installer un plugin appelé Cache total W3 (W3TC). C'est un plugin de cache avancé et il est livré avec les fonctionnalités dont nous avons besoin.

Étape 1 : Activer la fonctionnalité de cache du navigateur dans les paramètres W3TC

Accédez aux paramètres généraux du W3TC. Vous y trouverez la case à cocher "Cache du navigateur". Activez-le pour activer la mise en cache générale du navigateur.

Étape 2 : Activer l'option de cache spécifique

Une fois que vous avez activé le cache du navigateur, les paramètres correspondants deviendront actifs. Accédez aux paramètres de cache du navigateur pour activer des fonctions de cache spécifiques.

Étape 3 : Enregistrer et purger le cache

Pour que vos paramètres fonctionnent, vous devrez les enregistrer. Cliquez sur le bouton enregistrer tous les paramètres à la fin du paramètre. Cliquez ensuite sur purger tout le cache pour mettre vos paramètres en ligne sur votre site.

Testez votre site maintenant et vous ne devriez plus recevoir l'avertissement « exploiter le cache du navigateur ».

2. Utilisation du fichier .htaccess dans le serveur Apache

⛔Attention Ne modifiez pas votre fichier .htaccess si vous ne le connaissez pas. Demande à ton hébergeur le faire pour vous. ".htaccess" est un fichier sensible et il pourrait casser votre site si vous mettez du code de manière incorrecte.

Le serveur Apache a un fichier nommé .htaccess. Ce fichier gère la requête du serveur et contrôle les dossiers et les requêtes du répertoire.

Pour activer le cache du navigateur et en tirer parti si vous êtes sur un serveur Apache, copiez et collez ce code en haut ou à la fin :

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##

Ce code garantit que vos fichiers statiques contenant des images CSS et javascript seront mis en cache dans les navigateurs pendant longtemps. Vous trouverez votre fichier .htaccess dans le dossier racine de votre serveur. Regardez l'image ci-dessus pour référence.

3. Utilisation de l'en-tête Cache-Control dans le serveur Nginx

Exemple de configuration Nginx

Si vous hébergez votre blog sur un serveur Nginx, vous ne trouverez pas de fichier .htaccess à la racine de votre serveur. C'est parce que Nginx n'utilise pas .htaccess pour gérer les requêtes. Vous pouvez en savoir plus sur pourquoi il n'y a pas de .htaccess dans Nginx.

Copiez et collez le code ci-dessous dans l'emplacement de configuration de votre serveur ou dans le bloc racine du serveur.

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

Et ensuite copier/coller ceci :

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

⛔Attention Si vous ne savez pas où coller ce code, demandez à votre hôte. Confirmez que vous êtes sur le serveur Nginx et continuez uniquement si vous savez comment localiser et modifier le fichier de configuration sur votre serveur.

Il reste encore un moyen facile…

En utilisant un CDN

Cette méthode est la plus simple pour résoudre cette erreur de mise en cache. UNE Réseau de distribution de contenu (CDN) gère le cache et les requêtes HTTP plus rapidement afin que votre site Web fonctionne plus rapidement, peu importe d'où il est accessible.

En utilisant simplement un CDN, vous pouvez améliorer la vitesse de chargement de votre site Web drastiquement. De plus, il gère la meilleur cache et le navigateur demande automatiquement les fonctions.

Je recommande d'utiliser KeyCDN. Ils sont rapides et économiques.

C'est tout. Vous aimeriez également lire sur comment corriger l'erreur de redirection et d'actualisation wp-admin. Lire comment réparer lorsque le menu mobile réactif de WordPress ne fonctionne pas.

Faites-moi savoir à quel point vous vous êtes amélioré en utilisant ce guide.

Partager sur: