Google Analytics的PageSpeed Insights 99/100 – 如何cachingGA？

我正在寻求在PageSpeed达到100/100，我几乎在那里。 我试图find一个很好的解决scheme来cachingGoogle Analytics。

这是我得到的消息：

利用浏览器caching设置静态资源的HTTP头中的有效期限或最大使用期限指示浏览器从本地磁盘加载之前下载的资源，而不是通过networking加载。 利用浏览器caching提供以下caching资源： http : //www.google-analytics.com/analytics.js （2小时）

我发现唯一的解决scheme是从2012年，我不认为这是一个很好的解决scheme。 从本质上讲，您可以复制GA代码并自行托pipe。 然后，您运行一个cron作业，每天重新检查Google一次，以获取最新的GA代码并将其replace。

Leverage Browser Cache Optimize Google Analytics

在使用Google Analytics（分析）时，还可以做些什么来达到100/100？

谢谢。

那么，如果Google欺骗你，你可以骗回谷歌：

这是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的分数，这将做到这一点。

有一个名为ga-lite的Google Analytics（分析）js库的子集，您可以根据需要进行caching。

该图书馆使用Google Analytics的公共REST API将用户跟踪数据发送给Google。 您可以阅读关于ga-lite的博客文章 。

免责声明：我是这个图书馆的作者。 我努力解决这个问题，我发现最好的结果就是实现这个解决scheme。

我不会为此担心的。 不要把它放在你自己的服务器上，这听起来像这是一个谷歌的问题，但尽可能好。 把文件放在你自己的服务器上会产生很多新的问题。

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

如果您遇到问题，请在Google洞察本身上运行Google洞察url，发笑，放松并继续进行工作。

下面是一个非常简单的使用JS的解决scheme，用于基本的GA跟踪，也可以用于边缘caching/代理（这是从注释转换而来）： 

 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()之前总是检查用户代理，否则可能会出错。

在Google文档中，他们确定了一个可以asynchronous加载脚本的pagespeedfilter： 

 ModPagespeedEnableFilters make_google_analytics_async

您可以在这里find文档： https ： //developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

有一点需要强调的是，filter被认为是高风险的。 从文档：

make_google_analytics_asyncfilter是实验性的，并没有进行广泛的实际testing。 重写会导致错误的一种情况是filter未能调用返回值的Google Analytics方法。 如果find这样的方法，则重写被跳过。 但是，如果他们来到加载之前，属于诸如“onclick”之类的属性，或者他们处于外部资源中，则不合格方法将被忽略。 预计这些案例很less。

您可以尝试在本地托pipeanalytics.js并使用caching脚本或手动更新其内容。

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

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

存储localy analytics.js，但不推荐使用google： https ： //support.google.com/analytics/answer/1032389？hl = zh_CN

它不被推荐，因为谷歌可以更新脚本时，他们想要的，所以只需做一个脚本，每周下载分析的JavaScript，你不会有麻烦！

顺便说一下这个解决scheme阻止adblock阻止谷歌分析脚本

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

我已经在几个网站上完成了这一切，所有工作都很好。

NodeJS / MEAN堆栈中的Google Analytics代理路由

这是我在我的博客上用MEAN堆栈实现的。 

 router.get('/analytics.js', function (req, res, next) { var fileUrl = '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构build的其他网站上实现的。

例如http://www.marshallgibson.com.au ，其满分100/100。 

 public class ProxyController : BaseController { [Compress] public ActionResult GoogleAnalytics() { var fileUrl = "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脚本

在客户端，我将当前date的分析path附加到小时，以便浏览器不会使用超过一个小时的caching版本。 

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

varvy.com （ 100/100 Google页面速​​度洞察 ）仅在用户进行页面滚动时才加载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);

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的分数，那么这样做是可以的。

要解决这个问题，你将不得不在本地下载文件并运行一个cron作业来保持更新。 注意：这不会让你的网站更快，所以最好只是忽略它。

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

试试这个插入之前 

 <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

Google 警告不要使用本地的分析脚本副本。 但是，如果你这样做，你可能会想要使用插件和debugging脚本的本地副本。

积极caching的第二个问题是，您将从caching页面获得点击 – 可能已经更改或已从网站中删除。

这可能会诀窍:) 

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

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

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

您可以在页面中缩小所有脚本，包括analytics.js使用：

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

Interesting Posts