Mettre à profit la mise en cache du navigateur - ressources tierces
J'optimise un site Web en fonction des directives de PageSpeed Insights. Et l'un des points est de tirer parti de la mise en cache du navigateur.
Et dans ce cas - pour les ressources tierces - telles que Google Analytics et Tag Manager.
J'ai déjà ajouté ce code au fichier .htaccess:
# Expires headers
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 2 days"
# cache.appcache needs re-requests in FF 3.6
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
Que devrais-je ajouter à ce code? Et quelle est la période recommandée pour la mise en cache du navigateur pour Google Analytics et Google Tag Manager?
Comme @TimFountain le dit, vous n’avez "aucun contrôle" sur les ressources servies par un tiers. La demande va au serveur tiers, pas votre serveur - donc tout code que vous placez sur votre Le serveur n'est simplement jamais traité lorsque la ressource tierce est demandée.
Google Analytics et Tag Manager sont servis à partir des serveurs de Google. Seul Google contrôle les serveurs de Google!
Toutefois, si Google a décidé de ne pas mettre ces ressources en cache, il se peut qu'il ait une très bonne raison de ne pas le faire. Tout ne doit pas être mis en cache.
Essayer de mettre en cache ces ressources "Google" (peut-être en recommandant ces ressources à partir de votre propre serveur, ce qui n'est pas recommandé), tout en satisfaisant au test PageSpeed, pourrait avoir un effet négatif sur votre expérience utilisateur et vos données Analytics. L'outil PageSpeed n'est qu'un guide. Vous ne devriez pas aveuglément accepter les recommandations.
Cette question sur StatckOverflow traite spécifiquement de Google Analytics et de PageSpeed Insights:
Vos règles htaccess n'affecteront que les actifs servis par votre serveur. Vous ne pouvez rien faire pour affecter la mise en cache des actifs servis par des serveurs tiers - vous n'avez aucun contrôle sur ceux-ci.
Je réponds après un an, alors vous aurez peut-être déjà résolu ce problème.
J'obtenais également les mêmes arguments, mais cela concerne les ressources tierces autres que Google Analytics et Tag Manager.
J'ai appliqué la mise en cache du navigateur Leverage et appliqué des méthodes de hiérarchisation des ressources pour résoudre ce problème. Voici le brief.
Il existe quatre méthodes de priorisation des ressources:
Preload <link rel="preload"> informe le navigateur qu'une ressource est nécessaire dans le cadre de la navigation en cours et qu'elle doit commencer à être extraite dès que possible.
<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">
PreConnect <link rel="preconnect"> informe le navigateur que votre page a l'intention d'établir une connexion avec une autre origine et que vous souhaitez que le processus démarre le plus rapidement possible.
<link rel="preconnect" href="https://example.com">
dns-prefetch Il existe en fait un autre type <link> lié aux connexions: <link rel="dns-prefetch">. Ceci ne traite que la recherche DNS, donc il s’agit d’un petit sous-ensemble de <link rel="preconnect">, mais il prend en charge un navigateur plus large, de sorte qu’il peut servir de solution de secours. Vous l'utilisez exactement de la même manière:
<link rel="dns-prefetch" href="https://example.com">
Prefetch <link rel="prefetch"> est quelque peu différent de <link rel="preload"> et <link rel="preconnect">, en ce sens qu’il n’essaie pas de faire en sorte que quelque chose de critique ne se produise pas plus rapidement; au lieu de cela, il essaie de faire quelque chose de non critique plus tôt, s’il ya une chance.
Pour ce faire, il informe le navigateur d’une ressource qui devrait être utilisée dans le cadre d’une navigation ou d’une interaction future, par exemple, ce qui pourrait être nécessaire ultérieurement, si l’utilisateur prend les mesures que nous attendons. Ces ressources sont extraites avec la priorité la plus basse dans Chrome, lorsque le chargement de la page en cours est terminé et que la bande passante disponible est disponible.
<link rel="prefetch" href="page-2.html">
Pour votre problème, si vous avez d'autres ressources CSS non critiques, ressources JS, , alors vous voudrez peut-être utiliser <rel=prefetch> dans votre code HTML.
Vous pouvez lire les détails à partir d’ici: Hiérarchisation des ressources - Obtenir le navigateur pour vous aider