我使用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 在页面加载完成后再进行下载。(在我的情况下是在“菜单”被下载后)
bundle.js
的大小从320KB
减小,因为它可能是渲染阻塞资源的依赖项。将所有内容捆绑成一个文件并不一定是最佳选择,重要的是要针对关键呈现路径进行优化:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ - Max20Kb
听起来更像是生产环境所需的大小。在这样低的大小下,您甚至可能想要将其内联,以便在一次往返中节省时间,特别是因为它似乎会触发其他资源(route-categories....js
)的加载,假设HTML/JS缓存失效得到了妥善处理。 - Max