Google网页生态系顾问亲自解说，如何用CWV三大指标衡量你的网页用户体验有多好

以台语解释网站体验指标Core Web Vitals（CWV），Youtube影片已经累积上万次点阅的Google网页生态系顾问Cheney Tsai，近日在Modern Web活动上，进一步分享CWV三大指标对用户体验的意义，以及常见导致网页用户体验不佳的原因，来提醒开发者注意与改进。

Cheney Tsai指出，CWV衡量网页用户体验的三大指标，分别是最大内容绘制时间（Largest Contentful Paint，LCP）、累积版面配置位移（Cumulative Layout Shift，CLS）以及首次输入延迟时间（First Input Delay，FID），这三种衡量指标，分别代表了三种不同的用户体验。

首先，最大内容绘制时间LCP，代表了网页呈现的完整度，当用户点击一个连结进入网页，画面中最大元素从无到有显示的时间，即为LCP要衡量的项目。Cheney Tsai指出，之所以选择“最大内容载入时间”而非“最快内容载入时间”，因为一个页面中的最大元素，通常是网页最核心的内容，且使用者因标题或缩图点进该网页后，也会先根据视觉上的最大元素，确认该网页符合自身期待；若显示时间过久，意味着用户无法立即取得所需资讯，用户体验也会随之下降。

第二项指标，则是累积版面配置位移CLS，代表了网页呈现的稳定性。当使用者点击连结、网页内容逐渐显示后，使用者的期待是，画面在短时间内立即载入完成，陆续显示的画面元素如标题、图片等，也不会随着网页逐渐载入而位移，避免造成像是Wi-Fi讯号差时，网页版面一直变动的情形。Cheney Tsai指出，网页不断变动会导致用户在点击内容嵌入的连结时，误点击到广告或其他连结，除了会导致用户体验变差，也可能中断使用者原先的浏览意图。

最后一项指标，则是首次输入延迟时间FID，代表了网页的互动性，也就是当使用者首次与网页互动时，比如点击一个连结或按钮后，网页多久能回应使用者需求。Cheney Tsai解释，在用户点击按钮时，浏览器可能正在处理主线任务，无法即时回应用户需求，这个回应延迟的时间，就是FID的衡量目标。也就是说，FID是用户操作网页后，浏览器接收请求到开始执行该事件所花费的时间，并不包括浏览器后续执行该事件，以及根据新事件来更新UI的时间。

Cheney Tsai在以台语解释CWV的影片中，也以到餐厅吃海鲜的故事，生动诠释CWV所代表的用户体验。比如在海鲜餐厅向店员招手点菜时，店员没有第一时间回复客人，而是先忙完手边事情，才走过来招呼与点菜，这个情境就像是首次互动操作的延迟，网页没有第一时间回应用户需求，会导致用户体验下降。

上菜时，尽管配菜都到齐了，但是主菜还没上，也不免让人担心点菜时是否漏了没点、影响用餐体验，这个情境就像最大内容载入延迟，若最大内容的载入时间过长，用户会担心网页内容是否不符所需。最后则是在夹菜时，明明已经看好要夹龙虾，结果中间的转盘突然被移动了，导致夹到了隔壁盘的苦瓜，这就像版面配置位移后，用户点错连结到其他网站，同样会造成不良的用户体验。

LCP：改善最大内容绘制延迟，需从服务器与用户端优化网页载入效能

针对CWV三大指标衡量的用户体验，Cheney Tsai也进一步指出，哪些原因会导致衡量成效下降。首先，在LCP的衡量上，Google的作法是在载入网页时，开始计算载入每一项元素所需花费的时间，比如文字、图片等，随着更多元素载入，Google会将相较之下更大的元素，列为最大内容的候选，直到用户开始滑动、点击、与网页互动，才会停止衡量，并取最大内容的载入时间。

从载入网页开始，取网页最大内容的载入时间为LCP。（图/取自Web.dev网站）

Cheney Tsai表示，根据Google的观察，最大内容通常是标题或主要图片，Google也把优良用户体验的LCP时间，定义为小于2.5秒。

在这个流程中，造成最大内容载入延迟的原因，可能是网页服务器的回应时间较长，比如执行过多渲染与计算，或是服务器快取的成效不彰，会导致初始HTML文件的执行缓慢。若已经优化了服务器，LCP的成效却还是不佳，就可能是最大内容本身载入所需的资源过多，比如主要图片、影片或是展示型广告的载入，通常需要较多时间。

尤其，要载入展示型广告，浏览器需要先载入HTML文件、第一方JavaScript文件，再载入第三方Javascript文件，来呼叫第三方广告端服务器发送广告，最后再渲染该广告内容，带来更长的载入时间。Cheney Tsai表示，尽管部分开发者认为，这些图片、影片或是展示型广告，虽然是网页中最大内容，但不是页面中最重要的元素；然而，从用户角度来看，网页最大内容会主导用户的浏览体验。

另一个影响LCP时间的因素，称为“渲染阻止的JavaScript和CSS（Render-Blocking JavaScript and CSS）”，会使浏览器在载入完整的HTML文件之前，先执行这些JavaScript和CSS文件，导致网页内容的显示延迟。Cheney Tsai表示，要更快载入网站内容，就要消除这些渲染阻止资源带来的影响。

除了这些原因，用户端（Client-Side）的部分设计也会导致LCP成效不佳，比如用户端动态个人化的AB测试功能，会根据顾客在网站上的操作，动态调整网页版本。Cheney Tsai指出，虽然这对企业来说是好的商业策略，但要实作这项功能，用户浏览器在载入网页时，需要依序执行HTML、JavaScript、AB Test函式库与配置文件等程式码，再执行逻辑判断并选择要呈现的网页配置，最后再呼叫相应的元素并完成渲染，“整套流程要在2.5秒内完成，非常困难。”因此，LCP指标的作用，就是要让企业重新思考，个人化网页优势与用户浏览体验之间的平衡。

CLS：改善版面配置位移，需预留后载入内容的高度以维持版面布局

另一项指标CLS，Cheney Tsai解释，与LCP计算最大内容绘制时间不同，CLS并非计算单一元素的最大位移程度，而是将所有网页元素的位移累积计算。

CLS的新衡量方法，是将每一个区间视窗（session window）内发生的位移量加总，再取其中最大位移量的区间为最终分数。比如在载入网页时，侦测到第一个元素位移，就会开启一个区间视窗的计算，区间最长会持续5秒，无论是图案载入影响标题位置，或是展示型广告嵌入导致内文下移等，只要在少于1秒的时间内相继发生，就会加总位移量作为最终分数的候选，最后在多个区间中，取位移量最大者为CLS。而根据Google的建议，CLS的分数应低于0.1。

Web.dev网站所绘的示意图。蓝色长条是每一次版面位移量，每个区间视窗从间隔1秒后的第一次位移开始计算，若超过1秒没有位移则停止计算，区间最长为5秒。CLS最终分数为区间视窗位移量总和最大者。（图/取自Web.dev网站）

造成网页配置变动的一大原因，是网页开发者为了加快网页载入的速度，会先快速渲染部分网页内容并呈现给用户，再将剩下的渲染陆续完成。但Cheney Tsai比喻，这就像是去超市买东西，一开始为了节省时间，快速抓几项商品就结账，出了超商才发现有东西忘了买，反而一而再、再而三的回去补足商品。不断的重新渲染网页也是如此，版面配置的持续变动会让用户质疑，网页到底载入完成了没。

Cheney Tsai大致归纳了四项造成配置位移的原因，一是图片没有先预留尺寸，二是广告、嵌入式内容或iFrame没有预留尺寸，三与四则是动态插入的内容、外部字体载入导致版面改变。因此，他也提醒，要达到良好CLS评分的关键，就是先预留网页内容的高度，让后载入的内容能嵌入预留的版面中，就连第三方广告或嵌入式内容的置入，都需要预留空间。

不过，由于第三方的广告或嵌入式内容，在网页中的呈现可能不如预期，比如部分版位没有获得广告投放，原本已经预留空间的版位就只能留白，导致网页无法得到有效运用。针对这些争议，Cheney Tsai认为，这是一个比例问题，假设有50人载入网页，但只有一人因第三方内容未嵌入而看到留白内容，难道开发者要为了那一个人改变网页配置，牺牲其余49个人的用户体验吗？更何况，用户看到留白区域，大多直接滑过去浏览下一段落，甚至不会意识到留白空间。他以这个例子来分享自己的看法。

FID：改善首次网页互动延迟，需减轻浏览器主任务的工作负担

最后则是FID指标，这是衡量用户首次与网页互动时，比如点选页面按钮，浏览器需要多久时间才能开始执行这项用户需求。Google也建议，良好用户体验的FID时间，应少于100毫秒。

Cheney Tsai指出，造成FID过久的原因，可能是浏览器正在首席执行官时间的任务（Long Task）、过久的JavaScript执行时间、过大的JavaScript程式组合、阻止渲染的JavaScript程式等，比如浏览器执行完第一方程式码，还需执行第三方程式码，或是正在执行图形密集（graphically intensive）的任务、部分耗费运算资源的前端框架等。假设这些任务需要花费1秒时间执行，且使用者正好在那1秒内操作网页，浏览器就可能延迟1秒才能执行用户需求。

如图所示，当用户与网页互动时，由于网页正在处理主线任务，需要等到主线任务完成后才能回应用户需求，这中间的时间延迟就称为FID。（图/取自Web.dev网站）

因此，Cheney Tsai认为，开发者必须意识到浏览器是否在执行不必要的任务、或是初始化网页中不必要的元件，又或是载入不必要函式（function）的程式码。察觉这些问题后，开发者得将捆绑在一起的将程式码拆解，检视哪些可以延迟处理，以减轻浏览器主线任务负担。

Google去年发布Core Web Vitals，今年经过测试调整后，于6月中逐渐用于Google SEO排序算法中。Cheney Tsai指出，CWV的衡量原本聚焦在行动装置的用户体验，现在也要用来优化桌机版网页，目标透过更精准衡量使用者体验，来推动网站优化，以达到使用者的期待。