以台语解释网站体验指标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所代表的用户体验。比如在海鲜餐厅向店员招手点菜时，店员没有第一时间回复客人，而是先忙完手边事情，才走过来招呼与点菜，这个场景就像是首次交互操作的延迟，网页没有第一时间回应用户需求，会导致用户体验下降。
上菜时，尽管配菜都到齐了，但是主菜还没上，也不免让人担心点菜时是否漏了没点、影响用餐体验，这个场景就像最大内容加载延迟，若最大内容的加载时间过长，用户会担心网页内容是否不符所需。最后则是在夹菜时，明明已经看好要夹龙虾，结果中间的转盘突然被移动了，导致夹到了隔壁盘的苦瓜，这就像版面配置位移后，用户点错连接到其他网站，同样会造成不良的用户体验。
针对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，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指标，这是衡量用户首次与网页交互时，比如点击页面按钮，浏览器需要多久时间才能开始执行这项用户需求。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的衡量原本聚焦在移动设备的用户体验，现在也要用来优化PC机版网页，目标通过更精准衡量用户体验，来推动网站优化，以达到用户的期待。