Nous activons le cache du navigateur côté utilisateur. Plugin WordPress Super Cache, utiliser le cache du navigateur Utiliser le cache du navigateur pour des fichiers individuels
"" pour optimiser le site selon les conseils de l'outil de Vitesse de page Google Connaissances. 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 :
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 le définir sur Droits CHMOD pour l'enregistrement)
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 mise à jour automatique 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
Voilà, maintenant sur la liste Informations sur PageSpeed Vous ne devriez avoir aucun message concernant la configuration du cache de votre navigateur.
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.
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 la date ou la date d'expiration des ressources statiques dans les en-têtes HTTP, le navigateur chargera les ressources précédemment récupérées depuis le 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
Après cela, vous pouvez vérifier le résultat sur 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.
👁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.
Loin de là liste complète problèmes que nous pouvons 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 :
- Si le site est long à charger, alors l'utilisateur n'attendra peut-être pas que vos super effets prévus par le concepteur attirent 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. 🙂
- Plus la vitesse de chargement du site est longue, plus il sera servi bas. moteurs de recherche Par 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 un site populaire CMS WordPress, c'est-à-dire qu'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.
Veuillez noter, 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 de le faire copie de sauvegarde sur votre ordinateur afin que vous puissiez le 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 :
# 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 :
< 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" |
img class = "aligncenter wp-image-2458 size-full" title = "Comment activer la mise en cache du navigateur des pages du site" src = "http://about-windows.ru/wp-content/uploads/2014/07/How pour activer -browser-caching-of-site-pages.jpg” alt=”Comment activer la mise en cache du navigateur des pages du site” width=”600″ height=”450″ />
Comment puis-je activer le cache du navigateur de l'utilisateur final sur mon site ?
Si votre serveur informe le navigateur de l'utilisateur final que certaines ressources peuvent être stockées dans , alors une demande répétée pour les mêmes ressources recevra une réponse non pas du serveur distant, mais de l'ordinateur local. Les deux parties en bénéficieront. Ainsi, le serveur soulagera une partie de la charge, puisqu’il n’aura pas à envoyer certaines ressources déjà disponibles sur l’ordinateur de l’utilisateur. Mais l'utilisateur recevra plus accès rapide aux ressources demandées.
Comment activer la mise en cache du navigateur des ressources du site sur un serveur Apache ?
Tout d'abord, voyons quelles ressources le navigateur doit mettre en cache. Permettez-moi de vous rappeler que si le navigateur met en cache certaines ressources, il se peut qu'il ne les mette pas à jour complètement. pendant longtemps. Cette situation est tout à fait adaptée aux objets statiques. Quelles ressources peuvent être classées comme objets statiques ?
- Fichiers CSS.
- Fichiers JS.
- Images.
- Vidéo.
- Musique.
Les ressources ci-dessus, ainsi que certaines autres ressources, peuvent être mises en cache pendant une longue période sans dommage. Ils ne seront pas mis à jour tous les jours. Sur cette base, je vais vous donner un code qui forcera le navigateur de l'utilisateur à mettre en cache les ressources répertoriées. De plus, nous indiquerons la période pendant laquelle ces ressources peuvent être stockées dans le cache sans demander de mises à jour.
Expire actif le
ExpirePar défaut "accès 7 jours"
Application ExpiresByType/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 text/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 »
Application ExpiresByType/x-shockwave-flash « accès 1 an »
Ce code doit être inscrit dans le dossier .htaccess, qui se trouve dans le dossier racine du site pour lequel Apache sert de serveur. Après cela, le navigateur mettra en cache tous les objets ci-dessus pendant la période spécifiée. Cela signifie que si vous visitez le même site dans un délai d’un an (comme indiqué dans l’exemple), vous recevrez de nombreux fichiers de votre ordinateur, à moins bien sûr que vous ayez vidé le cache de votre ordinateur pendant cette période.
- La mise en cache htaccess enregistre le contenu d'une page Web dans ordinateur local lorsque l'utilisateur le visite ;
- Utilisation du cache du navigateur – Le webmaster indique aux navigateurs comment traiter les ressources.
Lorsque le navigateur affiche une page Web, il doit charger le logo, le fichier CSS et d'autres ressources :
Le cache du navigateur « mémorise » les ressources que le navigateur a déjà téléchargées. Lorsqu'un visiteur accède à une autre page du site, logo, fichiers CSS, etc. ne doit pas être téléchargé à nouveau car le navigateur les a déjà "mémorisés" (les ont enregistrés). C'est la raison pour laquelle la page Web met plus de temps à se charger lors de votre première visite que lors de visites répétées.
Lorsque vous utilisez la mise en cache, les fichiers de la page Web seront stockés dans le cache du navigateur. Les pages se chargeront beaucoup plus rapidement lors de visites répétées. Cela se produira également avec d'autres pages qui utilisent les mêmes ressources.
Comment activer la mise en cache du navigateur
- Modifier les en-têtes de demande de ressources pour utiliser la mise en cache ;
- Optimisez votre stratégie de mise en cache.
Modification des en-têtes de requête
Pour la plupart des gens, la seule façon de mettre en cache le htaccess d'un site est d'ajouter du code au fichier .htaccess sur le serveur Web.
Le fichier .htaccess contrôle de nombreux paramètres importants pour votre site Web.
Mise en cache du navigateur via le fichier .htaccess
Le code ci-dessous indique au navigateur ce qu'il doit mettre en cache et combien de temps il doit le « mémoriser ». Il doit être ajouté au début du fichier .htaccess :
## EXPIRE LA MISE EN CACHE ##
Enregistrez le fichier .htaccess, puis actualisez la page Web.
Comment définir la durée du cache pour différents types de fichiers
Le code ci-dessus spécifie des intervalles de temps. Par exemple, 1 an (1 an) ou 1 mois (1 mois). Ils sont liés aux types de fichiers. Le code ci-dessus indique que les fichiers .jpg (images) doivent être mis en cache pendant un an.
Si vous souhaitez modifier cela afin que les images JPG soient également mises en cache pendant un mois, vous remplacerez simplement « 1 an » par « 1 mois ». Les valeurs de mise en cache htaccess ci-dessus sont optimales pour la plupart des pages Web.
Méthode de mise en cache alternative pour .htaccess
La méthode décrite ci-dessus s'appelle " Expire", cela aide la plupart des débutants avec la mise en cache. Une fois que vous êtes familiarisé avec la mise en cache, vous pouvez essayer une autre méthode de mise en cache appelée Cache-Control, qui vous offre plus d'options.
Il est possible que la méthode Expires ne fonctionne pas sur votre serveur, auquel cas vous souhaiterez peut-être essayer d'utiliser Cache-Control.
Contrôle du cache
Cette méthode vous permet d'avoir plus de contrôle sur la mise en cache des pages dans le navigateur, mais de nombreuses personnes trouvent plus facile de spécifier tous les paramètres une seule fois.
Exemple d'utilisation dans un fichier .htaccess :
#1 Mois pour la plupart des actifs statiques
Le code ci-dessus définit l'en-tête Cache-Control en fonction du type de fichier.
Comment fonctionne Cache-Control ?
Considérez la ligne ci-dessus de code de mise en cache dans le navigateur htaccess :
#1 Mois pour la plupart des actifs statiques
Cette ligne n'est qu'une note. Le fichier .htaccess ignore les lignes commençant par le caractère #. Cette note est recommandée car vous pouvez disposer de plusieurs ensembles de données différents comme solution de mise en cache de fichiers :
La ligne mentionnée ci-dessus dit que " si le fichier est de l'un de ces types, alors nous ferons quelque chose avec lui...»
La chose la plus importante à propos de cette ligne est qu'elle répertorie différents types fichiers ( CSS, JS, JPEG, PNG etc. ) et que les instructions de mise en cache doivent être appliquées à ces types de fichiers. Par exemple, si vous ne souhaitez pas que les fichiers JPG soient mis en cache pendant une période de temps spécifiée, vous pouvez supprimer " JPG". Si vous souhaitez ajouter du HTML, alors vous devez indiquer dans cette ligne « HTML«:
En-tête défini Cache-Control "max-age=2592000, public"
La ligne mentionnée ci-dessus définit les en-têtes et les valeurs réels :
- Partie " Ensemble d'en-tête Cache-Control» — définit le titre ;
- Variable " âge maximum = 2592000" : indique la durée du processus de mise en cache (en secondes). Dans ce cas, nous mettons en cache pendant un mois (2592 000) secondes ;
- Partie " publique» rapporte qu'il est accessible au public.
