性能指标一般通过两种方式进行测量：
1、在实验工具中测量：使用一些工具 在 稳定 受控 的环境中，模拟页面加载进行测量
2、在真实环境中进行这些指标的测量，真实用户的加载页面情形
这两种方式没有优劣之分，我们往往需要同时使用这两种方式来测量
最常见的一些性能指标：
一、首次内容绘制（First Contentful Paint）
首次内容绘制 (FCP)：测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。"内容"指的是文本、图像（包括背景图像）、元素或非白色的元素，网站应该努力将首次内容绘制控制在1.8 秒或以内。
二、最大内容绘制（Largest Contentful Paint）
最大内容绘制 (LCP)：测量页面从开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。最大内容绘制考量的元素类型为：<img>元素，内嵌在<svg>元素内的<image>元素<video>元素（使用封面图像）通过url()函数（而非使用CSS 渐变）加载的带有背景图像的元素包含文本节点或其他行内级文本元素子元素的块级元素。请注意，为了在初始阶段保持简洁，我们有意将元素限制在这几个有限的类型中。随着研究的深入，未来可能会添加其他元素（例如<svg> 、 <video>）。网站应该努力将最大内容绘制控制在2.5 秒或以内。
报告给最大内容绘制的元素大小通常是用户在可视区域内可见的大小。如果有元素延伸到可视区域之外，或者任何元素被剪裁或包含不可见的溢出，则这些部分不计入元素大小，对于在原始尺寸之上经过调整的图像元素，报告给指标的元素大小为可见尺寸或原始尺寸，以尺寸较小者为准。例如，远小于其原始尺寸的缩小图像将仅报告图像的显示尺寸，而拉伸或放大成更大尺寸的图像将仅报告图像的原始尺寸。对于所有元素，通过 CSS 设置的任何边距、填充或边框都不在考量范围内.
何时报告最大内容绘制，网页通常是分阶段加载的，因此，页面上的最大元素也可能会发生变化。为了应对这种潜在的变化，浏览器会在绘制第一帧后立即分发一个largest-contentful-paint类型的PerformanceEntry，用于识别最大内容元素。但是，在渲染后续帧之后，浏览器会在最大内容元素发生变化时分发另一个PerformanceEntry，当用户与页面进行交互（通过轻触、滚动或按键）时，浏览器将立刻停止报告新条目，因为用户交互通常会改变用户可见的内容（滚动操作时尤其如此)。为了使计算和分发新性能条目的性能开销保持较低的水平，对元素大小或位置的更改不会生成新的 LCP 候选对象。只有元素在可视区域内的初始大小和位置会被纳入考量范围。
三、首次输入延迟（First Input Delay）
首次输入延迟 (FID)：测量从用户第一次与您的网站交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器实际能够对交互做出响应所经过的时间。ID 测量接收到输入事件的时间点与主线程下一次空闲的时间点之间的差值。网站应该努力将首次输入延迟设控制在100 毫秒或以内。
作为编写事件响应代码的开发者，我们通常会假定代码会在事件发生时立即运行，但有时并不会立马响应我们的输入，发生输入延迟（又称输入延时）是因为浏览器的主线程正忙着执行其他工作，所以（还）不能响应用户。可能导致这种情况发生的一种常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript 文件。在此过程中，浏览器不能运行任何事件侦听器，因为正在加载的 JavaScript 可能会让浏览器去执行其他工作，较长的首次输入延迟通常发生在首次内容绘制 (FCP)和Time to Interactive 可交互时间 (TTI)之间，因为在此期间，页面已经渲染出部分内容，但交互性还尚不可靠。
FID 是测量页面加载期间响应度的指标。因此，FID 只关注不连续操作对应的输入事件，如点击、轻触和按键，其他诸如滚动和缩放之类的交互属于连续操作，具有完全不同的性能约束（而且，浏览器通常能够通过在单独的线程上执行这些操作来隐藏延迟）。并非所有用户都会在每次访问您的网站时进行交互。而且也并不是所有交互都与 FID 相关（如上一节所述）。此外，一些用户的首次交互会处于不利的时间段内（当主线程长时间处于繁忙时），而另一些用户的首次交互会处于有利的时间段内（当主线程完全空闲时）
四、可交互时间（Time to Interactive）
可交互时间 (TTI)：测量页面从开始加载到视觉上完成渲染、初始脚本（如果有的话）完成加载，并能够快速、可靠地响应用户输入所需的时间。为了提供良好的用户体验，网站在普通移动硬件上进行测试时，应该努力将可交互时间控制在5 秒以内。
如何测量：
1、先进行First Contentful Paint 首次内容绘制 (FCP)
2、沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。
3、沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行
4、TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。
长久以来，开发者为了追求更快的渲染速度而对页面进行了优化，但有时，这会以牺牲 TTI 为代价。服务器端渲染 (SSR) 等技术可能会导致页面看似具备交互性（即，链接和按钮在屏幕上可见），但实际上并不能进行交互，因为主线程被阻塞或是因为控制这些元素的 JavaScript 代码尚未完成加载。请尽一切努力将 FCP 和 TTI 之间的差值降至最低。如果两者在某些情况下确实存在明显差异，请通过视觉指示器清楚表明页面上的组件还无法进行交互。
五、总阻塞时间（Total Blocking Time）
总阻塞时间 (TBT)：测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。为了提供良好的用户体验，网站在普通移动硬件上进行测试时，应该努力将总阻塞时间控制在300 毫秒以内
每当出现长任务（在主线程上运行超过 50 毫秒的任务）时，主线程都被视作"阻塞状态"。我们说主线程处于"阻塞状态"是因为浏览器无法中断正在进行的任务。因此，如果用户在某个长任务运行期间与页面进行交互，那么浏览器必须等到任务完成后才能作出响应。某个给定长任务的阻塞时间是该任务持续时间超过 50 毫秒的部分。一个页面的总阻塞时间是在 FCP 和 TTI 之间发生的每个长任务的阻塞时间总和。
六、累积布局偏移（Cumulative Layout Shift）
累积布局偏移 (CLS)：测量页面在开始加载和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。
