故事

优化是一个相对的行为的概念，意思是采取一定措施使事物变得优异。要明确我们优化 Web 性能的时候具体要做的事情，首先我们需要衡量当前的性能，然后针对性地采取措施。最后，在我们对优化的结果进行衡量的时候，women同样需要一个标准。因此，我们首先要了解的是衡量 Web 性能的种种指标。

幸运的是，关于 Web 性能的基本指标其实是有较为不错的范例。Google 推出的 web vitals。

核心指标

其中的 core web vitals（核心指标），包括：

• LCP（Largest Contentful Paint）：衡量感知的加载速度。标记网页加载时间轴中可能加载了网页主要内容的时间点。
• INP（Interaction to Next Paint）：评估网页响应能力。INP 会在网页生命周期内观察用户与网页进行的所有点击、点按和键盘互动的延迟时间，并报告最长持续时间，并忽略离群值。
• CLS（Cumulative Layout Shift）：衡量视觉稳定性。它有助于量化用户遇到意外布局偏移的频率。较低的 CLS 有助于确保网页具有令人愉悦的体验。
• FID（First Input Delay）：衡量的是从用户首次与网页互动（即，点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器实际能够开始处理事件处理脚本以响应相应互动的时间。

其他基本指标

还有一些其他的基本指标，包括：

• TTFB（Time to Frist Byte）：测量的是从请求资源到响应的第一个字节开始到达所经过的时间。这有助于识别 Web 服务器何时因速度过慢而无法响应请求。
• FCP（First Contentful Paint）：从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标，“内容”是指文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。
• TBT（Total Blocking Time）：指标衡量在首次内容绘制之后，主线程处于阻塞输入响应的总时长。