Web 性能优化| 核心指标

Link:

https://web.dev/articles/vitals
https://web.dev/articles/custom-metrics#element-timing-api
KeyWords: core_web_vitals; web_vitals; custom_metric; 架构升级&平台体验&措施

Web Vitals 可以帮助我们测量网站体验和识别可以提升地方.

衡量加载性能: lcp. 最大内容绘制 2.5s 为佳
衡量交互性: inp. 和下一次绘制的交互性 200 ms为佳
衡量视觉稳定性: cls. 累计布局偏移应该小于 0.1.
为了保证大多数用户是命中指标, 一个比较好的阈值是75th.

指标的生命周期: 实验阶段 --> 挂起阶段 --> 稳定阶段

稳定阶段的指标one year不会改变, 但是可以一年后被新的指标替代.

• Tools 衡量和报告指标.
  谷歌认为核心 Web 指标对 Web 用户体验是重要的. 因此, 它致力于在所有的流行工具中展示这些指标.下面详细地列举了这些工具.

FieldTools:

1. CrUX 收集对每一个指标揭示用户的测量数据. 这些数据使得网站负责人不需要分析就能得到网站的性能.
2. PageSpeed Insights.
3. Search Console
   这些工具的缺点是没有提供每一个页面的诊断结果.

Lab Tools:

Chrome DevTools 和 LightHouse 支持 lcp, tbt, cls. 像 LightHouse 这样的工具加载页面是在一个模拟环境中,其中是没有用户输入,然而,tbt,总阻塞时间指标是 inp 的替换.

Recommendations for improving your scores| 提升分数的推荐阅读
lcp| inp| cls

• Core Web Vital 是理解和交付丝滑用户体验的关键指标,但是也存在其它指标.
  其他指标: 作为代理或者是这三个指标的的补充指标,即帮助捕获一个更全面的体验大盘.
  加载性能: ttfb fcp,并且针对 lcp 诊断非常有用(服务器响应时间和渲染阻塞资源)
  相似地, tbt 指标也是lab metric 在追踪和诊断潜在的 interactivity 上十分重要.以至于可以取代 inp.

Retired Metrics | 废弃的指标

tti 评估的是加载速度.
tti 在 Lighthouse 10 中废弃. 原因是tti对网络请求和长任务比较敏感,导致了指标结果很大的变动.
取而代之的是lcp tbt inp.
tti 评估页面变得可交互性的时间.可交互可以理解为页面展示出最有用的信息也就是fcp,针对大多数可见的页面元素已经完成事件注册,页面响应用户的时间是 50ms
fmp 在 lighthouse 6中被废弃. 实际上,fmp 针对页面小的不同很敏感,导致不持续的结果.考虑一下fcp.
fmp 和 fcp 通常是相同的,特殊情况是页面存在 iframe. fcp 不包括 iframe.
和 fcp 一样, fmp基于来自 http 文件的网络性能
如何提升 fmp 分数和提升lcp的方式一样.

Custom Metrics| 自定义指标:

通用指标让用户可以无代码地检测站点性能;自定义指标让我们测量网站性能的更多方面.
比如: SPA 项目从 A 页面过渡到 B 页面花费的时间; 对于已登录的用户请求回来接口数据所花费的时间; 回头用户的资源缓存命中率.

1. 测量通用指标Hack api, rAF. 循环耗电量, 本身就存在性能问题.
2. Performance Observer API. 你可以使用 new PerformanceObserver(cb). 订阅一个性能相关的事件.这会让 cb 在 idle 阶段运行.
3. 观测入口早已发生. 默认情况下,只有当 entries 发生的时候才会观测到.当lazy-load的时候是不是有问题? 解决办法就是设置 buffered: true. 为了避免内存问题, buffer 没有大小限制.

• mark 时间API作用: 基于时间指标的通用测了指标
• mark 时间API使用: markStart, markEnd, measure delta
• mark 时间API和其他对比: Date.now() , performance.now()
• measure API: 检测用户时间
• longtask API作用: 了解浏览器主线程是否被长任务影响了帧率和输入延迟.
• long-animation-frame API作用:和 longtask 一样,检测任务>50ms,出现是为了替代 longtask.
  const po = new PerformanceObserver((entryList)=>{
  const list = Array.from(entryList.getEntries());
  for(let entry of list){
  console.log(entry.toJSON())
  }
  })
  po.observe({type: "long-animation-frame", buffered: true})
• element 时间API (LCP 就是基于此api): 元素增加 elementtiming 即可
• resource 时间API: 给出一个指定页面资源的加载情况. transferSize 代表网络中实际传输的数据大小.可以计算缓存命中率;
• navigation 时间API: (ttfb就是基于此api)entry.responseStart. 基于 server-timing http response header(cdn-cache; desc=MISS, edge; dur=77, origin; dur=45)

---

基于微前端,子应用是 SPA 的场景. 定义. 关键接口回来的时间

const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.toJSON());
  }
});

po.observe({type: 'long-animation-frame', buffered: true});

检测卡顿: 基于 long-animation-frame than rAF API
资源,接口(网络),和组件加载顺序/耗时
JS 运行时 Object.assign, apply, deepClone, Array.map, Array.reduce