详解LCP和FID

·  阅读 71

这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战

什么是LCP

最大内容绘制 (LCP) 是测量感知加载速度的一个以用户为中心的重要指标,因为该项指标会在页面的主要内容基本加载完成进行测量,迅捷的 LCP 有助于让用户确信页面是有效的

为什么需要LCP?

我们在进行用户体验的判断时,以前使用的load和DOMContentLoaded这样的旧指标并不是很好,因为这些指标不一定与用户在屏幕上看到的内容相对应。而FCP这类指标主要是测量网页的响应时间,但是如果某个页面显示的是一段启动动画或加载提示,那么这样的元素通常与用户关系不大,用户不会去关心这些东西。

其他的类似性能指标: First Meaningful Paint 首次有效绘制 FMP 和 Speed Index 速度指数 (SI)这两个指标都在lighthouse中,但是这些指标更有助于捕获到更多初始绘制后的加载体验。而且这些指标计算过程较为复杂,难以解释,而且常常出错。所以chrome团队使用了简化版的LCP指标来替代上述指标。

LCP指标会根据页面首次开始加载时间点来报告可视区域内可见的最大图像或者文本快完成渲染的相对时间。

指标: 2.5s以下。

在JavaScript中测量LCP

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});
复制代码

但是指标与API之间还存在很大差异。至于差异性很复杂,但是i我们可以用web-vistals来测量指标, 这个指标时chrom团队推荐且信赖的。

import {getLCP} from 'web-vitals';
​
// 当 LCP 可用时立即进行测量和记录。
getLCP(console.log);
复制代码

什么是FID (测量响应度)

首次输入延迟 (FID) 是测量加载响应度的一个以用户为中心的重要指标,因为该项指标将用户尝试与无响应页面进行交互时的体验进行了量化,低 FID 有助于让用户确信页面是有效的

什么是FID

FID测量从用户第一次与页面交互 (例如当点击链接或者按钮时) 直到浏览器对交互做出响应。并实际能够开始处理事件处理程序所需要的时间。

0-100 好 100-300 一般 300+ 差

说明:

当我们在网页上进行交互的时候,如果没有在较短的时间内得到反馈,那么这样的用户体验就很差。一般来说,发生输入延迟是因为JavaScript的主线程在忙于其他工作,所以不能立即响应用户,可能导致这种情况的是浏览器忙着执行一个较大的JavaScript程序。在此期间,浏览器没空去运行事件侦听器。

FID测量的具体时间

FID只测量事件处理过程中的延迟,既不测量事件本身所花费的时间,也不测量浏览器在运行事件处理程序后更新用户界面所花费的时间。虽然这些时间确实会影响用户体验, 但是如果开发者将事件响应变为异步,则指标就会变的不准确了。

下图说明了如果用户在最长的任务刚开始时就尝试与页面进行交互

带有 FCP、TTI 和 FID 的示例页面加载跟踪

输入发生在浏览器正在运行任务的过程中,所以浏览器必须等到任务完成后才能对输入作出响应。浏览器必须等待的这段时间就是这位用户在该页面上体验到的 FID 值。

** 在上面这个示例中,用户恰好在主线程刚进入最繁忙的的时间段与页面进行交互,如果用户稍微提早一点(在空闲期间) 与用户进行交互,那么浏览器会立即得到响应,所以这种差异性强调了在报告指标时查看FID值分布的重要性。

在JavaScript中测量FID

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});
复制代码

同样的 指标与API存在差异

import {getFID} from 'web-vitals';
​
// 当 FID 可用时立即进行测量和记录。
getFID(console.log);
复制代码
分类:
前端
标签:
分类:
前端
标签: