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

我用preact开发了一个web应用程序。webapp的总大小约为30KB（谷歌分析约为14KB）。我想添加谷歌分析，但我不想谷歌分析减缓初始页面加载。建议包含analytics.js（）的方法是

window.ga=window.ga | |函数（）{（ga.q=ga.q | |）。
[]）。推送（参数）}；ga.l=+新日期；
ga（“创建”、“UA-XXXXX-Y”、“自动”）；
ga（‘发送’、‘页面浏览’）；
. 

这很好，但是analytics.js在我的其他东西下载之前就被下载了。我很确定这会影响页面加载，正如您在这张图片中看到的）

---

在页面加载完成后，推荐使用什么方法下载分析。（就我而言，在“菜单”下载后）

GA现在不应该让你的网站慢下来
您的脚本是异步的，这意味着它不会阻止浏览器执行其他任务。因此，从您提供的跟踪屏幕截图中，我们确实可以看到，当请求

analytics.js

时，浏览器正在进行其他并发请求（

bundle.js

，

，menu

），所以您很好

页面加载后加载GA
如果您仍然希望在页面加载后推迟GA的加载以获得最佳实践，请稍后调用GA：

• 使用Javascript：
• 使用标记管理器：例如，使用加载的

  窗口

  触发器，当浏览器加载完页面时触发该触发器：

---

我知道这很旧，但是您可以在标记中添加

defer

属性，而不是

async

属性。Async将异步下载文件，但在运行javascript时仍会阻止主线程。Defer还将异步下载，但将等待运行javascript，直到HTML解析

---

如果确实不希望GA影响加载速度，可以添加一个事件侦听器，在注入GA脚本标记之前等待窗口“加载”事件。对于一个30KB的web应用程序来说，这可能有点过头了，但GA几乎不会影响你的页面加载。

我认为对analytics.js的请求会减慢其他请求的速度。如果analytics.js不被下载，浏览器下载其他js文件的速度会更快吗？这将增加一个非常小的延迟，无论浏览器触发异步请求需要多少时间，这可能小于1ms。因此，是否要将GA延迟到页面加载之后，这取决于您。如果考虑整体性能，请尝试将

bundle.js

的大小从

320KB

降下来，因为它可能依赖于渲染块资源。将所有内容捆绑到一个文件中并不一定是最佳选择，重要的是优化关键渲染路径：感谢您的详细回答。这只是开发模式。缩小+Gziped大小约为20Kb..不客气。是的

20Kb

听起来更像是制作。在如此低的大小下，您甚至可能想要内联它，因此您只需一次往返就可以节省，特别是当它似乎会触发加载其他资产（

route categories….js

）时，假设HTML/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 -->