[Google-Analytics] PageSpeed Insights 99/100 à cause de Google Analytics - Comment mettre en cache GA?


Answers

Il existe un sous-ensemble de la bibliothèque js Google Analytics appelée 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 de l'article de blog sur ga-lite .

Disclaimer: Je suis l'auteur de cette bibliothèque. J'ai lutté avec ce problème spécifique et le meilleur résultat que j'ai trouvé était de mettre en œuvre cette solution.

Question

Je suis sur une quête pour atteindre 100/100 sur PageSpeed ​​et je suis presque là. 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'une limite d'âge 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. 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. Essentiellement, vous copiez le code GA et l'hébergez vous-même. Vous exécutez ensuite un travail cron pour revérifier Google une fois par jour pour saisir 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.




Voici une solution très simple utilisant JS, pour le suivi GA de base, 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 c'est le cas, vous devrez toujours vérifier l'agent utilisateur avant d'appeler ga() , sinon il risque d'y avoir une erreur.




Cela peut faire l'affaire :)

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



En fonction de votre utilisation des données Google Analytics, si vous souhaitez obtenir des informations de base (telles que des visites, des interactions avec l'interface utilisateur), analytics.js peut ne pas être inclus du tout, mais collecter des données dans Google Analytics.

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 crée 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 requise.

Cependant, si vous avez besoin d'un plus grand niveau de détails, cela ne vaudra probablement pas votre effort.




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

Maintenant, créez un dossier dans votre répertoire Web, renommez-le 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 à 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. Vérifiez maintenant votre site Web de Google PageSpeed ​​Insights. Il ne montrera 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.










Vous pouvez utiliser le script google analytics via votre propre serveur, le sauvegarder 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.

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

C'est le CompressAttribute utilisé par 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

Du côté client, j'ajoute le chemin d'analyse avec la date actuelle jusqu'à l'heure afin que le navigateur n'utilise pas une version en cache 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>



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>

déjà dit: Evidemment, 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.