lostvita / web-performance

web-performance

translate blog -> https://requestmetrics.com/web-performance/

web-performance's Issues

2021年web性能测量权威指南

一：web性能基础

讲了一些web性能相关的含义，以及为什么web性能很重要！

二：web性能指标

页面加载时间（page-load-time）

起初，网站性能是通过页面加载事件被触发之前的时间进行衡量的，但页面加载并不能充分描述性能。有些站点初始加载速度很快，但却需要动态加载内容。因此，页面加载时间并不能完全捕获一个网站是否感觉快速！

更槽糕的是，页面加载是很容易受操控的。开发人员可通过延迟javascript运行来提升页面加载时间。像懒加载、异步脚本加载器、客户端渲染以及动态内容等方式通常都可以提升页面加载时间，但从用户角度看会带来较慢的体验。

那我们应该怎么做呢？

这里有很多让我们觉得站点很慢的方式：初始加载慢、完成加载慢、来回跳转以及响应很慢等，我们不能仅通过一个指标去了解性能。

web核心特征（the-core-web-vitals）

在2019年，Google引入了一系列的指标去衡量用户真实感受到的性能，这些统称为web核心指标。

需要注意的是，这些指标只有在基于Chrome内核的浏览器中才被支持，为桌面和移动端的Chrome用户测量性能。

1. First Contentful Paint (FCP)

First Contentful Paint(首次内容绘制)衡量了收到请求内容并加载到页面向用户展示所花费的时间，如下图标记从点击加载某个链接到页面显示内容的时间：

FCP鼓励站点快速地响应请求，下面是Google推荐的FCP指标值：

2. Largest Contentful Paint (LCP)

Largest Contentful Paint(最大内容绘制)衡量了屏幕上渲染出最大量内容所耗费的时间，此时用户能够看到他要找的内容并认为页面已经基本加载完毕。

如果你能测量出最重要内容的绘制时间，这当然是最准确的，但这很难用编程实现，所以LCP可以作为是最重要内容的代理度量。如下图标记出了几个最大内容的像素区域：

侧边的广告可能不是用户想要看的，但文中的图像可能是。

LCP鼓励站点强调其主要内容并确保快速加载，Google推荐的LCP指标值：

3. Cumulative Layout Shift (CLS)

Cumulative Layout Shift（累计布局偏移）测量的不是时间，而是衡量页面中的内容在加载和渲染其他内容时的移动程度，如下图：

CLS衡量了后期渲染内容是如何影响用户体验的，不鼓励站点四处移动用户已经看到过的内容，并且要尽量减少后期渲染的内容。Google推荐的指标分数：

4. First Input Delay (FID)

First Input Delay（首次输入时延）衡量页面是否真正加载完成，当用户点击页面时，如果浏览器正在执行下载、解析或者运行js，这里就会产生一个时延知道浏览器能够处理这个点击事件，FID就是用来衡量这个时延。

FID不鼓励站点在用户与页面开始交互之前加载过多的js，Google推荐了以下的指标值：

其他常见的性能指标

除了上述的核心web指标，一些流行的性能工具还经常用其他几个指标：

1. Time to First Byte (TTFB)

Time to First Byte （首字节达到时间）衡量了服务器返回第一个字节数据的时间，这不仅代表用户的网络时延，亦代表着服务器组装文档所需的时间。TTFB是FCP的一个子集，FCP衡量了文档大小，解析和渲染的时间。

2. Time to Interactive (TTI)

Time to Interactive（可交互时间）衡量了页面加载至完全可交互状态所需的时间，包括执行完渲染，JavaScript运行和浏览器后台任务。
TTI包括了FCP、FID和其他后台处理计时器。Google建议TTI小于3.8s可以认为快速，大于7.3s可视为存在严重的性能问题。

3. Total Blocking Time (TBT)

Total Blocking Time（总阻塞时间）是由于浏览器执行后台任务（如执行JavaScript或解析CSS）而引起的用户输入延迟的时间，它衡量了浏览器加载网页的繁忙程度。

4. Speed Index

Speed Index（速度指数）是应用于WebPageTest和Google性能工具中的一个流行指标，用于测量网页加载时的可见性变化，以确定用户何时认为网页已完成加载。

三：几种web性能数据

这里有两种web性能数据：实验室数据和实地数据。

实验室性能数据通过受控测试进行收集，比如Lighthouse报告，描述了在特定网络中单一的网页加载（译者注：我们开发人员做性能调试时收集到的数据都属于实验室数据）。这种数据通常称为“人工试验”，因为它测量的是一个连接入网络中的已知设备的性能。它是对性能的一个评估而非测量任意用户的真实性能。

四：常见的web性能工具