【问题标题】:PageSpeed Insights 99/100 because of Google Analytics - How can I cache GA?PageSpeed Insights 99/100 因为 Google Analytics - 我如何缓存 GA?
【发布时间】:2015-05-23 15:31:41
【问题描述】:

我正在寻求在 PageSpeed 上达到 100/100,而且我快到了。我正在尝试找到一个缓存 Google Analytics 的好解决方案。

这是我收到的消息:

利用浏览器缓存 在静态资源的 HTTP 标头中设置到期日期或最长期限会指示浏览器从本地磁盘而不是通过网络加载先前下载的资源。 将浏览器缓存用于以下可缓存资源: http://www.google-analytics.com/analytics.js(2 小时)

我发现的唯一解决方案是 2012 年的,我认为这不是一个好的解决方案。本质上,您复制 GA 代码并自己托管。然后,您每天运行一次 cron 作业以重新检查 Google 以获取最新的 GA 代码并替换它。

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

在使用 Google Analytics 的同时,我还能做些什么来达到 100/100?

谢谢。

【问题讨论】:

  • 我使用了 cron 方法,没有使用 cron(加载和缓存 onload。如果你愿意,我可以共享 php 代码)。我得到了修复我的 GA 修复建议。但那里留下的小问题:我留下了“Cache-Control:max-age = 604800”标题。这比 5 分钟缓存要高得多。
  • 这真的是个好主意吗?在您的服务器上缓存此文件意味着浏览器将不得不重新下载它,而不是通过使用 Google Analytics(分析)访问其他站点来重新使用它已经缓存的文件。所以它实际上可能会稍微减慢访问者的速度。

标签: google-analytics pagespeed


【解决方案1】:

好吧,如果谷歌在欺骗你,你可以欺骗谷歌:

这是 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”

您可以插入条件以避免将分析脚本提供给 PageSpeed:

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

显然,它不会带来任何真正的改进,但如果您唯一关心的是获得 100/100 的分数,那么它会做到。

【讨论】:

  • 聪明......可惜我使用边缘缓存,因为这个脚本只有在每个请求都到达你的来源时才有效:(
  • 然后通过 JS 加载它:) if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
  • @Jim See stackoverflow.com/questions/10734968/… -- 在我的示例中,您将在 { } 中使用此方法,以及 GA 使用的任何其他 JS(例如 ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); 或其他)跨度>
  • 恕我直言,这是作弊!认为您可以将该规则应用于许多其他事情,例如通过不加载内容来提高速度。迟早,Google 可能会通过比较来自不同用户代理的 HTML 来惩罚使用此规则的网站。
  • 警告:这不再起作用了。由 Lighthouse 提供支持的 Page Speed Insights 使用了一个无法再检测到的默认 userAgent。
【解决方案2】:

有一个名为 ga-lite 的 Google Analytics js 库子集,您可以随意缓存它。

该库使用 Google Analytics 的公共 REST API 将用户跟踪数据发送给 Google。你可以从the blog post about ga-lite阅读更多内容。

免责声明:我是这个库的作者。我在这个具体问题上苦苦挣扎,我发现最好的结果是实施这个解决方案。

【讨论】:

    【解决方案3】:

    这是一个使用 JS 的非常简单的解决方案,用于基本的 GA 跟踪,它也适用于边缘缓存/代理(这是从评论转换而来的):

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

    注意:这是默认的 GA 脚本。您可能还有其他的ga() 调用,如果是这样,您需要在调用ga() 之前始终检查用户代理,否则可能会出错。

    【讨论】:

    • 对“注意:”部分做出反应,您可以在 sn-p 之前将ga 声明为ga = function(){};,以便在以ga(); 执行时静默失败,因此您不必检查这个函数在你的代码中无处不在。
    • 如何在脚本中添加这个
    • 注意:这可能不再有效。速度分数确实有助于搜索信号(请参阅developers.google.com/search/docs/guides/page-experience) - 到什么程度是未知的。
    【解决方案4】:

    我不会担心的。不要把它放在你自己的服务器上,这听起来像是谷歌的一个问题,但尽其所能。将文件放在您自己的服务器上会产生许多新问题。

    他们可能需要每次都调用该文件,而不是从客户端的缓存中获取它,因为这样您就不会计算访问次数。

    如果您对此感到满意,请在 Google 洞察本身上运行 Google 洞察 URL,大笑、放松并继续您的工作。

    【讨论】:

    • 他想知道他怎样才能达到 100,而不是 99 是否可以。
    • 这个答案不正确,从哪里下载 Analytics.js 文件不会影响分析跟踪。托管您自己的分析文件的问题是您总是必须手动更新到最新版本(一年几次)。
    • 感谢 Matthew 指出这一点。显然我错了,这很好,但我仍然认为在您自己的服务器上托管此文件不是一个好主意,因为我可以想象它会产生很多新问题。 OP 的问题是如何在 pagespeed 上达到 100,而我的答案是不用担心达到 100。这可能是一个非常烦人的答案,但这就是我。
    • 对于那些因为认为 99 不够好而迷路的人的好答案。更好地把时间花在真正的问题上。
    • @ErickEngelhardt 你是对的,但是如果人们问一个你认为他们没有以最佳目标为目标的问题,你应该提醒他们哪种解决方案可能更适合他们。
    【解决方案5】:

    在 Google 文档中,他们确定了一个 pagespeed 过滤器,它将异步加载脚本:

    ModPagespeedEnableFilters make_google_analytics_async
    

    您可以在此处找到文档:https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

    需要强调的一点是,过滤器被认为是高风险的。来自文档:

    make_google_analytics_async 过滤器是实验性的,尚未经过广泛的实际测试。重写会导致错误的一种情况是过滤器错过了对返回值的 Google Analytics 方法的调用。如果找到此类方法,则跳过重写。但是,如果取消资格的方法在加载之前出现,在“onclick”等属性中,或者在外部资源中,则会错过。预计这种情况很少见。

    【讨论】:

      【解决方案6】:

      您可以尝试在本地托管 analytics.js,并使用缓存脚本或手动更新其内容。

      js 文件一年只更新几次,如果您不需要任何新的跟踪功能,请手动更新。

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

      【讨论】:

      【解决方案7】:

      store localy analytics.js,但 google 不推荐: https://support.google.com/analytics/answer/1032389?hl=en

      不推荐,因为 google 可以随时更新脚本,所以只要每周做一个脚本下载分析 javascript,你就不会遇到麻烦!

      顺便说一句,这个解决方案可以防止 adblock 阻止谷歌分析脚本

      【讨论】:

      • 它并没有完全绕过 Adblock(它仍然会阻止 ajax 调用),但至少你可以获得会话和页面浏览量
      【解决方案8】:

      varvy.com (100/100 Google page speed insight) 仅在用户滚动页面时加载 google analitycs 代码:

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

      【讨论】:

      • 如果访问者不滚动而只是单击链接怎么办。他不会被计入分析。
      • @RossIvantsiv 你也可以处理点击!
      【解决方案9】:

      您可以通过自己的服务器代理 google 分析脚本,将其保存在本地并每小时自动更新文件,以确保它始终是来自 google 的最新版本。

      我现在已经在几个网站上完成了这项工作,一切正常。

      NodeJS / MEAN Stack 中的 Google Analytics 代理路由

      这就是我在使用 MEAN 堆栈构建的 my blog 上实现它的方式。

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

      ASP.NET MVC 中的 Google Analytics 代理操作方法

      这就是我在其他使用 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);
              }
          }
      }
      

      这是 MVC ProxyController 用于 Gzip 压缩的 CompressAttribute

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

      更新了 Google Analytics 脚本

      在客户端,我将带有当前日期的分析路径附加到小时,这样浏览器就不会使用超过一小时的缓存版本。

      <!-- 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>
      

      【讨论】:

        【解决方案10】:

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

        然后将路径https://www.google-analytics.com/analytics.js更改为https://yoursite.com/analytics.js

        【讨论】:

        【解决方案11】:

        PHP

        将此添加到您的 HTML 或 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

        这适用于 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 已经说过:显然,它不会带来任何真正的改进,但如果您只关心获得 100/100 的分数,那么它会做到。

        【讨论】:

          【解决方案12】:

          试试这个在之前插入

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

          请将 xx-xxxxxxx-x 更改为您的代码,请在此处查看实现http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

          【讨论】:

          • 请注意,这是针对 ga-lite 而不是标准分析
          【解决方案13】:

          在 2020 年,Page Speed Insights 用户代理是:用于移动设备的“Chrome-Lighthouse”和用于桌面设备的“Google Page Speed Insights”。

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

          【讨论】:

            【解决方案14】:

            Google cautions 反对使用分析脚本的本地副本。 但是,如果您这样做,您可能需要使用插件和调试脚本的本地副本。

            第二个concern 使用积极缓存是您将获得来自缓存页面的点击 - 这些页面可能已更改或已从站点中删除。

            【讨论】:

              【解决方案15】:

              要解决此问题,您必须在本地下载文件并运行 cron 作业以保持更新。注意:这根本不会使您的网站更快,因此最好忽略它。

              不过,出于演示目的,请遵循以下指南: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

              【讨论】:

              • “这不会让您的网站更快”这不一定是真的。从理论上讲,由于共享字典,对包含分析的非关键级联 JS 文件进行 gzip 压缩应该比单独的分析文件压缩得略小。也许麻烦多于它的价值。
              【解决方案16】:

              这可能会成功:)

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

              【讨论】:

                【解决方案17】:

                根据您对 Google Analytics(分析)数据的使用情况,如果您需要基本信息(例如访问、UI 交互),您可能根本不包含 analytics.js,但仍会在 GA 中收集数据。

                一种选择可能是使用缓存脚本中的测量协议。 Google Analytics: Measurement Protocol Overview

                当您将传输方法显式设置为 image 时,您可以看到 GA 如何构建自己的图像信标。

                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}
                

                您可以使用所需的负载创建自己的 GET 或 POST 请求。

                但是,如果您需要更高级别的详细信息,则可能不值得您付出努力。

                【讨论】:

                • Pagespeed 的连接在哪里?
                • 不加载 analytics.js 可以避免页面速度损失。
                • 是的。通过跳过页面中的所有 CSS、JS 和图像,它的加载速度会更快。根据 OP,跳过 Google Analytics 不是一种选择
                • 除了数据仍记录在 Google Analytics 中之外,我认为我的回答是有效的,并明确指出,根据 Google Analytics 所需的详细程度,这可能是一个值得考虑的选项,其中重要的是 仍会记录访问次数、UI 交互和可能的其他指标。如果 OP 想要优化最后的 1%,这可能是一个值得考虑的优化。
                • @NicoHaase 我编辑了我的评论,希望能让我的观点更清楚。有兴趣听听您的想法。
                【解决方案18】:

                您可以设置以 www.google-analytics.com 作为其源服务器的云端分发,并在云端分发设置中设置更长的到期标头。然后在 Google sn-p 中修改该域。这可以防止您自己的服务器上的负载以及在 cron 作业中不断更新文件的需要。

                这是设置&忘记。因此,您可能希望向云端添加计费警报,以防有人“复制”您的 sn-p 并窃取您的带宽;-)

                编辑:我试过了,这并不容易,Cloudfront 会通过 Cache-Control 标头,没有简单的方法可以删除它

                【讨论】:

                  【解决方案19】:

                  在新标签页中打开https://www.google-analytics.com/analytics.js文件,复制所有代码。

                  现在在您的网络目录中创建一个文件夹,将其重命名为 google-analytics。

                  在同一文件夹中创建一个文本文件并粘贴您在上面复制的所有代码。

                  重命名文件 ga-local.js

                  现在更改 URL 以在您的 Google Analytics 代码中调用您本地托管的 Analytics 脚本文件。它看起来像这样,即https://domain.xyz/google-analytics/ga.js

                  最后,将新的谷歌分析代码放入网页的页脚。

                  你可以走了。现在检查您的 Google PageSpeed Insights 网站。它不会显示 Leverage Browser Caching Google Analytics 的警告。此解决方案的唯一问题是,要定期手动更新分析脚本。

                  【讨论】:

                    【解决方案20】:

                    您可以使用以下方法缩小页面中的所有脚本,包括analytics.js

                    请记住在使用之前缩小文件。否则会消耗更多的处理时间。

                    【讨论】:

                    猜你喜欢
                    • 2016-12-05
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-12-24
                    • 2019-07-09
                    • 2021-07-17
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多