乐趣区

还在看那些老掉牙的性能优化文章么这些最新性能指标了解下

jiezi

性能优化相干的文章其实网上挺多，然而大部分都是在讲如何优化性能，也就是讲方法论。然而在理论工作中，如何量化性能优化也是相当重要的一环。明天本文会介绍谷歌提倡的七个用户体验指标（也能够认为是性能指标），每个指标别离依据以下几点解说：

  1. 指标自身的作用、测量、举荐工夫区间等
  2. 如何指标进行优化，该内容会在文末对立解说

FP & FCP

首次绘制，FP（First Paint），这个指标用于记录页面第一次绘制像素的工夫。

首次内容绘制，FCP（First Contentful Paint），这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的工夫。

这两个指标看起来大同小异，然而 FP 产生的工夫肯定大于等于 FCP，如下图是掘金的指标：

FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。然而此时 DOM 内容还没开始绘制，可能须要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。因而说咱们能够把这两个指标认为是和白屏工夫相干的指标，所以必定是最快越好。

上图是官网举荐的工夫区间，也就是说如果 FP 及 FCP 两指标在 2 秒内实现的话咱们的页面就算体验优良。

LCP

最大内容绘制，LCP（Largest Contentful Paint），用于记录视窗内最大的元素绘制的工夫，该工夫会随着页面渲染变动而变动，因为页面中的最大元素在渲染过程中可能会产生扭转，另外该指标会在用户第一次交互后进行记录。指标变动如下图：

LCP 其实能比前两个指标更能体现一个页面的性能好坏水平，因为这个指标会继续更新。举个例子：当页面呈现骨架屏或者 Loading 动画时 FCP 其实曾经被记录下来了，然而此时用户心愿看到的内容其实并未出现，咱们更想晓得的是页面次要的内容是何时出现进去的。

此时 LCP 指标是可能帮忙咱们实现想要的需要的。

上图是官网举荐的工夫区间，在 2.5 秒内示意体验优良。

TTI

首次可交互工夫，TTI（Time to Interactive）。这个指标计算过程稍微简单，它须要满足以下几个条件

  1. 从 FCP 指标后开始计算
  2. 继续 5 秒内无长工作（执行工夫超过 50 ms）且无两个以上正在进行中的 GET 申请
  3. 往前回溯至 5 秒前的最初一个长工作完结的工夫 

 这里你可能会疑难为什么长工作须要定义为 50ms 以外？

Google 提出了一个 RAIL 模型：

对于用户交互（比方点击事件），举荐的响应工夫是 100ms 以内。那么为了达成这个指标，举荐在闲暇工夫里执行工作不超过 50ms（W3C 也有这样的标准规定），这样能在用户无感知的状况下响应用户的交互，否则就会造成提早感。

 长工作也会在 FID 及 TBT 指标中应用到。

因而这是一个很重要的用户体验指标，代表着页面何时真正进入可用的状态。毕竟光内容渲染的快也不够，还要能迅速响应用户的交互。想必大家应该体验过某些网站，尽管内容渲染进去了，然而响应交互很卡顿，只能过一会能力晦涩交互的状况。

FID

首次输出提早，FID（First Input Delay），记录在 FCP 和 TTI 之间用户首次与页面交互时响应的提早。

这个指标其实挺好了解，就是看用户交互事件触发到页面响应两头耗时多少，如果其中有长工作产生的话那么势必会造成响应工夫变长。

其实在上文咱们就讲过 Google 举荐响应用户交互在 100ms 以内：

TBT

阻塞总工夫，TBT（Total Blocking Time），记录在 FCP 到 TTI 之间所有长工作的阻塞工夫总和。

如果说在 FCP 到 TTI 之间页面总共执行了以下长工作（执行工夫大于 50ms）及短工作（执行工夫低于 50ms）

那么每个长工作的阻塞工夫就等于它所执行的总工夫减去 50ms

所以对于上图的状况来说，TBT 总共等于 345ms。

这个指标的高下其实也影响了 TTI 的高下，或者说和长工作相干的几个指标都有关联性。

CLS

累计位移偏移，CLS（Cumulative Layout Shift），记录了页面上非预期的位移稳定。

大家想必遇到过这类状况：页面渲染过程中忽然插入一张微小的图片或者说点击了某个按钮忽然动静插入了一块内容等等相当影响用户体验的网站。这个指标就是为这种状况而生的，计算形式为：位移影响的面积 * 位移间隔。

以上图为例，文本挪动了 25% 的屏幕高度间隔（位移间隔），位移前后影响了 75% 的屏幕高度面积（位移影响的面积），那么 CLS 为 0.25 * 0.75 = 0.1875。

CLS 推荐值为低于 0.1，越低阐明页面跳来跳去的状况就越少，用户体验越好。毕竟很少有人喜爱浏览或者交互过程中网页忽然动静插入 DOM 的状况，比如说插入广告~

 介绍完了所有的指标，接下来咱们来理解哪些是用户体验三大外围指标、如何获取相应的指标数据及如何优化。

三大外围指标

Google 在往年五月提出了网站用户体验的三大外围指标，别离为：

  • LCP
  • FID
  • CLS

LCP 代表了页面的速度指标，尽管还存在其余的一些体现速度的指标，然而上文也说过 LCP 能体现的货色更多一些。一是指标实时更新，数据更准确，二是代表着页面最大元素的渲染工夫，通常来说页面中最大元素的疾速载入能让用户感觉性能还挺好。

FID 代表了页面的交互体验指标，毕竟没有一个用户心愿触发交互当前页面的反馈很缓慢，交互响应的快会让用户感觉网页挺晦涩。

CLS 代表了页面的稳固指标，尤其在手机上这个指标更为重要。因为手机屏幕挺小，CLS 值一大的话会让用户感觉页面体验做的很差。

如何获取指标

Lighthouse

你能够通过装置 Lighthouse 插件来获取如下指标

web-vitals-extension

官网出品，你能够通过装置 web-vitals-extension 插件来获取三大外围指标

web-vitals 库

官网出品，你能够通过装置 web-vitals 包来获取如下指标

代码应用形式也挺简略：

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

Chrome DevTools

这个工具就不多做介绍了，关上 Performance 即可疾速获取如下指标

如何优化指标

资源优化

该项措施能够帮忙咱们优化 FP、FCP、LCP 指标。

  • 压缩文件、应用 Tree-shaking 删除无用代码
  • 服务端配置 Gzip 进一步再压缩文件体积
  • 资源按需加载
  • 通过 Chrome DevTools 剖析首屏不须要应用的 CSS 文件，以此来精简 CSS
  • 内联要害的 CSS 代码
  • 应用 CDN 加载资源及 dns-prefetch 预解析 DNS 的 IP 地址
  • 对资源应用 preconnect，以便事后进行 IP 解析、TCP 握手、TLS 握手
  • 缓存文件，对首屏数据做离线缓存
  • 图片优化，包含：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图应用 base64 或者 PNG 格局、反对 WebP 就尽量应用 WebP、渐进式加载图片

网络优化

该项措施能够帮忙咱们优化 FP、FCP、LCP 指标。

这块内容大多能够让后端或者运维帮你去配置，降级至最新的网络协议通常能让你网站加载的更快。

比如说应用 HTTP2.0 协定、TLS 1.3 协定或者间接拥抱 QUIC 协定~

优化耗时工作

该项措施能够帮忙咱们优化 TTI、FID、TBT 指标。

  • 应用 Web Worker 将耗时工作丢到子线程中，这样能让主线程在不卡顿的状况下解决 JS 工作
  • 调度工作 + 工夫切片，这块技术在 React 16 中有应用到。简略来说就是给不同的任务分配优先级，而后将一段长工作切片，这样能尽量保障工作只在浏览器的闲暇工夫中执行而不卡顿主线程

不要动静插入内容

该项措施能够帮忙咱们优化 CLS 指标。

  • 应用骨架屏给用户一个预期的内容框架，突兀的显示内容体验不会很好
  • 图片切勿不设置长宽，而是应用占位图给用户一个图片地位的预期
  • 不要在现有的内容两头插入内容，起码给出一个预留地位

最初

以上是笔者对于用户体验指标的一些内容整顿，如果有不懂的或者谬误的中央欢送斧正及交换。

举荐关注我的微信公众号【前端真好玩】，工作日推送高质量文章。

笔者就任于酷家乐，家装设计行业独角兽。一流的可视化、前端技术团队，有趣味的能够简历投递至 zx597813039@gmail.com

退出移动版