Mise en cache du navigateur WordPress

Accélérez considérablement votre site Web WordPress grâce à l'utilisation de la mise en cache du navigateur, également connue sous le nom de mise en cache des expirations .

De nombreux fournisseurs d'optimisation de vitesse et de tests appelleront cela " Cache du navigateur ", " Leverage Browser Caching ", " Expires Headers ", " Cache Headers ", " Cache-Control " et " Web Cache ". Comme indiqué par Google PageSpeed ​​Insights, GTMetrix et MaxCDN suivent ce guide pour le configurer correctement.

Qu'est-ce que la mise en cache du navigateur ?

La mise en cache du navigateur est la méthode par laquelle votre serveur Web indique au navigateur de stocker une page ou des ressources spécifiques pendant une certaine période de temps afin qu'elles n'aient pas à être téléchargées depuis le serveur à chaque fois que des pages sont chargées. Cela peut mettre en cache une page entière et/ou des ressources telles que JavaScript, CSS, des images (jpeg, png, gif, etc.) et bien plus encore.

Votre site Web WordPress se chargera normalement pour chaque utilisateur la première fois, mais par la suite, il sera sensiblement plus rapide lorsqu'il parcourra les pages et effectuera des actions. Les ressources sont stockées dans le navigateur et, par conséquent, elles sont chargées localement au lieu d'être téléchargées à nouveau.

L'importance de la mise en cache du navigateur

En fin de compte, le but et l'importance de la mise en cache du navigateur sont d' accélérer votre site Web WordPress pour vos utilisateurs afin qu'ils aient une expérience plus agréable. Cela pourrait entraîner une augmentation du trafic, de meilleurs classements de recherche et même des taux de conversion améliorés sur ce que vous essayez d'atteindre.

Comme effet bonus supplémentaire, la charge est retirée de votre serveur Web en ne téléchargeant pas de ressources sur chaque chargement de page pour le même visiteur et cela économise également de la bande passante sur votre serveur Web.

Le cache Web fournit une vitesse mutuelle au serveur et à l'utilisateur

Implémentation du cache du navigateur

La configuration de la mise en cache du navigateur sur votre site Web WordPress est en fait très simple et rapide, mais la configuration peut différer en fonction de votre configuration et du serveur Web que vous utilisez. Par défaut, la configuration la plus courante est WordPress s'exécutant sur un serveur Web Apache, mais il existe d'autres serveurs Web populaires disponibles tels que Nginx, IIS, etc.

L'utilisation d'un plug-in de mise en cache de navigateur WordPress Leverage simplifie la mise en œuvre.

Pour le rendre encore plus facile, il existe plusieurs plugins de mise en cache du navigateur WordPress disponibles. Nous avons utilisé, testé et recommandé le plugin WordPress Leverage Browser Caching Ninjas. C'est un plugin d'installation et d'activation qui fait le reste pour vous, aussi simple que cela.

Cache du navigateur Apache

Apache utilise un fichier .htaccess pour la mise en cache du navigateur. Il devrait y avoir un fichier .htaccess à la racine de votre installation WordPress et s'il n'y en a pas, vous pouvez en créer un et y mettre les lignes de code suivantes, tout en haut :

## EXPIRES CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Nginx tire parti de la mise en cache du navigateur

Si vous exécutez un serveur Nginx (En-gine-ex), la configuration est différente d'Apache ci-dessus. Vous voudrez ajouter le code suivant à votre fichier de configuration vhost, généralement situé dans /etc/nginx/sites-enabled/default . Ajoutez ce qui suit à votre bloc serveur :

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

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

Le module mod_expire est utilisé par Lighttpd pour contrôler les en-têtes qui fournissent la mise en cache du contenu par le navigateur. Cela peut entrer dans la configuration du noyau de Lighttpd en conséquence.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Mise en cache du navigateur Microsoft IIS

La configuration de la mise en cache du navigateur pour IIS (Internet Information Services) est très simple.

Sélectionnez-le dans l'interface Administration Tools et affichez ses propriétés. Après avoir sélectionné l'onglet En HTTP Headers , vous devriez voir deux zones intéressantes ; Enable Content Expiration et Custom HTTP headers . Le premier doit être explicite et le second peut être utilisé pour appliquer les en-têtes Cache-Control.

Technicité de la mise en cache du navigateur

La mise en cache du navigateur est réalisée par le serveur Web en envoyant des en-têtes HTTP au navigateur avant l'envoi du code HTML. Ils indiquent au navigateur certaines choses sur le contenu HTML qui est sur le point de suivre, telles que le type de contenu, la date actuelle, les détails du serveur, le contrôle et l'expiration du cache, etc.

Les en-têtes Cache-Control , Expires et Etag sont ceux qui donnent les instructions de cache du navigateur. Ces en-têtes sont automatiquement créés par les méthodes mentionnées ci-dessus pour tirer parti de la mise en cache du navigateur dans Apache, Nginx et IIS en conséquence, vous n'avez donc pas besoin d'entrer dans les détails, sauf si vous êtes intéressé.

En-tête de contrôle de cache

Cache-Control donne au navigateur certaines instructions telles que la durée pendant laquelle le contenu est considéré comme « frais », le statut public/privé de la mise en cache, la validation, etc.

Cache-Control : max-age=3600, public

(https://gist.github.com/tribulant/6309926734d3c127064c)

En-tête d'expiration

L'en-tête Expires fournit une date HTTP uniquement jusqu'à laquelle la ressource doit et peut être mise en cache jusqu'à.

Expire : sam. 28 nov. 2015 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

En-tête d'étiquette

Etag a été introduit dans HTTP 1.1 en tant que méthode de validation avec un jeton envoyé par le serveur et utilisé par le navigateur pour vérifier si la représentation du contenu a changé. Jusqu'à Etag , les navigateurs utilisaient principalement l'en-tête Last-Modified , mais Etag est plus pertinent maintenant. La plupart des serveurs Web généreront de toute façon les en-têtes Last-Modified et Etag .

Étiquette : "pub1259380237;gz"

(https://gist.github.com/tribulant/2b542d76410bc047be00)

L'essentiel de la mise en cache du navigateur

La mise en cache du navigateur est mutuellement bénéfique pour vous (votre serveur Web) et vos utilisateurs en offrant vitesse et performances aux deux parties.

Avec la mise en cache du navigateur, soyez fort et agressif, votre serveur Web est suffisamment intelligent pour savoir quand les ressources ont changé afin de générer des en-têtes mis à jour pour que les utilisateurs obtiennent du nouveau contenu au besoin. Ne paniquez pas que vos utilisateurs soient bloqués sur d'anciens contenus, ce n'est pas le cas.

La mise en cache du navigateur Web est fortement recommandée pour les sites Web WordPress et, en fin de compte, le plugin WordPress Leverage Browser Caching Ninjas recommandé fera l'affaire. Il suffit d'installer, d'activer et le tour est joué !