google-analytics manager - PageSpeed Insights 99/100 à cause de Google Analytics-Comment mettre en cache GA?





docs developers (17)


Cela peut faire l'affaire :)

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

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.




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.




Dans les documents Google, ils ont identifié un filtre 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 docs:

Le filtre make_google_analytics_async est expérimental et n'a pas fait l'objet de nombreux tests dans le monde réel. Un cas où une réécriture entraînerait 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 de disqualification seront manquées si elles arrivent 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 aperçu de la vitesse de la page Google ) charges google analitycs code seulement si l'utilisateur fait 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);



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.













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

il n'est pas recommandé car google peut mettre à jour un script quand il le souhaite, il suffit donc de faire un script qui télécharge javascript analytics chaque semaine et vous n'aurez pas de problème!

D'ailleurs, cette solution empêche Adblock de bloquer les scripts google analytics




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.







Je ne m'inquiéterais pas pour ça. Ne le mettez pas sur votre propre serveur, il semble que ce soit un problème avec Google, mais aussi bon que possible. Mettre le fichier sur votre propre serveur créera beaucoup de nouveaux problèmes.

Ils ont probablement besoin que le fichier soit 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 avez un problème avec cela, lancez l'URL Google insights sur Google insights, amusez-vous, détendez-vous et continuez votre travail.




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

C'est la configuration et oublier. Vous pouvez donc ajouter une alerte de facturation à cloudfront au cas où quelqu'un "copie" votre extrait 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




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>



Google support.google.com/analytics/answer/1032389?hl=en 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 concern avec la mise en cache agressive est que vous obtiendrez des hits à partir des pages mises en cache - qui ont peut-être changé ou ont été supprimées du site.




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

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




L'extension Chrome de Google Analytics Debugger est très utile pour tester le code Google Analytics. L'extension génère les données envoyées à Google Analytics dans la fenêtre de la console JavaScript. Les jours où vous attendez… en espérant / priant de voir votre test Les pages vues dans Google Analytics sont terminées.

Vous trouverez ci-dessous un exemple de certaines sorties que l'extension imprime dans la fenêtre de la console JavaScript:

Track Pageview
Tracking beacon sent!

Account ID               : UA-2345678-90
Page Title               : About
Host Name                : www.yourdomain.org
Page                     : /about
Referring URL            : -
Language                 : en-us
Encoding                 : UTF-8
Flash Version            : 11.1 r102
Java Enabled             : true
Screen Resolution        : 1680x1050
Color Depth              : 16-bit
Ga.js Version            : 5.2.4d
Cachebuster              : 476867651






google-analytics pagespeed insight