需要衡量的重要指标有哪些？
- FCP-首次内容绘制时间：网页开始加载到所有内容加载完成的时间。
- LCP-最大内容绘制时间：网页开始加载到网页最大图片或内容加载完成的时间。（可理解为用户首次导航到相应网页的时间）—衡量网页加载性能
- INP-动画响应时间：与网页进行每一次点击或键盘互动的时间。（点击事件的响应交互时间） — 衡量网页可交互性
- CLS：页面开始加载到其生命周期状态更改为隐藏期间发生的所有意外布局偏移的累计得分 — 衡量网页的视觉稳定性
- TTFB-首字节时间：网络使用资源的第一个字节响应用户操作的时间。
LCP-核心指标之一：衡量用户在网页加载过程中“看到”最大页面元素所需的时间
Longest Content Paint: 应控制在2.5s以内。
需考虑的元素类型包括：
a. \<img\>元素；
b. svg内的\<image\>元素；
c. \<vedio\>元素；
d. 带有url()函数的加载的背景图片；
e. 文本节点以及内嵌其中的块级元素；
确定元素大小：用户在视口内可见的尺寸；（只会考虑初始大小跟位置，后续更改并不会生成新的LCP的内容）
在js中衡量LCP（推荐js库：web-vitals）：
```js
// 通过一个回调函数来接受性能事件的通知--性能事件发生变化，触发回调函数
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
```
可细分为以下子类别：
a. 首字节时间 (TTFB, 占比：~40%)-- 从用户开始加载页面到浏览器收到 HTML 文档响应的第一个字节所需的时间
b. 资源加载延迟（~10%） -- TTFB 与浏览器开始加载 LCP 资源之间的间隔时间
c. 资源加载时间（~40%） -- 加载 LCP 资源本身所需的时间
d. 元素渲染延迟（~10%） -- 从 LCP 资源加载完毕到 LCP 元素完全呈现所经过的时间。
优化LCP：
b. 在发现资源时进行优化
可以使用 fetchpriority=‘high’ 属性提高资源的加载优先级(link/img都有该属性)
<img> 元素，其 src 或 srcset 属性位于初始 HTML 标记中
预加载任何需要 CSS 背景图片的元素
c. 优化为资源指定的优先级
d. 消除元素渲染延迟 - 确保 LCP 元素能够在其资源加载完毕后立即呈现，而不管何时呈现
e. 减少或内嵌阻止呈现的样式表
移除未使用的css；
缩减 CSS 大小；
f. 延迟或内嵌阻止呈现的 JavaScript
使用 async 或 defer 属性将网页上的所有脚本设为异步
g. 使用服务器端渲染
f. 缩短资源大小
gzip/http2 br/图片压缩/减少css体积
CLS-核心指标之二：衡量网页可视稳定性
布局偏移—页面上元素的初始位置发生改变
CLS得分必须不超过 0.1;
在js中测量CLS（推荐js库：web-vitals）：
```js
// 通过一个回调函数来接受性能事件的通知--性能事件发生变化，触发回调函数
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
// web-vitals
import {onCLS} from 'web-vitals';
onCLS(console.log);
```
导致 CLS 不佳的最常见原因包括：
a. 没有尺寸的图片。
b. 广告、嵌入和没有尺寸的 iframe
c. 动态注入的内容，如广告、嵌入式内容和无维度的 iframe
d. 网络字体;
优化CLS方式：
a. 请务必在图片和视频元素中添加 width 和 height 尺寸属性
b. 为延迟加载的内容预留空间
c. 将延迟加载的内容放在视口中靠下的位置
d. 重叠式横幅内容(将其叠加在现有内容上脱离文档流)
e. 让用户互动触发预期的布局偏移（让用户启动新内容的加载）;
INP-核心指标之三：衡量用户交互到页面响应的延迟时间
观察网站用户点击或键盘事件的延迟时间。（不考虑悬停和滚动操作）
得分：
小于等于200，响应速度较好；
200-500，需要改进；
500以上，响应速度较慢
优化INP的方式：
a. 识别并减少输入延迟；
b. 优化事件回调--尽可能少地在事件回调中完成工作
c. 避免布局抖动
d. 尽可能减少dom大小
e. 使用content-visibility延迟渲染屏幕外元素