在页面加载后加载谷歌分析

Question

我使用preact开发了一个web应用程序。整个web应用程序的总大小大约为30KB（Google Analytics大约为14KB）。我想添加Google Analytics，但我不希望它减慢初始页面加载速度。推荐的方法是包含analytics.js（）。

<!-- Google Analytics -->
<script> 
    window.ga=window.ga||function(){(ga.q=ga.q|| . 
    []).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'> . 
</script>
<!-- End Google Analytics -->

这个方案运行良好，但是 analytics.js 在其他内容下载之前就已经下载完成了。我相信这会影响页面的加载速度，可以从这张图片中看出。

有什么推荐的方法可以让 analytics.js 在页面加载完成后再进行下载。（在我的情况下是在“菜单”被下载后）

- Simon Ludwig

Answer 1

我知道这篇文章有些旧了，但你可以在标签中添加defer属性而不是async属性。Async会异步下载文件，但在运行JavaScript时仍会阻塞主线程。Defer也会异步下载，但会等待HTML解析完成后再运行JavaScript。这是解释async和defer差异的众多文章之一

如果您真的不想让GA影响到加载速度，可以添加一个事件监听器，在注入GA脚本标记之前等待窗口“load”事件。对于一个30KB的Web应用程序来说，这可能过于繁琐，但GA对页面加载几乎没有任何影响。

- JakeAve

Answer 2

GA现在不应该减慢您的网站速度
您的脚本是async，这意味着它不会阻塞浏览器执行其他任务。因此，从您提供的跟踪截图中，我们确实可以看到，在请求analytics.js时，浏览器正在进行其他并发请求（bundle.js，,menu），所以一切正常。

页面加载后加载GA
如果您仍然想推迟在页面加载后加载GA以符合最佳实践，请稍后调用GA：

• 使用JavaScript：Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it
• 使用标签管理器：例如使用Google Tag Manager，使用Window Loaded触发器，该触发器在浏览器完成页面加载时触发：https://productforums.google.com/forum/#!topic/tag-manager/xOMFkfH0U4k;context-place=forum/tag-manager

- Max

---

我认为请求analytics.js会减慢其他请求的速度。如果不下载analytics.js，浏览器会更快地下载其他js文件，是吗？ - Simon Ludwig

它会增加非常小的延迟，无论浏览器需要多长时间来触发异步请求，这可能是<1ms。因此，是否要推迟GA到页面加载后取决于您。如果整体性能是一个问题，请尝试将bundle.js的大小从320KB减小，因为它可能是渲染阻塞资源的依赖项。将所有内容捆绑成一个文件并不一定是最佳选择，重要的是要针对关键呈现路径进行优化：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ - Max

感谢您详细的回答。这仅是dev模式。经过压缩和Gzip处理，大小约为20Kb。 - Simon Ludwig

不客气。是的，20Kb听起来更像是生产环境所需的大小。在这样低的大小下，您甚至可能想要将其内联，以便在一次往返中节省时间，特别是因为它似乎会触发其他资源（route-categories....js）的加载，假设HTML/JS缓存失效得到了妥善处理。 - Max