如何优化 Google Analytics 代码的加载性能

Google 提供的 Analytics （分析）绝对是网站媒体或网络应用的首选统计分析工具，功能强大且方便易用。本文将着重介绍如何优化 Google Analytics 代码，使其添加到网页中时降低第三方代码的影响，提升加载性能。

如何获取 Google Analytics 代码

这一段是写个新手朋友的，知道此步骤的朋友可以跳过本节往下阅读。

自 Google Analytics 改版后，让部分用户找不到获取 Google Analytics 代码的地方了，所以笔者特用截图的方式将整个过程呈现出来。

在 Google Analytics V4 中，不论是网站媒体还是应用都被称作数据流（Data streams）。

登录 Analytics 后，在媒体资源页面的左下角有个“管理”按钮，点击进入网站数据流详情页，如下图：

Analytics 数据流管理

如果已经创建好了网站数据流则按第三步所示点击查看该网站数据流详情，否则需要新增一个网站数据流。

网站数据流详情页中查看 Google 代码：

网站数据流详情页演示

点击配置代码设置即可进入到 Google 代码配置页面，点击“安装说明”链接，就能获取 Google Analytics 代码，如下示例：

获取 Google Analytics 代码示例

如何优化 Google Analytics 代码

如果将这段代码直接插入到网页的 元素中，会一定程度的影响网页加载性能，使用 PageSpeed Insights 等测试工具时会得到以下警告信息：

第三方代码将主线程阻止了 300 毫秒

如果要将第三方的影响降至最低，最好的方法就是使用推迟加载技术，仅当下列条件满足任意一种时才加载 Google Analytics 代码：

当检测到鼠标有移动或点击时。

当检测到屏幕有滚动时。

当网页加载完成且停留了10秒后。

实现以上推迟加载方式的有两种推荐的方法：

1、使用 WP Rocket 或 Perfmatters 等