核心 Web 指标

前端精髓

共 1917字,需浏览 4分钟

 ·

2022-11-29 20:28

Web 指标

不断优化用户体验是所有网站取得长远成功的关键。Web 指标都能帮助您量化网站的体验指数,并发掘改进的机会。


核心 Web 指标的构成指标会随着时间的推移而发展 。当前针对 2020 年的指标构成侧重于用户体验的三个方面——加载性能、交互性和视觉稳定性——并包括以下指标(及各指标相应的阈值):

Largest Contentful Paint (LCP) :最大内容绘制,测量加载性能。为了提供良好的用户体验,LCP 应在页面首次开始加载后的2.5 秒内发生。


First Input Delay (FID) :首次输入延迟,测量交互性。为了提供良好的用户体验,页面的 FID 应为100 毫秒或更短。


Cumulative Layout Shift (CLS) :累积布局偏移,测量视觉稳定性。为了提供良好的用户体验,页面的 CLS 应保持在 0.1. 或更少。



良好欠佳百分位数
最大内容绘制 LCP≤2500ms>4000ms75
首次输入延迟 FID≤100ms>300ms75
累积布局偏移 CLS≤0.1>0.2575


Google 建议使用第 75 个百分位数,即记录同一指标的多个结果,将它们按从最佳到最差的顺序进行排序,然后在四分之三点处分析数字。因此,四分之三的站点访问者将体验到这种级别的性能。


换句话说,如果一个网站有至少 75% 的页面浏览量达到"良好"阈值,则该网站在这项指标下就会被归类为性能"良好"。相反,如果有至少 25% 的页面浏览量达到"欠佳"阈值,则该网站会被归类为性能"欠佳"。因此,如果 LCP 的第 75 个百分位数为 2 秒,就会被归类为"良好",而如果 LCP 的第 75 个百分位数为 5 秒,则会被归类为"欠佳"。

可实现性LCP

利用 CrUX 的数据,我们可以确定网络上满足 LCP 候选"良好"阈值的域所占的百分比。


被归类为"良好"(LCP 候选阈值)的 CrUX 域所占的百分比


1秒1.5 秒2 秒2.5 秒3 秒
手机端3.5%13%27%42%55%
桌面端6.9%19%36%51%64%

虽然只有不到 10% 的域满足 1 秒阈值,但 1.5 秒到 3 秒之间的其他所有阈值也都满足我们的要求,即至少有 10% 的域满足"良好"阈值,因此这些阈值仍然是有效的候选值。


此外,为了确保所选取的阈值对于优化良好的网站始终都可实现,我们分析了全网表现最出色的网站的 LCP 性能,从而确定哪些阈值对于这些网站是始终都可实现的。具体来说,我们的目标是确定一个对于表现最出色的网站来说,始终可以在第 75 个百分位数实现的阈值。我们发现,1.5 秒和 2 秒的阈值并不是始终都可以实现的,而 2.5 秒的阈值是始终可以实现的。


为了确定 LCP 的"欠佳"阈值,我们利用 CrUX 数据来确定大多数域能够满足的阈值:


被归类为"欠佳"(LCP 候选阈值)的 CrUX 域所占的百分比


3 秒3.5 秒4 秒4.5 秒5秒
手机端45%35%26%20%15%
桌面端36%26%19%14%10%

在阈值为 4 秒的情况下,大约 26% 的手机端域和 19% 的桌面端域将被归类为欠佳。这些 百分比落在我们 10-30% 的目标范围内,因此,我们认为 4 秒是可接受的"欠佳"阈值。


因此,我们得出结论,对于最大内容绘制来说,2.5 秒是一个合理的"良好"阈值,4 秒是一个合理的"欠佳"阈值。

可实现性FID

利用 CrUX 的数据,我们确定网络上的大多数域在第 75 个百分位数满足 FID 的 100 毫秒"良好"阈值:


满足 FID 100 毫秒阈值并被归类为"良好"的 CrUX 域所占的百分比


100ms
手机端78%
桌面端>99%


此外,我们观察到全网最出色的网站始终能够在第 75 个百分位数上(并且通常在第 95 个百分位数上)满足此阈值。


鉴于上述情况,我们得出结论,100 毫秒是合理的 FID "良好"阈值。

可实现性CLS

根据 CrUX 数据,我们可以看到近 50% 的域的 CLS 为 0.05 或更低。


被归类为"良好"(CLS 候选阈值)的 CrUX 域所占的百分比


0.050.1 0.15
手机端49%60%
桌面端42%59%


被归类为"欠佳"(CLS 候选阈值)的 CrUX 域所占的百分比


0.150.20.250.3
手机端31%25%20%18%
桌面端31%23%18%16%

在阈值为 0.25 的情况下,大约 20% 的手机端域和 18% 的桌面端域将被归类为欠佳。这些百分比落在我们 10-30% 的目标范围内,因此我们得出结论,0.25 是可接受的"欠佳"阈值。


浏览 26
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报