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


243

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.


1
J'ai utilisé la méthode cron, sans utilisation de cron (charges et caches en charge. Je peux partager du code php si vous le souhaitez). Et j'ai corrigé ma suggestion de fixation GA. Mais il n'y a pas eu de problème: j'ai laissé l'en-tête "Cache-Control: max-age = 604800". Ce qui est beaucoup plus élevé que 5 minutes de cache.
Roman Losev du

6
Est-ce vraiment une bonne idée? La mise en cache de ce fichier sur votre serveur signifie que le navigateur devra le télécharger à nouveau au lieu de réutiliser celui qu'il a déjà mis en cache en visitant d'autres sites à l'aide de Google Analytics. Cela peut donc ralentir légèrement vos visiteurs.
s427

Réponses:


241

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.


4
Intelligent ...... dommage que j'utilise la mise en cache des bords parce que ce script ne fonctionnera que si les demandes atteignent votre origine pour chaque demande :(
Amy Neville

49
Chargez-le via JS puis :)if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
Half Crazed

1
@Jim See stackoverflow.com/questions/10734968/… - vous utiliseriez cette méthode à l'intérieur de { }dans mon exemple, ainsi que tout autre JS que GA utilise (comme ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');ou autre)
Half Crazed

1
@Jim J'ai ajouté une réponse qui couvre cela.
Half Crazed

6
Attention: cela ne fonctionne plus. Page Speed ​​Insights optimisé par Lighthouse utilise un userAgent par défaut, qui ne peut plus être détecté.
David Vielhuber

39

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.


21

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.


2
En réagissant à la section "Remarque:", vous pouvez déclarer gacomme ga = function(){};précédemment l'extrait de ga();code pour échouer en mode silencieux lors de son exécution, afin que vous n'ayez pas à vérifier l'existence de cette fonction partout dans votre code.
István Pálinkás

1
Comment ajouter ceci dans le script <script async src = " googletagmanager.com/gtag/js?id=UA-xx6600xx-1 " > </… >
Navnish Bhardwaj

16

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.


68
Il veut savoir comment atteindre les 100, pas si 99 va bien.
Erick Engelhardt

4
Cette réponse n'est pas vraie, où le fichier Analytics.js est téléchargé à partir de n'a pas d'impact si les pistes d'analyse ou non. Le problème de l'hébergement de votre propre fichier d'analyse est que vous devez toujours mettre à jour manuellement vers la dernière version (quelques fois par an).
Matthew Dolman

1
Merci Matthew d'avoir signalé cela. Apparemment, j'avais tort, ce qui est bien, mais je ne pense toujours pas que ce soit une bonne idée d'héberger ce fichier sur votre propre serveur car je peux imaginer que cela créera beaucoup de nouveaux problèmes. La question OP était de savoir comment arriver à 100 sur la vitesse de page et ma réponse est de ne pas s'inquiéter d'atteindre ces 100. Cela peut être une réponse vraiment ennuyeuse, mais c'est moi.
Leo Muller

3
une bonne réponse pour les personnes qui se sont perdues en pensant à 99 n'est pas assez bonne. mieux consacrer votre temps à de vrais problèmes.
linqu

@ErickEngelhardt Vous avez raison, mais si les gens posent une question où vous pensez qu'ils ne visent pas le meilleur objectif, vous devez leur donner une idée de la solution qui pourrait leur être la meilleure.
observateur

10

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.


7

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

7
Que faire si le visiteur ne fait pas défiler mais clique simplement sur un lien. Il ne sera pas comptabilisé en analytique.
Ross Ivantsiv

@RossIvantsiv, vous pouvez également gérer le clic!
ar099968

6

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


2
Soyez averti que cela n'est explicitement pas pris en charge par Google: support.google.com/analytics/answer/1032389?hl=en
acier

6

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


Il ne contourne pas complètement Adblock (il bloque toujours les appels ajax), mais au moins vous obtenez des sessions et des pages vues
NiloVelez

5

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>


4

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.



0

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.


0

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 ne rend pas votre site plus rapide" ce n'est pas nécessairement vrai. Comme en théorie, compresser un JS concaténé non critique un fichier avec des analyses incluses devrait compresser légèrement plus petit qu'un fichier d'analyse séparé en raison du dictionnaire partagé. Peut-être plus de problèmes que ça en vaut la peine.
Ray Foss

0

Cela peut faire l'affaire :)

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

0

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.


Où est la connexion à Pagespeed?
Nico Haase

En ne chargeant pas analytics.js, vous évitez la pénalité de vitesse de page.
Jonathan

Ouais. Et en ignorant tout ce CSS, JS et images de votre page, il se chargera encore plus rapidement. Ignorer Google Analytics n'est pas une option selon l'OP
Nico Haase

Sauf que les données sont toujours enregistrées dans Google Analytics, je pense que ma réponse est valide et a clairement déclaré que, selon le niveau de détail requis de Google Analytics, il peut être utile de considérer qui enregistrerait encore les visites, les interactions de l'interface utilisateur et potentiellement d'autres mesures . Si l'OP cherche à optimiser pour le 1% final, cela pourrait être une optimisation à considérer.
Jonathan

@NicoHaase J'ai édité mon commentaire pour, espérons-le, clarifier mon point. Intéressé à entendre vos pensées.
Jonathan

0

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


0

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.


0

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; ?>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.