GA4 网页加载速度分析报告创建教程

How To Analyze Page Load Time Data In Ga4Google Analytics 4

从2023年7月开始,谷歌分析版本全面切换为GA4版本了,之前的UA(Universal Analytics)版本也会停用。UA版本的谷歌分析可以很方便查看到页面加载速度,但是GA4却没有这个报告。网站的加载速度对于网站的优化是一个重要的部分,无论是广告还是SEO的排名。从用户的角度出发,网站的加载速度也是重要的客户体验指标。所以,我们有必要时刻关注网站的加载速度。

GA4不能直接查看网站加载速度,但是今天介绍的方法可以解决这个问题。今天的方法主要用到Google 跟踪代码管理器 (GTM) 和Looker Studio两个工具搭配GA4使用。这里注意一点,就算你的GA4不是通过GTM部署的,今天的方法也是适用的。

第 1 步:变量(Variables)

你可以通过https://tagmanager.google.com/ 登陆GTM后台,在左侧的导航栏选择“Variables”,然后在“User-Defined Variables”点击”New”,创建新的变量。

点击” Variable Configuration”,然后在”Page Varibales”选择” Custom JavaScript”作为变量的类型。

该变量可以重命名为“页面加载时间”,并且代码可以合并到自定义 JavaScript 中。

变量命名为” Page Load Time”,并把下面的代码粘贴到自定义变量中。

自定义 JavaScript 代码:

function() {




	if (window.performance && window.performance.getEntriesByType) {


		var entries = window.performance.getEntriesByType("navigation");


		if (entries.length > 0) {


			var navTiming = entries[0];


			var pageLoadTime = navTiming.loadEventEnd - navTiming.startTime;


		return Math.round(pageLoadTime / 100) / 10;


		}


	}


}


第 2 步:触发器(Triggers)

回到左侧的导航栏,选择”Triggers”,然后点击”New”,创建新的触发器。

点击“Trigger Configuration”配置触发器,然后在” Page View”中选择” Window Loaded”作为触发器的类型。

触发器可以重命名为“Page Loaded”并保存。

我们还需要创建第二个触发器。同样的,我们回到左侧的导航栏,选择”Triggers”,然后点击”New”,创建新的触发器。这次,我们在”Other”中选择”Custom Event“作为触发器的类型。

我们把触发器命名为“Page Load Time Less Than 0”。在” Event name“填上”.*“,注意是一点加上星号。然后把”Use regex matching”的复选框选上。在” This trigger fires on”选择” Some Custom Events”。在下面的条件,我们要选择之前定义好的“Page Load Time”,并设置为”less than 0”,然后保持。

第 3 步:标记(Tags)

同样的,我们回到左侧的导航栏,选择”Tags”然后点击”New”,新建标记。

然后点击” Tag Configuration”,选择” Google Analytics: GA4 Event”作为标记的类型。

在” Configuration Tag”中,我们选择要设置的GA4的ID,如果我们GA4的代码是直接安装在网站后台,我们可以选择”None-Manually Set ID”,如果我们是通过GTM安装GA4就可以选择对应的ID。如果我们选择” None-Manually Set ID”,我们需要在” Measurement ID”中填上GA4对应的Measurement ID。事件名我们可以设置为“Page_load_time”,同时,我们要在” Event Parameters”设置事件的参数。把” Page Name”设置为”loading_time_sec”,把” Value”设置为“{{Page Load Time}}”。

点击” Triggering”设置触发器在” Firing Triggers”选择” Page Loaded”,在” Exceptions”选择” Page Load Time Less Than 0”。

第4步:参数(Custom merics)

这一步,我们要在GA4中设置。我们通过路径Admin-Custom definitions-Custom metrics,设置GA4的自定义参数。我们按照下面的截图设置即可。点击” Create custom metrics”,把“Metric name”设置为“Page Load Time”,把” Event parameter”设置为”loading_time_sec”,把” unit of measurement”设置为” Seconds”。

第5步:测试并发布

GA4 平台正在接收页面加载时间的值。我们可以回到GTM,测试一下我们设置的标记是否能正常触发,如果没问题,那么,我们就可以发布啦。

第 6 步:使用 Looker Studio

最后一步,我们要用到Looker Studio查看我们的报告。我们要把GA4连接到Looker Studio,我们可以在” Dimension”中选择” Page path”,在“metric”中,我们要把Average Page Load Time、Count Page Load Time拉出来查看。

我们可以创建一个过滤器, Event name Equal to page_load_time,以防发生错误,或者页面加载时间为零秒或更短的数据出现。

页面加载时间数据分析

在分析页面加载时间数据时,建议考虑以下因素:

执行分析以识别加载时间较慢的网页。 识别加载时间超过网站平均持续时间的网页。建议优化这些页面,以增强用户体验并最大限度地降低跳出率。

分析高流量的页面。 建议优先考虑高流量网页的优化工作,因为它们往往对网站的整体性能和用户体验产生更明显的影响。

将用户反馈纳入分析过程。 对用户调查和反馈的分析可以帮助识别可能因加载时间缓慢而对用户体验产生不利影响的特定页面或元素。

优化页面加载速度的建议

可以实施以下建议来缩短页面加载时间:

执行图像优化。 根据内容和浏览器兼容性优化文件大小并选择最佳格式(例如 WebP、JPEG 或 PNG)。

通过缩小和压缩技术优化资源大小。应用文件大小减小技术,例如通过消除冗余字符来缩小 HTML、CSS 和 JavaScript 文件。此外,利用 gzip 压缩进一步减小文件大小。

通过实施浏览器缓存来优化网站性能。定义缓存协议,使 Web 浏览器能够缓存并重用先前获取的资源,从而减少后续页面加载持续时间。

利用内容交付网络 (CDN)。内容分发网络 (CDN) 有助于在各种服务器之间分发内容,从而增强用户基于地理位置的可访问性。

通过检查 Google Analytics 中的页面加载时间指标并实施优化策略,可以改进网站功能并增强用户体验。这可以提高参与度和转化率。

滚动至顶部