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

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

如何获取 Google Analytics 代码

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

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

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

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

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

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

如何优化 Google Analytics 代码

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

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

当检测到鼠标有移动或点击时。
当检测到屏幕有滚动时。
当网页加载完成且停留了10秒后。

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

1、使用 WP Rocket 或 Perfmatters 等 WordPress 优化插件的 JavaScript 推迟加载功能。

2、手动添加经过优化后的 Google Analytics 代码：

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {
		var loadGTag = function() {
			if (window.gtagScriptLoaded) return;
			window.gtagScriptLoaded = true;
			var script = document.createElement('script');
			script.async = true;
			script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
			document.head.appendChild(script);

			script.onload = function() {
				window.dataLayer = window.dataLayer || [];
				function gtag(){dataLayer.push(arguments);}
				gtag('js', new Date());
				gtag('config', 'G-XXXXXXXXXX');
			};
		};
		setTimeout(loadGTag, 10000);
		document.addEventListener('mousemove', loadGTag);
		document.addEventListener('scroll', loadGTag);
	});
</script>

注意将上述代码中的两处 G-XXXXXXXXXX 替换成自己的 Analytics 跟踪 ID。