Plugin WordPress Super Cache, nous utilisons le cache du navigateur. Activer le cache du navigateur côté utilisateur Mise en cache des scripts externes

👁9 325 vues.

Dans cet article, nous continuons à examiner comment accélérer le chargement d’un site Web. Nous en avons discuté plus tôt. Aujourd'hui, nous allons apprendre comment activer le cache du navigateur côté utilisateur à l'aide du fichier .htaccess.

Pourquoi activer le cache du navigateur côté utilisateur

Souvent, lors de la création d’un nouveau site Web, les programmeurs ne prêtent pas beaucoup d’attention à la vitesse à laquelle le site Web se charge dans le navigateur. Surtout si ce point n’était pas mis en avant dans les Termes de Référence pour le développement du site. Et après la sortie d'une nouvelle création, un spécialiste du web impliqué dans le développement et la promotion de ce projet peut observer un tableau très triste en analysant la vitesse de chargement du site dans PageSpeed ​​​​Insights de Google.

Voici une liste non exhaustive des problèmes que l’on peut rencontrer et qui ralentissent la vitesse de chargement du site côté navigateur de l’utilisateur :

Certains lecteurs peuvent se demander pourquoi exactement devez-vous activer ce cache et accélérer la vitesse de chargement du site ? Après tout, le site ne fonctionne pas mal de toute façon.

Il y a à cela au moins deux raisons :

  1. Si le site est long à charger, alors l'utilisateur n'attendra peut-être pas vos super effets, destinés par le concepteur à attirer l'attention, mais fermera simplement votre œuvre d'art et se rendra simplement sur le site d'un concurrent, peut-être moins coloré, mais plus rapide et plus réactif. Après tout, aucun de nous n’aime attendre longtemps. 🙂
  2. Plus la vitesse de chargement du site est longue, plus elle sera renvoyée par les moteurs de recherche pour les requêtes clés, par rapport aux sites de vos concurrents. Et cela constitue déjà une menace importante pour le développement de votre entreprise.

Comment activer la mise en cache des fichiers dans le navigateur côté utilisateur

Si votre projet est développé sur le populaire CMS WordPress, il existe de nombreux plugins qui peuvent résoudre le problème de mise en cache. Les plus populaires d'entre eux sont W3 Total Cache, WP Super Cache, Hyper Cache. Mais dans cet article, je propose d'envisager un moyen plus fiable, à mon avis, d'activer la mise en cache via le fichier .htaccess directement sur l'hébergement.

note, que les méthodes proposées ne fonctionneront que si le logiciel Apache est installé sur le serveur de votre hébergeur.

Avant d'apporter des modifications dans le fichier .htaccess, assurez-vous d'en faire une copie de sauvegarde sur votre ordinateur afin de pouvoir la restaurer en cas de problème.

Afin d'activer le cache du navigateur côté utilisateur, Il suffit d'utiliser l'une des méthodes ci-dessous. L’utilisation des deux méthodes en même temps n’est pas conseillée et peut entraîner une perturbation de votre site.

Activation de la mise en cache du navigateur côté utilisateur à l'aide du module mod_headers

Pour activer la fonction de mise en cache, le code ci-dessous doit être inséré dans le fichier .htaccess, qui se trouve dans le répertoire racine de votre site. Pour éviter les erreurs, vous devez insérer le code avant la ligne #END WordPress :

# Tous les fichiers html et htm seront stockés dans le cache du navigateur pendant 12 heures En-tête défini Cache-Control "max-age=43200"# Tous les fichiers CSS, Javascript et texte seront stockés dans le cache du navigateur pendant 7 jours En-tête défini Cache-Control "max-age=604800"# Tous les fichiers flash et images seront stockés dans le cache du navigateur pendant 31 jours En-tête défini Cache-Control "max-age=2592000"# Désactivez la mise en cache de PHP et d'autres fichiers de service En-tête non défini Cache-Control

# Activation du cache dans les navigateurs des visiteurs du site

< ifModule mod_headers . c >

# Tous les fichiers html et htm seront stockés dans le cache du navigateur pendant 12 heures

< FilesMatch "\.(html|htm)$" >

Ensemble d'en-tête Cache - Contrôle "max-age=43200"

< / FilesMatch >

# Tous les fichiers CSS, Javascript et texte seront stockés dans le cache du navigateur pendant 7 jours

< FilesMatch "\.(js|css|txt)$" >

Ensemble d'en-tête Cache - Contrôle "max-age=604800"

< / FilesMatch >

# Tous les fichiers flash et images seront stockés dans le cache du navigateur pendant 31 jours

< FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">

Ensemble d'en-tête Cache - Contrôle "max-age=2592000"

< / FilesMatch >

# Désactivez la mise en cache de PHP et d'autres fichiers de service

< FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">

Cache d'en-tête non défini - Contrôle

< / FilesMatch >

< / IfModule >

Je ne décrirai pas ce que signifient ces directives ou d’autres. Plus de détails sur leurs valeurs peuvent être trouvés sur le site Web de documentation officiel d'Apache.

Activation de la mise en cache du navigateur côté utilisateur à l'aide du module mod_expires

Pour activer la mise en cache dans le navigateur côté utilisateur à l'aide du module mod_expires, écrivez le code suivant dans le fichier .htaccess :

ExpiresActive On #le cache par défaut est de 30 secondes ExpiresDefault "accès plus 30 secondes" # Activer la mise en cache des images et le flash pendant 1 mois ExpiresByType image/x-icon "accès plus 1 mois" ExpiresByType image/jpeg "accès plus 4 semaines" ExpiresByType image/ png "accès plus 30 jours" ExpiresByType image/gif "accès plus 43829 minutes" ExpiresByType application/x-shockwave-flash "accès plus 2592000 secondes" # Activer la mise en cache des fichiers CSS, javascript et texte pendant 7 jours ExpiresByType text/css "accès plus 604800 secondes" ExpiresByType text/javascript "accès plus 604800 secondes" ExpiresByType application/javascript "accès plus 604800 secondes" ExpiresByType application/x-javascript "accès plus 604800 secondes" # Activer la mise en cache des fichiers html et htm pendant 12 heures ExpiresByType text/html " accès plus 43 200 secondes " # Activer la mise en cache des fichiers XML pendant 10 minutes ExpiresByType application/xhtml+xml " accès plus 600 secondes "

< ifModule mod_expires . c >

Expire actif le

#le cache par défaut est de 30 secondes

ExpiresDefault "accès plus 30 secondes"

# Activer la mise en cache des images et le flash pendant 1 mois

Image ExpiresByType / x - icône "accès plus 1 mois"

ExpiresByType image / jpeg "accès plus 4 semaines"

ExpiresByType image / png "accès plus 30 jours"

ExpiresByType image / gif "accès plus 43829 minutes"

Application ExpiresByType / x - shockwave - flash "accès plus 2592000 secondes"

# Activer la mise en cache des fichiers CSS, Javascript et texte pendant 7 jours

ExpiresByType texte/css "accès plus 604 800 secondes"

ExpiresByType texte/javascript "accès plus 604 800 secondes"

Application ExpiresByType/javascript "accès plus 604 800 secondes"

L'instruction ne fonctionne que si Apache traite des fichiers statiques (installés en tant qu'interface). Si nginx est devant, les mêmes actions doivent être effectuées d'une manière complètement différente.

Tout d'abord, quelques mots sur le sujet : pourquoi la mise en cache des ressources du site Web (images, CSS, fichiers HTML, archives et autres fichiers statiques) est-elle nécessaire ?

Chaque fois qu'un visiteur ouvre votre site, non seulement le code html de la page est téléchargé, mais également tous les fichiers d'accompagnement nécessaires à la conception de la page (images, styles CSS, scripts js, etc.).
Du coup, une ouverture d'une page de fichier ne représente pas une requête au serveur, mais de dix à des centaines ! Chacune de ces demandes représente non seulement une charge sur le serveur (ce qui est important), mais également du temps supplémentaire pour l'utilisateur pour charger la page (ce qui est important en tant qu'indicateur de la qualité du site et de la facilité de travail de l'utilisateur avec lui) .

Par exemple, le service de vérification de site populaire de Google PageSpeed ​​​​Insights écrit toujours un avertissement à ce sujet :

Utilisez le cache de votre navigateur
En spécifiant une date ou une date d'expiration pour les ressources statiques dans les en-têtes HTTP, le navigateur chargera les ressources précédemment récupérées à partir du disque local plutôt que depuis Internet.
Utilisez le cache de votre navigateur pour les ressources suivantes :

//— liste des fichiers problématiques —//

L'activation de la mise en cache réduit non seulement la charge sur le serveur (presque toutes les pages du site ont des éléments de conception en double, des scripts java, etc.) lorsque l'utilisateur visite à nouveau le site/la page, mais réduit également le temps de chargement des pages de son côté. Étant donné que le navigateur extrait les fichiers du cache presque à la vitesse de l'éclair, l'utilisateur a l'impression que la page s'est chargée presque à la vitesse de l'éclair !

Pour résoudre ce problème, créez un fichier dans le dossier du site avec le nom .htaccess(avec un point au début. C'est important !) et ajoutez-y ces règles. Si le fichier existe déjà, ajoutez à la fin de celui existant :

# mise en cache dans le navigateur côté utilisateur ExpiresActive On ExpiresDefault "accès 7 jours" ExpiresByType application/javascript "accès plus 1 an" ExpiresByType texte/javascript "accès plus 1 an" ExpiresByType texte/css "accès plus 1 an" ExpiresByType texte/html "accès plus 7 jours" ExpiresByType texte /x-javascript "accès 1 an" ExpiresByType image/gif "accès plus 1 an" ExpiresByType image/jpeg "accès plus 1 an" ExpiresByType image/png "accès plus 1 an" ExpiresByType image/jpg "accès plus 1 an" ExpiresByType image/x-icon "accès 1 an" ExpiresByType application/x-shockwave-flash "accès 1 an"# Contrôle du cache # 30 jours # 30 jours En-tête défini Cache-Control "max-age=2592000, public"# 2 jours En-tête défini Cache-Control "max-age=172800, public, must-revalidate"# Un jour En-tête défini Cache-Control "max-age=172800, privé, doit être revalidé" #Interdire l'envoi d'en-têtes HTTP Vary aux navigateurs de la famille MSIE BrowserMatch "MSIE" force sans variation BrowserMatch "Mozilla/4.(2)" force sans variation

Après cela, vous pouvez vérifier le résultat sur la page Google PageSpeed ​​​​Insights (si tout est correct - le message " Utilisez le cache de votre navigateur" sera marqué en vert et placé dans la section "Règles complétées : (plus de détails)")

Cela ne fonctionne pas, que dois-je faire ?

Si la mise en cache ne fonctionne pas, vous devez vérifier si les modules sont installés. Pour ce faire, vous devez créer un fichier dans le dossier du site test.php avec le code :

Si mod_expires ou mod_headers ne sont pas dans la liste, exécutez tour à tour les commandes suivantes dans la console du serveur (connectée) ( cela installera/activera mod_expires, mod_headers):

En-têtes A2enmod a2enmod expire le redémarrage du service Apache2

Si le site est sur un hébergement régulier, alors tout est plus compliqué. Contactez le support technique et découvrez pourquoi les modules ne sont pas installés et comment contourner ce problème. Puisqu'il peut y avoir de nombreuses raisons pour lesquelles l'hébergeur n'a pas installé les modules.

Pour vérifier la vitesse de votre site. Après analyse, il formule un certain nombre de recommandations d'optimisation. Et l'une de ces recommandations consiste à utiliser le cache du navigateur.

La mise en cache du navigateur est une chose très utile. Lors du chargement d'une page Web, le navigateur enregistre localement les principales ressources de celle-ci sur l'ordinateur : images, styles, scripts, etc. Et la prochaine fois que vous ouvrirez la même page, elle se chargera plusieurs fois plus rapidement, puisque le navigateur n'a pas besoin pour télécharger à nouveau les ressources du site - elles sont déjà sur votre ordinateur.

Mais la mise en cache présente également des inconvénients : si un fichier sur le serveur a changé, vous ne verrez probablement pas la nouvelle, mais l'ancienne version du fichier. Par exemple, un fichier nommé img01.jpg contenait l'image d'une voiture. Vous êtes allé sur le site, avez lu l'article et êtes parti. Mais pour une raison quelconque, l'administrateur du site a décidé que l'image de la voiture n'était pas appropriée et a décidé de la remplacer par une image d'un paysage. Mais le nom du fichier reste le même. Quelques jours plus tard, vous décidez de relire cet article. Lorsque vous êtes allé sur le site, vous aviez toujours la vieille photo : une voiture. En effet, le navigateur l'a mis en cache sous le nom img01.jpg. Et pour que vous puissiez voir une nouvelle image avec un paysage, vous devez réinitialiser le cache de votre navigateur à l'aide d'une combinaison de touches Ctrl+F5.

Configuration de htaccess

Passons maintenant des digressions lyriques au sujet principal de l'article. Afin d'activer la mise en cache du navigateur, il doit y avoir un fichier sur votre serveur à la racine du site .htaccess. S'il n'y en a pas, vous devez en créer un.

Après quoi il contient les directives suivantes :

ExpiresActive sur ExpiresByType image/jpeg "accès plus 7 jours" ExpiresByType image/gif "accès plus 7 jours" ExpiresByType image/png "accès plus 7 jours" ExpirePar défaut "accès plus 1 an" ExpiresByType texte/css "accès plus 1 an" ExpiresByType application/javascript "accès plus 1 an"

Après avoir rédigé ces règles, Google Page Speed ​​​​cochera la case indiquant que la mise en cache est activée et donnera des points supplémentaires à votre site.

P.S. Je voudrais noter une chose selon laquelle la mise en cache, malheureusement, ne s'applique pas aux ressources externes, telles que les scripts Yandex.Metrica et Google.Analytics.

"" pour optimiser votre site en vous basant sur les conseils de l'outil PageSpeed ​​​​Insights de Google. Chaque propriétaire de site Web a rencontré le problème de la difficulté à mettre en cache les scripts js de sites tiers.

Ce n'est pas un indicateur si important pour l'optimisation, en effet, les éléments CSS et JS sont transférés de l'en-tête du site vers le pied de page, d'ailleurs, si vous regardez les ressources Google, ils ont des problèmes sur ce point :)

Si vous souhaitez toujours optimiser votre site Web ou vos clients en mettant en cache des scripts tiers, par exemple. Si vous observez un beau chiffre sur le compteur de l'analyseur, suivez simplement les étapes ci-dessous, ce qui prendra quelques minutes.

Cache du navigateur de ses éléments

Créer un cache pour différents scripts, exemple tiré du blog Devaka ru (au moment de la rédaction)
Par exemple:

/assets/copyright.min.js (aucune date d'expiration spécifiée)
/assets/i/566.jpg (aucune date d'expiration spécifiée)
/assets/i/icons.png (aucune date d'expiration spécifiée)
/i/postcomm-left.png (aucune date d'expiration spécifiée)
/i/postcomm-right.png (aucune date d'expiration spécifiée)



Pour résoudre le premier problème, rendez-vous dans le fichier .htaccess, qui se trouve à la racine du site et insérez ce code tout en bas :

# compression de texte, html, javascript, css, xml : AddOutputFilterByType DEFLATE texte/texte html/texte brut/application xml/application xml/xhtml+texte xml/texte css/application javascript/application javascript/x-javascript# cache du navigateur ExpiresActive On #le cache par défaut est de 5 secondes ExpiresDefault "accès plus 1 jours" # Activer la mise en cache des images et le flash pendant un mois ExpiresByType image/x-icon "accès plus 1 mois" ExpiresByType image/jpeg "accès plus 4 semaines" ExpiresByType image/png "accès plus 30 jours" ExpiresByType image/gif "accès plus 43829 minutes" ExpiresByType application/x-shockwave-flash "accès plus 2592000 secondes" # Activer la mise en cache des fichiers CSS, javascript et texte pendant une semaine ExpiresByType text/css "accès plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" # Activer la mise en cache des fichiers html et htm pendant une journée ExpiresByType text/html "access plus 43200 seconds" # Activer la mise en cache des fichiers XML pendant dix minutes ExpiresByType application/xhtml+xml "access plus 600 seconds" # Polices de site non standard ExpiresByType application/x-font-ttf "access plus 1 mois" ExpiresByType font/ opentype "accès plus 1 mois" ExpiresByType application/x-font-woff "accès plus 1 mois" ExpiresByType image/svg+xml "accès plus 1 mois" ExpiresByType application/vnd.ms-fontobject "accès plus 1 mois"

Exemples de scripts tiers

Si vous avez tout fait correctement lors de la première étape, vous devriez voir quelque chose comme ceci :

Utilisez le cache de votre navigateur pour les ressources suivantes


Bien sûr, vous ne disposez peut-être que de quelques URL pour les métriques et les analyses, par exemple, mais ce n'est pas si important, les instructions de correction sont les mêmes pour tout le monde.

Cache d'éléments tiers

Initialement, l'article était censé être consacré uniquement à ces points, mais sentant qu'il y aurait de nombreuses questions, quelques points supplémentaires ont été ajoutés.

Il n'y a aucun moyen d'influencer le temps de cache d'une ressource tierce, mais vous pouvez le faire sur votre projet web La solution la plus correcte dans cette situation consiste à télécharger automatiquement les derniers scripts pour les métriques, les analyses, etc. sur votre site Web en utilisant cron (script présent)

Prenons les choses dans l'ordre maintenant !
Étape 1. Copiez la liste de tous les scripts pointés par Google PageSpeed ​​​​dans un bloc-notes ou directement depuis le navigateur.
Étape 2. Créez un fichier sur votre hébergement avec l'extension php et collez-y le code suivant :

Attention! Vous n'êtes pas autorisé à afficher le texte masqué.

Il y en a 3 dans le code par exemple, mais vous pouvez créer autant de points que nécessaire, il suffit de copier et d'ajouter ci-dessous ou de supprimer ceux qui ne sont pas nécessaires.


Dans cette ligne on change la 3ème valeur :
Utiliser le cache du navigateur pour Google PageSpeed
1. Le script que nous téléchargerons sur notre site Web

Attention! Vous n'êtes pas autorisé à afficher le texte masqué.

2. Chemin où enregistrer le fichier :

Chemin réel("./js")

Dans cet exemple, il s'agit du dossier js, c'est-à-dire le chemin exact sera www.site/js/ (vous devez créer le dossier vous-même et définir les autorisations d'écriture CHMOD pour celui-ci)

3. Le nom du script, s'il a l'extension .js, alors nous l'écrivons avec, s'il est sans ou avec autre chose, alors nous faisons tout comme dans l'exemple ci-dessus. Veuillez faire attention à ce qu'il n'y ait pas de fichiers portant le même nom.

Étape 3. Téléchargez le fichier modifié sur le serveur

Étape 4. Placez le fichier sur cron pour mettre à jour automatiquement les fichiers

Afin d'éviter un travail incorrect avec les services, s'ils apportent des modifications aux scripts, cron se connectera automatiquement et les mettra à jour sur son serveur.

Accédez à votre panneau d'hébergement et sélectionnez l'onglet CRON et entrez la commande, et spécifiez également l'heure une fois par heure/jour ou à toute autre heure.

Wget -q -O - /dev/null http://www..php >/dev/null 2>&1

N'oubliez pas de changer l'URL et peut-être que la syntaxe de vos commandes sera différente, regardez des exemples de commandes cron dans l'aide de l'hébergement ou contactez le support technique.

Étape 5. Modifiez le chemin vers JS dans le compteur ou le script

S'il y avait un chemin dans le compteur https://mc.yandex.ru/metrika/watch.js, remplacez-le par un chemin à l'intérieur du site, par exemple http://www..js

C'est tout, vous ne devriez désormais voir aucun message concernant la configuration du cache de votre navigateur dans la liste PageSpeed ​​​​Insights.

Téléchargez les instructions « activer le cache du navigateur pour Google PageSpeed ​​» dans l'archive Vous ne pouvez pas télécharger de fichiers depuis notre serveur
Nous présentons un article utile « Activer le cache du navigateur pour Google PageSpeed ​​» pour optimiser votre site sur les conseils d'un outil de Google PageSpeed ​​​​- tout le meilleur que nous ayons des forums, des hacks, des modules, des modèles.

Igor. Mise à jour : 21 novembre 2017.

Bonjour, chers lecteurs du site blog. Je continue la série d'articles relatifs aux mesures d'optimisation, et aujourd'hui il est temps de configurer l'utilisation du cache du navigateur à ces fins par les utilisateurs, ce qui est la prochaine étape pour accélérer le site.

Chaque action qui vous permettra de vous rapprocher de cet objectif sera un plus dans la promotion d'une ressource Web, et donc ne soyez pas trop paresseux pour au moins regarder les documents où j'ai donné des descriptions, ainsi que, qui vous aideront sans aucun doute dans mettre en œuvre la tâche globale.

Dans ce qui suit, je vais essayer de fournir des instructions claires sur la façon de configurer la mise en cache du navigateur en intégrant un code spécial dans le merveilleux fichier .htaccess. Certes, ce n'est pas pour tout le monde et ne peut pas toujours aider, mais nous en parlerons plus en détail ci-dessous.

Je pense que chacun de vous a une idée de ce qu'est la mise en cache, du moins en termes généraux. Juste au cas où, je vais vous expliquer brièvement. Disons qu'un lecteur ouvre une page de votre ressource dans une fenêtre de navigateur, dont tous les composants (contenu, styles, scripts, etc.) sont téléchargés depuis le serveur d'hébergement, ce qui prend un certain temps.

Supposons que nous ayons la possibilité de lancer un mécanisme qui nous permettra de sauvegarder des copies des éléments de la page directement dans le navigateur Web de l'utilisateur qui les visite. Ensuite, à chaque requête ultérieure, tous ces éléments seront extraits directement du cache du navigateur du visiteur (), c'est-à-dire d'un dossier spécial situé sur le disque dur de son ordinateur.

Le gain en vitesse de téléchargement sera évident. C’est l’algorithme que nous étudierons dans cet article. À propos, en plus du sujet, vous pouvez lire comment, en plus de l'accélération du site Web, vous pouvez réaliser, ce qui est très pertinent de nos jours.

Il y a quelques années, j'ai parlé de l'optimisation d'un de mes projets sur la base d'une analyse de Page Speed, réalisée via une extension (maintenant seul un service en ligne est disponible), qui donnait une image plus détaillée.

Ce qui est important est que, pour l’essentiel, le code proposé ci-dessous est tout à fait suffisant pour créer des conditions dans lesquelles Pagespeed ne fera plus aucune réclamation et, par conséquent, il garantira que les pages se chargent plus rapidement dans la mesure nécessaire.

Ainsi, sur la base de ce qui précède, nous devons assurer la sortie de l'un des en-têtes Last-Modified et ETag, ainsi que de l'une des paires Expires ou Cache-Control: max-age. Pour plus de clarté et pour élargir la gamme, envisageons différentes options.

Variations de code pour la gestion du cache à l'aide des en-têtes Last-Modified, Expires et Cache-Control

Si votre hébergement est déjà configuré pour afficher le même Last-Modified, alors la moitié du travail est fait (en passant, vérifiez la présence de cet en-tête important, en incluant dans leur liste un outil pour vérifier la réponse du serveur de Yandex). Sinon, il est assez simple de le faire en écrivant quelques lignes dans le même .htaccess irremplaçable :

RewriteRule .* - RewriteRule .* -

Certes, cette méthode fonctionnera, encore une fois, à condition que vous disposiez d’un « Apache pur » (mais c’est exactement le cas que nous envisageons). Nous supposerons que l'en-tête Last-Modified, dont la valeur affichera d'ailleurs la date de la dernière modification, est configuré.

C'est maintenant au tour de Cache-Control avec le paramètre max-age, dont la valeur précisera la période de stockage en cache de chaque objet statique spécifique. Le module entre en scène en-têtes de modules, dont le code doit être inséré dans .htaccess :

#désactiver la mise en cache

Il est à noter qu'à travers le conteneur siModule Le serveur vérifie la présence de ce module. S'il est absent, la directive ne sera pas exécutée, donc son utilisation ne devrait en aucun cas conduire à des erreurs.

Le temps de rétention du cache est déterminé à l'aide du paramètre âge maximum, sa valeur est définie en secondes. Grâce aux commentaires (que vous pouvez d'ailleurs supprimer en toute sécurité) après le symbole dièse « # », je pense que la base de cette construction est claire.

Cependant, à la place des en-têtes de mod il est tout à fait possible d'utiliser le module le module expire, affichant l’en-tête Expires (qui, selon Google lui-même, est préférable car il bénéficie d’un support plus large). Dans ce cas, le fragment de code pour l'activer ressemblera à ceci :

Le point de départ de la date d'expiration du cache lors de l'utilisation de l'en-tête Expires est la date du premier chargement. De plus, contrairement à Cache-Control, où la période de temps n'est définie qu'en secondes, elle peut ici être spécifiée dans n'importe quel format d'heure, y compris l'année.

Pour voir cela, regardez la section image du code. Là, j'ai spécifiquement indiqué le temps dans différentes unités : 1 mois, 4 semaines, 30 jours, 43829 minutes, 2592000 secondes.

Il est clair qu'un mois et une année peuvent avoir un nombre différent de jours, de semaines, de minutes et de secondes, mais cela n'a pas d'importance puisque des valeurs moyennes sont utilisées. À propos, pour les fichiers JS, CSS et les images, il est recommandé de définir une période d'au moins une semaine, mais pas plus d'un an. Dans ce cas, en effet, la date de fin prévue de la période de mise en cache de cette version de l'objet sera indiquée comme valeur de l'en-tête Expires dans la réponse du serveur.

En plus des modules mentionnés, il est utile d'utiliser également mod setenvif. Le fait est que les navigateurs Web de la famille Microsoft Internet Explorer et certaines versions de Mazila ne perçoivent pas correctement l'en-tête Vary dans la réponse du serveur HTTP, ce qui apporte également une contribution importante à la gestion de la mise en cache. Ce module permet de résoudre ce problème en excluant Vary de la réponse du serveur :

En conséquence nous obtenons deux dernières options paramètres de mise en cache, que vous pouvez vérifier en les insérant un par un dans .htaccess (je ne recommande pas d'utiliser les deux en même temps) :

#cache les fichiers HTML et HTM pendant une journée En-tête défini Cache-Control "max-age=43200"#cache fichiers CSS, JavaScript et texte pendant une semaine En-tête défini Cache-Control "max-age=604800"#cache flash et images pendant un mois En-tête défini Cache-Control "max-age=2592000"#désactiver la mise en cache En-tête non défini Cache-Control BrowserMatch "MSIE" force sans variation BrowserMatch "Mozilla/4.(2)" force sans variation

ExpiresActive On #cache par défaut pendant 5 secondes ExpiresDefault "accès plus 5 secondes" #mise en cache du flash et des images pendant un mois ExpiresByType image/x-icon "accès plus 1 mois" ExpiresByType image/jpeg "accès plus 4 semaines" ExpiresByType image/png " accès plus 30 jours" ExpiresByType image/gif "accès plus 43829 minutes" ExpiresByType application/x-shockwave-flash "accès plus 2592000 secondes" #mise en cache des fichiers CSS, JavaScript et texte pendant une semaine ExpiresByType text/css "accès plus 604800 secondes" ExpiresByType text/javascript "accès plus 604 800 secondes" ExpiresByType application/javascript "accès plus 604 800 secondes" ExpiresByType application/x-javascript "accès plus 604 800 secondes" #cache fichiers HTML et HTM pendant une journée ExpiresByType text/html "accès plus 43 200 secondes " #cache les fichiers XML pendant dix minutes ExpiresByType application/xhtml+xml "accès plus 600 secondes" BrowserMatch "MSIE" force sans variation BrowserMatch "Mozilla/4.(2)" force sans variation

Je vous rappelle encore une fois que malgré la présence du conteneur IfModule, qui assure la sécurité de l'édition, il ne serait pas superflu de faire une copie de sauvegarde de la version originale du fichier à chaque fois que vous modifiez .htaccess (vous pouvez simplement copier son contenu et enregistrez-le sur votre ordinateur) afin de ne pas être pris par surprise par un majeur dans une variante ou une autre.

Code de génération des en-têtes Etag et Expires pour configurer le cache

Dans le cas où les directives proposées ci-dessus ne fonctionnent soudainement pas (même si Apache « pur » est installé sur votre hébergement), regardons un autre cas, à savoir celui où une paire d'en-têtes obligatoires Etag et Expires font office d'outils de gestion de mise en cache. Comme vous vous en souvenez, les deux sont responsables de la livraison en temps opportun des fichiers du cache, lançant ainsi une vérification de la pertinence de la version actuelle.

Mais si la valeur Expires affiche la date de la dernière modification, alors l'ETag utilise l'un ou l'autre identifiant de ressource unique (le plus souvent ce rôle est joué par la version du fichier). Pour activer ETag, il vous suffit de saisir une seule ligne dans le même .htaccess :

Taille FileETag MTime

Eh bien, appliquez le module mod expire, déjà connu de nous. Vous pouvez également ajouter le mod setenvif, qui, comme je l'ai dit plus haut, interdit la formation d'en-têtes Vary pour un certain groupe de navigateurs web afin d'assurer la formation d'un cache de leur part :

Taille FileETag MTime ExpiresActive sur ExpiresDefault "accès plus 1 an" BrowserMatch "MSIE" force sans variation BrowserMatch "Mozilla/4.(2)" force sans variation

Nous utilisons ici un complexe avec un minimum de types d'objets impliqués, mais les plus populaires (CSS, JavaScript et images), qui devraient également être suffisants pour assurer une efficacité maximale dans l'accélération du site. Si vous le souhaitez, vous pouvez ajouter d'autres types de fichiers à l'ensemble « jpg|jpeg|gif|png|ico|css|js ».

De plus, dans l’exemple de code ci-dessus, tous les fichiers sont soumis à la même durée de vie du cache d’un an (« accès plus 1 an »), recommandée par Google. Mais vous pouvez spécifier votre propre période de temps pour chaque groupe d'objets, en suivant l'exemple du contenu des modules mod_expires et mod_headers de la section précédente de l'article.

Vérifier la présence des en-têtes requis dans la réponse du serveur

Après avoir collé le code dans le fichier .htaccess, vous pouvez vérifier si les en-têtes requis sont inclus dans la réponse du serveur. À cette fin, vous pouvez utiliser un service en ligne, par exemple Checkmy.ru, où nous sélectionnons n'importe quel navigateur en tant que client (agent utilisateur) envoyant une requête HTTP au serveur, et entrons également l'URL de la ressource (par exemple, j'ai pris le chemin d'accès à l'image , utilisé dans l'un des articles du blog) :


Après avoir cliqué sur le bouton « Envoyer la demande », après quelques secondes, le résultat apparaîtra :


Comme vous pouvez le constater, dans mon cas, les quatre en-têtes sont présents. J'ai dit qu'une des paires "Last-Modified - ETag" et "Expires - Cache-Control" doit être affichée, le reste est inutile. Dans ce cas, l'ensemble complet, pour autant que l'on puisse en juger, ne causera pas de préjudice.

À propos, si vous effectuez des tests avant de commencer à configurer la mise en cache, vous pouvez immédiatement déterminer la productivité de vos actions.

Après tout, si nginx est présent dans la réponse du serveur, alors il faudra le configurer (mon fournisseur l'a fait), et le fichier de configuration .htaccess sera inutile ici. Dans ce cas, comme je l'ai déjà noté, vous devrez recourir à l'aide du service support, à moins bien sûr que votre tarif d'hébergement et vos connaissances insuffisantes ne vous permettent de résoudre le problème vous-même.

Ensuite, pour consolider le matériel, je vous conseille de vous tourner vers la vidéo et de regarder successivement 6 leçons (dont une dédiée à la mise en cache dans les navigateurs), qui abordent en détail tous les aspects les plus importants de l'accélération d'un site WP :

");">

Souhaitez-vous recevoir des articles frais, pertinents et utiles en temps opportun ? Ensuite vous pouvez vous abonner :

Plus d'articles sur ce sujet :

60 avis

  1. Denis

    Un moyen très utile d’augmenter le confort d’être sur le site. Après tout, en optimisant la vitesse de chargement, vous faites ainsi gagner du temps au visiteur, et pour cela il vous sera reconnaissant en visitant votre site encore et encore. Ce qui affectera directement les revenus du site de manière positive.

  2. Igor

    Tout à fait raison, Denis. Tout est interconnecté dans la promotion d’un site Web.

  3. Marazzi

    Je ne comprends rien, le navigateur se souvient effectivement des sites sur lesquels il était dans les cookies, si vous effacez les cookies. SELON VOTRE MÉTHODE, alors votre schéma cessera de fonctionner, ou plutôt, je comprends que c'est de cela que parle la conversation, elle est destinée à un visiteur régulier qui ne nettoie pas l'historique7 ABONNÉ, EN ATTENTE D'UNE RÉPONSE1

  4. Sergueï Dmitrievitch

    Informations très utiles. Je l'ai trouvé utile. Merci.

  5. Igor

    Marazzi, tout d'abord, les cookies et le cache sont des choses différentes. Les cookies sont des fichiers spéciaux contenant un ensemble de données qui vous permettent d'identifier un utilisateur s'il visite une ressource Web. Et le cache (traduit de l'anglais par entrepôt, cachette) du navigateur est une sorte d'endroit isolé pour stocker des copies de documents (par exemple, des pages Web d'un site Web), qui, si nécessaire, sont affichées dans le navigateur. C’est côté serveur que la commande est effectuée pour utiliser le cache côté navigateur de l’utilisateur, et un dossier avec le cache est créé sur l’ordinateur de l’utilisateur. De son côté, l'utilisateur peut réguler la fréquence de création de copies en cache des pages du site en vidant le dossier cache. Ou désactivez complètement la mise en cache : les paramètres des navigateurs modernes le permettent. Plus vous videz le cache souvent, plus la version de la page que vous obtenez est la plus récente.

  6. Nikolaï

    Super, et tout va bien ici !!!

  7. marazzi

    Eh bien, c'est de cela que je parlais.

  8. Alexandre
  9. Nikolaï

    Merci pour l'article. Il est vrai qu’il n’est pas tout à fait clair comment vider ce cache ultérieurement si, par exemple, une nouvelle catégorie ou section apparaît sur le site ou, au contraire, disparaît. Bien sûr, j’exagère beaucoup, mais le sens est le même. Parfois, le cache doit être vidé, comment cela est-il implémenté dans ce code ?

  10. Irina

    D'ACCORD! Merci!
    Ce code a aidé, maintenant 80 sur 100

    FileETag MTime Size ExpiresActive on ExpiresDefault « accès plus 1 an »

  11. Igor

    Nikolay, je n'ai pas bien compris votre question. Il s'agit d'un code permettant de mettre en cache les pages dans les navigateurs des utilisateurs ; ces derniers effacent eux-mêmes le cache. Les nouveaux articles et catégories sont affichés même lorsque le cache est plein. Seuls les éléments qui restent inchangés pendant une longue période sont mis en cache pendant une longue période.

  12. Andreï

    Merci. Mais si je n'ai besoin que de certains éléments qui soient mis en cache, par exemple le logo et les drapeaux des pays dans le pied de page, que dois-je faire ?

  13. Igor

    Andrey, pourquoi as-tu besoin de séparer les images, de mettre en cache certaines et pas d'autres ? Habituellement, les images ne changent pas à la vitesse kaléidoscopique.

  14. Andreï

    Eh bien oui, vous avez raison avec les photos. Et ne mettez pas en cache une certaine page (par exemple, depuis le panneau d'administration). Est-il possible?

  15. Igor

    Bien sûr disponible. Si vous utilisez un plugin de mise en cache, tel qu'Hyper Cache, ses paramètres proposent de nombreuses options différentes, notamment la possibilité d'exclure les pages qui ne peuvent pas être mises en cache.

  16. Iaroslav

    Article très utile, je voulais depuis longtemps mettre en place un cache, mais auparavant je trouvais partout la première méthode présentée et elle ne faisait absolument rien.
    Mais grâce à la deuxième méthode, tout fonctionne en trombe !! PS 91

  17. Igor

    Bon résultat, Yaroslav.

  18. Stan

    ça ne marche en aucun cas

  19. Igor

    Stan, il se pourrait bien que cela dépende en grande partie de l'hébergeur.

  20. Il y a

    Il n'y a pas de mots pour combien de temps j'ai cherché un article sur la façon d'activer le temps de mise en cache du navigateur, j'ai juste dû insérer le code tout en haut. Merci pour l'article.

  21. Igor

    S'il te plaît, Ilya.

  22. Gris

    Merci ça marche !

  23. Sergueï

    aucune des deux méthodes ne fonctionne non plus
    l'hébergeur est adéquat

    Apparemment, ils devront écrire au support

  24. Igor Gornov

    Oui, Sergey, peut-être. Vous pouvez constater par vous-même que beaucoup parviennent à le mettre en œuvre.

  25. Alexandre Pouzatykh

    Merci. Excellentes informations. Je vais maintenant le corriger sur mon site Web. Sinon, pgespeed donne une marque rouge.

  26. Youri

    J'ai tout fait comme décrit, mais la vitesse de chargement de PageSpeed ​​​​​​Insights n'a pas changé (74%). Quelle pourrait être la raison?

  27. Youri

    Voici mon htaccess
    # COMMENCER WordPress

    Réécriture du moteur activé
    RéécrireBase /
    RewriteRule ^index\.php$ - [L]
    RéécritureCond %(REQUEST_FILENAME) !-f
    RéécritureCond %(REQUEST_FILENAME) !-d
    Réécrire la règle. /index.php [L]

    #ENDWordPress
    J'ajoute ton code et rien ne change
    PageSpeed ​​​​Insights reste à 74%.
    Dites-moi quel pourrait être le problème ???

  28. Igor Gornov

    La configuration spécifique de votre serveur d'hébergement sur lequel se trouve le site. A mon avis, j'ai déjà noté dans l'article et les commentaires que cette méthode ne convient pas à tout le monde.

  29. Valéry

    Igor, bon article. Je voulais faire ça depuis longtemps, mais je ne savais pas comment. Maintenant c'est clair. J'ai une question : « Où dans le fichier .htaccess dois-je coller le code ? »

  30. Igor Gornov

    Valery, si vous avez déjà des fragments de code dans .htaccess, alors il devrait y avoir une ligne comme celle-ci :

    #ENDWordPress

    Dans ce cas, non seulement cela, mais tout code doit être placé au-dessus de cette ligne. Le reste n'a pas d'importance.

  31. vokacan

    Les informations sont utiles, mais assez difficiles à comprendre pour un débutant, à mon avis.

  32. Aély

    Bizarrement, la même chose n’a pas fonctionné pour moi, mais que dois-je faire, ou plutôt que dois-je demander à l’hébergeur ?

  33. Igor Gornov

    Vous devez demander à l'hébergeur ce qui suit : est-il possible d'activer la mise en cache sur le serveur pour tous les fichiers possibles. Peut-être qu'ils ont déjà un algorithme prêt à l'emploi différent de celui que j'ai proposé.

  34. Aély

    Merci, je l'ai écrit maintenant.

  35. Aély

    Voici une blague, ils (l'hébergeur) ont dit qu'ils avaient tout inclus, et je leur dis, et Googlespeedtest montre "utiliser le cache du navigateur", et ils me disent que ce sont des questions pour Googlespeedtest. Je ne sais pas qui croire ? :)

  36. Igor Gornov

    Aely, cette attitude envers le client de la part de l'hébergeur est pour le moins étrange. En théorie, ils devraient expliquer et donner un algorithme possible pour l'ajouter au fichier .htaccess afin d'activer la fonction, même s'ils l'ont activée. Je me demande si ce n'est pas la première fois que vous contactez le service support, comment s'est-il comporté dans d'autres situations ?