Question

我使用preact开发了一个Web应用程序。 webapp的总大小约为30KB gzip（Google Analytics大约14KB）。我想添加谷歌分析，但我不希望谷歌分析减慢初始页面加载速度。包含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会被下载。我很确定这会影响页面加载，如图所示）

在页面加载完成后下载分析的推荐方法是什么？（在我的情况下，菜单＆＃39;下载后）

Answer 1

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

Answer 2

我知道这很旧，但是您可以在标签中添加defer属性而不是async属性。 Async会异步下载文件，但在运行javascript时它仍会阻止主线程。 Defer也将异步下载，但将等待运行javascript，直到HTML解析为止。 This is one of many articles that explains the difference between async and defer

如果您真的不想让GA影响加载速度，则可以添加一个事件监听器，该事件监听器会在插入GA脚本标签之前等待窗口“加载”事件。对于一个30KB的网络应用来说，这可能算是过高了，但是GA对您的页面加载几乎没有影响。

页面加载后加载谷歌分析

2 个答案: