因Google Analytics而导致PageSpeed Insights 99/100 - 如何缓存GA？-Java 学习之路

229

我正在寻求在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？

谢谢 .

19 回答

224
好吧，如果谷歌欺骗你，你可以欺骗谷歌：

这是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分，那么就可以做到 .
回复于 2024-04-25T16:43:36+08:00
-13

有一个名为ga-lite的Google Analytics js库的子集，您可以根据需要进行缓存 .

该图书馆使用Google Analytics的公共REST API将用户跟踪数据发送给Google . 您可以从the blog post about ga-lite了解更多信息 .

Disclaimer: 我是这个图书馆的作者 . 我努力解决这个具体问题，我发现最好的结果就是实现这个解决方案 .

回复于 2024-04-25T16:43:36+08:00
1

我不担心 . 不要把它放在你自己的服务器上，听起来这是谷歌的一个问题，但它一样好 . 将文件放在您自己的服务器上会产生许多新问题 .

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

如果您对此感觉不错，请在Google洞察本身上运行Google数据分析网址，大笑，放松并继续您的工作 .

回复于 2024-04-25T16:43:36+08:00

这是一个使用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() 之前始终检查用户代理，否则可能会出错 .

回复于 2024-04-25T16:43:36+08:00

1
在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”等属性中，或者如果它们在外部资源中，那么将取消不合格方法 . 预计这些案件很少见 .
回复于 2024-04-25T16:43:36+08:00
0

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

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

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

回复于 2024-04-25T16:43:36+08:00
0

存储localy analytics.js，但不建议谷歌：https://support.google.com/analytics/answer/1032389?hl=en

不建议原因谷歌可以在他们想要的时候更新脚本，所以只需做一个每周下载分析javascript的脚本，你就不会遇到麻烦了！

By the way this solution prevent adblock from blocking google analytics scripts

回复于 2024-04-25T16:43:36+08:00

您可以通过自己的服务器代理谷歌分析脚本，在本地保存并每小时自动更新文件，以确保它始终是谷歌的最新版本 .

我现在已经在几个网站上完成了这一切，并且一切正常 .

Google Analytics Proxy Route in NodeJS / MEAN Stack

这就是我在my blog上实现它的方法，它是用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);
    }
});

Google Analytics Proxy Action Method in ASP.NET MVC

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

Updated Google Analytics Script

在客户端，我将分析路径附加到当前日期到小时，以便浏览器不会使用超过一小时的缓存版本 .

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

回复于 2024-04-25T16:43:36+08:00

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

回复于 2024-04-25T16:43:36+08:00

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的分数，那么就可以做到 .

回复于 2024-04-25T16:43:36+08:00

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

回复于 2024-04-25T16:43:36+08:00

6

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

但是，出于演示目的，请遵循以下指南：http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

回复于 2024-04-25T16:43:36+08:00
10
尝试这只是插入之前
```
<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
回复于 2024-04-25T16:43:36+08:00
18

Google cautions反对使用分析脚本的本地副本 . 但是，如果您这样做，您可能希望使用插件的本地副本和调试脚本 .

第二个具有激进缓存的concern是您将从缓存页面获得点击 - 这些页面可能已更改或已从网站中删除 .

回复于 2024-04-25T16:43:36+08:00

这可能会成功:)

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

回复于 2024-04-25T16:43:36+08:00

0
根据您对Google Analytics数据的使用情况，如果您需要基本信息（例如访问，UI互动），您可能根本不能包含analytics.js，但仍然可以在GA中收集数据 .

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

当您将传输方法明确设置为图像时，您可以看到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请求 .

但是，如果您需要更高级别的细节，那么您可能不值得努力 .
回复于 2024-04-25T16:43:36+08:00
4

您可以设置以www.google-analytics.com作为其原始服务器的 Cloud 端分发，并在 Cloud 端分发设置中设置更长的过期标头 . 然后在Google代码段中修改该域 . 这可以防止您自己的服务器上的负载以及在cron作业中不断更新文件的需要 .

这是安装和忘记 . 因此，您可能希望向 Cloud 端添加结算提醒，以防有人“复制”您的代码段并窃取您的带宽;-)

编辑：我尝试了它并不是那么容易，Cloudfront通过Cache-Control标头没有简单的方法来删除它

回复于 2024-04-25T16:43:36+08:00
4

在新选项卡中打开https://www.google-analytics.com/analytics.js文件，复制所有代码 .

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

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

重命名文件ga-local.js

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

最后，将新的Google分析代码放入网页的页脚 .

你已准备好出发 . 现在查看您的Google PageSpeed Insights网站 . 它不会显示Leverage Browser Caching Google Analytics的警告 . 此解决方案的唯一问题是，定期手动更新Google Analytics脚本 .

回复于 2024-04-25T16:43:36+08:00
18
您可以使用以下内容缩小页面中的所有脚本，包括 analytics.js ：
- 一些服务器端技术（https://github.com/matthiasmullie/minify）
- 外部服务（http://www.cloudflare.com）
请记住在使用之前缩小文件 . 否则会消耗更多的处理时间 .
回复于 2024-04-25T16:43:36+08:00

因Google Analytics而导致PageSpeed Insights 99/100 - 如何缓存GA？

19 回答

PHP

JavaScript

相关问题