常用性能指标
First Contentful Paint (FCP)
定义
FCP： First Contentful Paint 首次内容绘制是指测量页面从开始加载到页面内容（文本、图片、背景图、svg 元素或非白色 canvas 元素）的任何部分在屏幕上完成渲染的时间，是测量加载速度感知的重要指标之一。
上图中第二个界面为第一次出现内容，即FCP。FCP这个指标，可以反映用户对应用打开速度的感知程度。FCP越小，说明用户能够感知你的应用打开速度更快。
推荐值
首次内容绘制完成渲染时间应控制在 1.8s 以内。
优化手段
消除阻塞渲染的资源
● <script> 标签：在 标签内的，并且没有 defer/async 属性
● 标签：没有 disabled 属性，有 media="all" 属性被认为是渲染阻塞
缩小 CSS 体积
● 压缩 CSS
Largest Contentful Paint（LCP）
定义
LCP： Largest Contentful Paint 最大（最有意义）内容绘制，是指根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或者文本块完成渲染的相对时间。
不同时间点上界面上最大的内容块并不是一成不变的，只有当界面加载完毕趋于稳定时，我们才能确定LCP。
推荐值
• LCP <= 2.5s 合格
• 2.5s < LCP <= 4s 需要优化
• LCP > 4s 劣质
影响LCP的内容
主要考量以下几种相关元素：
• 元素
• 内嵌在 元素内的 元素
• video 元素（使用封面图片）
• 通过 url（）函数加载的带有背景图像的元素
• 带有文本或其他行内元素文本的块级元素
LCP较差的常见原因
● 服务器响应时间慢
● 阻断渲染的 Javascript 和 CSS
● 资源加载时间慢
● 客户端渲染
优化手段
优化服务器响应速度
是指浏览器从服务器接收内容所需的时间越长，用户在屏幕上所渲染内容的时间就越长。更快的服务器将直接影响包括 LCP 各项指标的加载值。
优化方法
● 缓存资源，缓存HTML离线页面、缓存页面资源
● 优先使用缓存提供 HTML 页面
● 对图片进行优化：转化图片的格式为JPG或者WEBP等等的格式，降低图片的大小；将fetchpriority="high"属性添加给最重要的图像元素：
● 使用preconnect尽快与服务器建立链接。preconnect：元素属性的关键字preconnect是对浏览器的提示，即用户可能需要来自目标资源的资源，因此浏览器可以通过抢先启动与该资源的连接来改善用户体验。
● 使用dns-prefetch尽快进行DNS（把域名解析成对应的IP地址）查找。dns-prefetch: 即DNS预获取
● 优化服务器性能
● 将用户路由到附近的 CDN
优化阻塞渲染的 JS 和 CSS ：
浏览器渲染内容之前需要先解析 DOM 树，解析过程中，如果遇到任何外部样式表（）或同步 JavaScript 标签（<script src="main.js">），则会暂停解析。
所以脚本跟样式都是阻塞渲染的资源，这些资源都会导致 FCP 延迟，从而导致 LCP 延迟。所以延迟加载非必要的 JS 和 CSS ，从而提高网页主要内容加载速度。
优化方法
减少 CSS 阻塞时间的方法：
• 消减 CSS ： 删除 CSS 中的空格、换行、缩进、注释等字符
• 延迟加载非关键 CSS ： 将初始渲染时不需要的 CSS 提取到一个文件，进行异步加载
• 内联关键 CSS ： 把首屏内容的关键 CSS 直接包在 中，将 CSS 内联； Critters 是一个 webpack 插件，能够内联关键 CSS 并对其余部分进行懒加载
减少阻塞渲染的 JavaScript 数量能够让渲染速度更快，降低 LCP 值
减少 JS 阻塞时间的方法：
• 消减压缩 JavaScript 文件
• 延迟加载未使用的 JavaScript 文件
• 最大限度的减少未使用的 polyfill
优化资源加载速度 ：
虽然 CSS 或 JavaScript 阻塞时间的增加会直接导致性能下降，但加载许多其他类型资源所需的时间也会影响绘制时间。
优化方法：
• 优化图片： 压缩图片，使用 webp 格式，图片资源上传 CDN ；当然能用代码实现尽量不使用图片；
• 预加载重要资源： 使用 提高优先级进行下载和缓存；
• 压缩文本文件： Gzip、Brotli （google 出版）
• 基于网络连接交付不同资产（自适应服务）： navigator.connection.effectiveType （有效连接类型 4G）， navigator.connection.saveData （启用/禁用数据保护程序）， navigator.hardwareConcurrency （cpu 核心数）， navigator.deviceMemory （设备内存）
• 缓存资源： service woker 在 worker 上下文中运行： 因此它没有 DOM 访问权限，并且是运行在不同线程上，因此它是非阻塞的。
CLS
定义
CLS： 累计布局偏移（CLS）是测量视觉稳定性的重要指标。是整个页面声明周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。
推荐值
优化手段
产生 CLS 的常见原因：
• 无尺寸的图片
• 无尺寸的广告，嵌入和 iframe
• 动态注入的内容
• 导致不可见文本闪烁（FOIT）、无样式文本闪烁（FOUT）的网络字体
• 在更新 DOM 之前等待网络响应的操作
优化方法：
● 在图片和视频元素上包含尺寸属性, 不适用无尺寸元素
● 非用户交互响应的情况下，都不要在现有的内容上方插入其他内容
● 提前给广告位预留空间
● 首选转换动画，而不是触发布局偏移的属性动画
SI (Speed Index)
定义
SI：Speed Index 衡量页面加载期间内容以视觉方式显示的速度。 Lighthouse 首先捕获浏览器中页面加载的视频，并计算帧之间的视觉速度。通俗的讲，就是网页从有东西到完全显示内容的可见填充速度。
TBT
定义
TBT： Total Blocking Time 总阻塞时间，是页面被阻塞响应用户交互的总时间。 TBT = LCP （首次最大内容绘制）和可交互时间之间所有长时间任务的阻塞部分之和。是测量页面加载响应的重要指标。
超过 50 毫秒的任务即为长任务。 超出 50 毫秒的时间量为阻塞部分。
优化手段
• 减少不必要的 JavaScript 加载、解析或执行。减少 JavaScript 负载、删除未使用的代码或有效加载第三方 JavaScript 可以提高 TBT 分数。
• 减少低效的 JavaScript 语句。例如： document.querySelectorAll('a') 会返回所有符合的节点