PageSpeed ​​Insights 99/100 grâce à Google Analytics – Comment mettre en cache l’AG?

Je suis dans une quête pour atteindre 100/100 sur PageSpeed ​​et je suis presque arrivé. J’essaie de trouver une bonne solution pour mettre en cache Google Analytics.

Voici le message que je reçois:

Exploitation de la mise en cache du navigateur La définition d’une date d’expiration ou d’un âge maximal dans les en-têtes HTTP pour les ressources statiques indique au navigateur de charger les ressources téléchargées précédemment sur le disque local plutôt que sur le réseau. Exploitez la mise en cache du navigateur pour les ressources suivantes pouvant être mises en cache: http://www.google-analytics.com/analytics.js (2 heures)

La seule solution que j’ai trouvée date de 2012 et je ne pense pas que ce soit une bonne solution. Vous copiez essentiellement le code GA et l’hébergez vous-même. Vous exécutez ensuite une tâche cron pour revérifier Google une fois par jour pour récupérer le dernier code GA et le remplacer.

http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Que puis-je faire d’autre pour atteindre 100/100 tout en utilisant Google Analytics?

Je vous remercie.

    Eh bien, si Google vous trompe, vous pouvez tromper Google:

    Ceci est l’agent utilisateur de la pageSpeed:

    “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.8 (KHTML, like Gecko; Google Page Speed Insights) Chrome/19.0.1084.36 Safari/536.8” 

    Vous pouvez insérer un conditionnel pour éviter de servir le script d’parsing à PageSpeed:

      // your analytics code here  

    De toute évidence, cela ne fera aucune amélioration réelle, mais si votre seule préoccupation est d’obtenir un score de 100/100, cela le fera.

    Il existe un sous-ensemble de la bibliothèque js de Google Analytics appelé ga-lite que vous pouvez mettre en cache comme vous le souhaitez.

    La bibliothèque utilise l’API REST publique de Google Analytics pour envoyer les données de suivi des utilisateurs à Google. Vous pouvez lire plus sur le blog à propos de ga-lite .

    Disclaimer: Je suis l’auteur de cette bibliothèque. J’ai eu du mal avec ce problème spécifique et le meilleur résultat que j’ai trouvé a été d’implémenter cette solution.

    Je ne m’inquiéterais pas à ce sujet. Ne le mettez pas sur votre propre serveur, cela semble être un problème avec Google, mais aussi bon que possible. Mettre le fichier sur votre propre serveur créera de nombreux nouveaux problèmes.

    Ils ont probablement besoin du fichier pour être appelé à chaque fois plutôt que de l’obtenir depuis le cache du client, car de cette façon vous ne comptez pas les visites.

    Si vous rencontrez des problèmes, lancez l’URL Google Insights sur Google Insights lui-même, amusez-vous, détendez-vous et continuez votre travail.

    Voici une solution très simple utilisant JS, pour le suivi de base de GA, qui fonctionnera également pour les caches / proxies de bord (ceci a été converti à partir d’un commentaire):

     if(navigator.userAgent.indexOf("Speed Insights") == -1) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXXX-X', 'auto'); ga('send', 'pageview'); } 

    Remarque: Ceci est le script GA par défaut. Vous pouvez avoir d’autres appels à ga() , et si tel est le cas, vous devrez toujours vérifier l’agent utilisateur avant d’appeler ga() , sinon il peut y avoir une erreur.

    Dans les documents Google, ils ont identifié un filtre de pagespeed qui chargera le script de manière asynchrone:

     ModPagespeedEnableFilters make_google_analytics_async 

    Vous pouvez trouver la documentation ici: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

    Une chose à souligner est que le filtre est considéré à haut risque. De la documentation:

    Le filtre make_google_analytics_async est expérimental et n’a pas fait l’object de tests approfondis. Un cas où une réécriture provoquerait des erreurs est si le filtre manque les appels aux méthodes Google Analytics qui renvoient des valeurs. Si de telles méthodes sont trouvées, la réécriture est ignorée. Cependant, les méthodes disqualifiantes seront omises si elles arrivent avant le chargement, si elles sont dans des atsortingbuts tels que “onclick” ou si elles se trouvent dans des ressources externes. Ces cas devraient être rares.

    Vous pouvez essayer d’héberger localement analytics.js et mettre à jour son contenu avec un script de mise en cache ou manuellement.

    Le fichier js n’est mis à jour que quelques fois par an et si vous n’avez pas besoin de nouvelles fonctionnalités de suivi, mettez-le à jour manuellement.

    https://developers.google.com/analytics/devguides/collection/analyticsjs/changelog

    magasin localy analytics.js, mais ce n’est pas recommandé par Google: https://support.google.com/analytics/answer/1032389?hl=fr

    il n’est pas recommandé car google peut mettre à jour le script quand il le souhaite, alors faites simplement un script qui télécharge le javascript analytics chaque semaine et vous n’aurez aucun problème!

    Au fait, cette solution empêche Adblock de bloquer les scripts Google Analytics

    Vous pouvez proxy le script Google Analytics via votre propre serveur, l’enregistrer localement et le mettre à jour automatiquement toutes les heures pour vous assurer qu’il s’agit toujours de la dernière version de Google.

    Je l’ai fait sur quelques sites maintenant et tout fonctionne bien.

    Itinéraire proxy Google Analytics dans NodeJS / MEAN Stack

    C’est comme ça que je l’ai implémenté sur mon blog , construit avec la stack MEAN.

     router.get('/analytics.js', function (req, res, next) { var fileUrl = 'http://www.google-analytics.com/analytics.js'; var filePath = path.resolve('/content/analytics.js'); // ensure file exists and is less than 1 hour old fs.stat(filePath, function (err, stats) { if (err) { // file doesn't exist so download and create it updateFileAndReturn(); } else { // file exists so ensure it's not stale if (moment().diff(stats.mtime, 'minutes') > 60) { updateFileAndReturn(); } else { returnFile(); } } }); // update file from remote url then send to client function updateFileAndReturn() { request(fileUrl, function (error, response, body) { fs.writeFileSync(filePath, body); returnFile(); }); } // send file to client function returnFile() { res.set('Cache-Control', 'public, max-age=' + oneWeekSeconds); res.sendFile(filePath); } }); 

    Méthode d’action du proxy Google Analytics dans ASP.NET MVC

    C’est ainsi que je l’ai implémenté sur d’autres sites construits avec ASP.NET MVC.

     public class ProxyController : BaseController { [Compress] public ActionResult GoogleAnalytics() { var fileUrl = "https://ssl.google-analytics.com/ga.js"; var filePath = Server.MapPath("~/scripts/analytics.js"); // ensure file exists if (!System.IO.File.Exists(filePath)) UpdateFile(fileUrl, filePath); // ensure file is less than 1 hour old var lastModified = System.IO.File.GetLastWriteTime(filePath); if((DateTime.Now - lastModified).TotalMinutes > 60) UpdateFile(fileUrl, filePath); // enable caching for 1 week for page speed score Response.AddHeader("Cache-Control", "max-age=604800"); return JavaScript(System.IO.File.ReadAllText(filePath)); } private void UpdateFile(ssortingng fileUrl, ssortingng filePath) { using (var response = WebRequest.Create(fileUrl).GetResponse()) using (var dataStream = response.GetResponseStream()) using (var reader = new StreamReader(dataStream)) { var body = reader.ReadToEnd(); System.IO.File.WriteAllText(filePath, body); } } } 

    Ceci est le CompressAtsortingbute utilisé par MVC ProxyController pour la compression Gzip

     public class CompressAtsortingbute : ActionFilterAtsortingbute { public override void OnActionExecuting(ActionExecutingContext filterContext) { var encodingsAccepted = filterContext.HttpContext.Request.Headers["Accept-Encoding"]; if (ssortingng.IsNullOrEmpty(encodingsAccepted)) return; encodingsAccepted = encodingsAccepted.ToLowerInvariant(); var response = filterContext.HttpContext.Response; if (encodingsAccepted.Contains("gzip")) { response.AppendHeader("Content-encoding", "gzip"); response.Filter = new GZipStream(response.Filter, CompressionMode.Compress); } else if (encodingsAccepted.Contains("deflate")) { response.AppendHeader("Content-encoding", "deflate"); response.Filter = new DeflateStream(response.Filter, CompressionMode.Compress); } } } 

    Script Google Analytics mis à jour

    Du côté du client, j’ajoute le chemin d’parsing avec la date actuelle jusqu’à l’heure pour que le navigateur n’utilise pas une version mise en cache de plus d’une heure.

       

    varvy.com ( aperçu de la vitesse de la page Google 100/100 ) charge le code de google analitycs uniquement si l’utilisateur effectue un défilement de la page:

     var fired = false; window.addEventListener("scroll", function(){ if ((document.documentElement.scrollTop != 0 && fired === false) || (document.body.scrollTop != 0 && fired === false)) { (function(i,s,o,g,r,a,m{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-X', 'auto'); ga('send', 'pageview'); fired = true; } }, true); 

    PHP

    Ajoutez ceci dans votre code HTML ou PHP:

        

    JavaScript

    Cela fonctionne bien avec JavaScript:

       

    NiloVelez a déjà dit: Évidemment, cela ne fera pas de réelle amélioration, mais si votre seule préoccupation est d’obtenir un score de 100/100, cela le fera.

    Pour Nginx:

     location ~ /analytics.js { proxy_pass https://www.google-analytics.com; expires 31536000s; proxy_set_header Pragma "public"; proxy_set_header Cache-Control "max-age=31536000, public"; } 

    Puis changez le chemin https://www.google-analytics.com/analytics.js pour https://votresite.com/analytics.js

    Pour résoudre ce problème, vous devez télécharger le fichier localement et exécuter une tâche cron pour continuer à mettre à jour. Note: cela ne rend pas votre site plus rapide du tout, il vaut donc mieux l’ignorer.

    A des fins de démonstration, suivez ce guide: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

    essayez ceci juste insérer avant

       

    S’il vous plaît changer xx-xxxxxxx-x à votre code, s’il vous plaît vérifier la mise en œuvre ici http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

    Google met en garde contre l’utilisation de copies locales des scripts d’analytics. Toutefois, si vous le faites, vous souhaiterez probablement utiliser des copies locales des plug-ins et du script de débogage.

    Un autre problème lié à la mise en cache agressive est que vous obtiendrez des occurrences de pages mises en cache – qui peuvent avoir changé ou ont été supprimées du site.

    Cela peut faire l’affaire 🙂

      

    En fonction de votre utilisation des données Google Analytics, si vous souhaitez disposer d’informations de base (telles que les visites, les interactions de l’interface utilisateur), vous ne pourrez peut-être pas inclure analytics.js, mais collecterez toujours des données en GA.

    Une option peut consister à utiliser le protocole de mesure dans un script mis en cache. Google Analytics: Aperçu du protocole de mesure

    Lorsque vous définissez explicitement la méthode de transport sur image, vous pouvez voir comment GA construit ses propres balises d’image.

     ga('set', 'transport', 'image'); https://www.google-analytics.com/r/collect ?v={protocol-version} &tid={tracking-id} &cid={client-id} &t={hit-type} &dl={location} 

    Vous pouvez créer vos propres requêtes GET ou POST avec la charge utile requirejse.

    Cependant, si vous avez besoin de plus de détails, cela ne vaudra probablement pas la peine.

    Vous pouvez configurer une dissortingbution cloudfront dont le serveur d’origine est http://www.google-analytics.com et définir un en-tête d’expiration plus long dans les parameters de dissortingbution cloudfront. Modifiez ensuite ce domaine dans l’extrait de Google. Cela empêche la charge sur votre propre serveur et la nécessité de continuer à mettre à jour le fichier dans un travail cron.

    Ceci est la configuration et oublier. Vous pouvez donc append une alerte de facturation à cloudfront au cas où quelqu’un “copierait” votre extrait de code et vole votre bande passante 😉

    Edit: je l’ai essayé et ce n’est pas si simple, Cloudfront passe par l’en-tête Cache-Control sans moyen facile de l’enlever

    Ouvrez le fichier https://www.google-analytics.com/analytics.js dans un nouvel onglet, copiez tout le code.

    Créez maintenant un dossier dans votre répertoire Web, renommez-le en google-analytics.

    Créez un fichier texte dans le même dossier et collez tout le code que vous avez copié ci-dessus.

    Renommez le fichier ga-local.js

    Modifiez maintenant l’URL pour appeler votre fichier de script Analytics hébergé localement dans votre code Google Analytics. Cela ressemblera à ceci: https://domain.xyz/google-analytics/ga.js

    Enfin, placez votre nouveau code Google Analytics dans le pied de page de votre page Web.

    Tu es prêt. Maintenant, vérifiez votre site Web de Google PageSpeed ​​Insights. Il n’affichera pas l’avertissement relatif à la mise en cache par navigateur de Google Analytics. Et le seul problème avec cette solution est de mettre à jour manuellement le script Analytics manuellement.

    Vous pouvez minimiser tous vos scripts dans la page, y compris analytics.js utilisant:

    N’oubliez pas de minimiser les fichiers avant de l’utiliser. Sinon, le temps de traitement sera plus long.