PageSpeed ​​Insights 99/100 à cause de Google Analytics - Comment puis-je mettre en cache GA?

Je suis en quête pour atteindre 100/100 sur PageSpeed ​​et j'y suis presque. J'essaie de trouver une bonne solution pour mettre en cache Google Analytics.

Voici le message que je reçois:

Tirez parti 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 précédemment téléchargées à partir du disque local plutôt que sur le réseau. Tirez parti de la mise en cache du navigateur pour les ressources pouvant être mises en cache suivantes: http://www.google-analytics.com/analytics.js (2 heures)

La seule solution que j'ai trouvée remonte à 2012 et je ne pense pas que ce soit une bonne solution. Essentiellement, vous copiez 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 en retour:

Il s'agit de l'agent utilisateur de 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'analyse à PageSpeed:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
// your analytics code here
<?php endif; ?>

Évidemment, cela n'apportera 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 en savoir plus sur le blog sur ga-lite .

Avertissement: 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é de mettre en œuvre cette solution.

Voici une solution très simple utilisant JS, pour le suivi GA de base, qui fonctionnera également pour les caches / proxys de périphérie (cela 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: il s'agit du script GA par défaut. Vous pouvez avoir d'autres ga()appels et, dans l'affirmative, vous devrez toujours vérifier l'agent utilisateur avant d'appeler ga(), sinon il risque de provoquer une erreur.

Je ne m'en inquiéterais pas. Ne le mettez pas sur votre propre serveur, il semble que ce soit un problème avec Google, mais aussi bon que possible. Placer 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 le récupérer dans le cache du client, car de cette façon, vous ne compteriez pas les visites.

Si vous avez un problème pour vous sentir bien, lancez l'URL Google insights sur Google insights lui-même, riez, détendez-vous et poursuivez votre travail.

Dans les documents Google, ils ont identifié un pagespeedfiltre 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é comme à haut risque. De la documentation:

Le filtre make_google_analytics_async est expérimental et n'a pas fait l'objet de tests approfondis en conditions réelles. Un cas où une réécriture entraînerait des erreurs est si le filtre manque des 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 de disqualification seront manquées si elles viennent avant le chargement, sont dans des attributs tels que "onclick", ou si elles sont dans des ressources externes. Ces cas devraient être rares.

varvy.com ( 100/100 Google page speed insight ) charge le code google analitycs uniquement si l'utilisateur fait défiler 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);

Vous pouvez essayer d'héberger les analytics.js localement 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

stocker localy analytics.js, mais il n'est pas recommandé par Google: https://support.google.com/analytics/answer/1032389?hl=en

ce n'est pas recommandé car google peut mettre à jour le script quand il le souhaite, alors faites simplement un script qui télécharge javascript d'analyse 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 mettre à jour automatiquement le fichier 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.

Route du proxy Google Analytics dans la pile NodeJS / MEAN

C'est ainsi que je l'ai implémenté sur mon blog construit avec la pile 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(string fileUrl, string 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);
        }
    }
}

Il s'agit du CompressAttribute utilisé par le MVC ProxyController pour la compression Gzip

public class CompressAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {

        var encodingsAccepted = filterContext.HttpContext.Request.Headers["Accept-Encoding"];
        if (string.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

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

<!-- analytics -->
<script>
    (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', '/analytics.js?d=' + new Date().toISOString().slice(0, 13), 'ga');
</script>

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";
    }

Ensuite, changez le chemin https://www.google-analytics.com/analytics.js en https://yoursite.com/analytics.js

PHP

Ajoutez ceci dans votre code HTML ou PHP:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
  <script>
    (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-PUT YOUR GOOGLE ANALYTICS ID HERE', 'auto');
    ga('send', 'pageview');
  </script>
<?php endif; ?>

Javascript

Cela fonctionne bien avec JavaScript:

  <script>
  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-<PUT YOUR GOOGLE ANALYTICS ID HERE>', 'auto');
    ga('send', 'pageview');
  }
  </script>

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

essayez ceci insérez juste avant

<script async='async' src='https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js'></script> <script>var galite=galite||{};galite.UA="xx-xxxxxxx-x";</script>

Veuillez modifier xx-xxxxxxx-x en votre code, veuillez 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'analyse. Cependant, si vous le faites, vous voudrez probablement utiliser des copies locales des plugins et du script de débogage.

Une deuxième préoccupation avec la mise en cache agressive est que vous obtiendrez des hits des pages mises en cache - qui peuvent avoir changé ou ont été supprimées du site.

Pour résoudre ce problème, vous devez télécharger le fichier localement et exécuter une tâche cron pour continuer la mise à jour. Remarque: cela ne rend pas votre site Web plus rapide, il est donc préférable de simplement l'ignorer.

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

Cela peut faire l'affaire :)

<script>
  $.ajax({
  type: "GET",
  url: "https://www.google-analytics.com/analytics.js",
  success: function(){},
  dataType: "script",
  cache: true
  });
</script>

Selon votre utilisation des données de Google Analytics, si vous souhaitez des informations de base (telles que des visites, des interactions avec l'interface utilisateur), vous pourrez peut-être ne pas inclure du tout analytics.js, tout en collectant des données dans GA.

Une option peut être d'utiliser à la place le protocole de mesure dans un script mis en cache. Google Analytics: Présentation 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 demandes GET ou POST avec la charge utile requise.

Cependant, si vous avez besoin d'un plus grand niveau de détail, cela ne vaudra probablement pas la peine.

Vous pouvez configurer une distribution cloudfront qui a www.google-analytics.com comme serveur d'origine et définir un en-tête d'expiration plus long dans les paramètres de distribution cloudfront. Modifiez ensuite ce domaine dans l'extrait de code Google. Cela évite la charge sur votre propre serveur et la nécessité de continuer à mettre à jour le fichier dans une tâche cron.

Ceci est configuré et oublié. Vous souhaiterez donc peut-être ajouter une alerte de facturation à cloudfront au cas où quelqu'un "copierait" votre extrait de code et volerait 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 le supprimer

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. Il ressemblera à quelque chose comme ceci, à savoir 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. Vérifiez maintenant votre site Web de Google PageSpeed ​​Insights. Il n'affichera pas l'avertissement pour Leverage Browser Caching Google Analytics. Et le seul problème avec cette solution est de mettre à jour régulièrement le script Analytics manuellement.

En 2020, les agents utilisateurs de Page Speed ​​Insights sont: "Chrome-Lighthouse" pour mobile et "Google Page Speed ​​Insights" pour ordinateur.

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Chrome-Lighthouse') === false  || stripos($_SERVER['HTTP_USER_AGENT'], 'Google Page Speed Insights') === false): ?>
// your google analytics code and other external script you want to hide from PageSpeed Insights here
<?php endif; ?>

Vous pouvez réduire tous vos scripts dans la page, y compris en analytics.jsutilisant:

• Certaines technologies côté serveur ( https://github.com/matthiasmullie/minify )
• Service externe ( http://www.cloudflare.com )

N'oubliez pas de réduire les fichiers avant de les utiliser. Sinon, cela consommera plus de temps de traitement.