网站性能指标和测试方法

文章概要

  • 学习指标的基本概念
  • 如何通过JavaScript检测指标
  • 如何做性能指标上报
  • 一些常用性能工具

关键指标概念

首次内容绘制 - First Contentful Paint (FCP)

测量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。

fcp

最大内容绘制 - Largest Contentful Paint (LCP)

测量从页面开始加载到最大文本块或图像元素呈现在屏幕上的时间。

lcp_20240731050851.png.png

交互到下一次绘制 - Interaction to Next Paint (INP):

测量页面中每次点击、触摸或键盘交互的延迟，并根据交互次数选择页面上最差的交互延迟（或接近最高的延迟）作为一个代表值，以描述页面的整体响应性。

总阻塞时间 - Total Blocking Time (TBT)

测量从首次内容绘制（FCP）到可交互时间（TTI）之间的总时间

累积布局偏移 - Cumulative Layout Shift (CLS)

测量从页面开始加载到页面的生命周期状态变为隐藏之间发生的所有意外布局偏移的累计分数。常见的情况就是图片元素没有设置占位width和 height属性，导致首次加载页面会有页面塌陷效果。

首字节时间 - Time to First Byte (TTFB)

测量服务器响应用户请求以传输资源的第一个字节所需的时间。

核心指标范围和优化建议

指标最佳范围描述优化建议
FCP< 1.8s指示视觉加载进度最小化渲染阻塞资源，优化图像
LCP< 2.5 s测量主要内容可见时刻优化图像，改善服务器响应时间
INP< 200ms评估整体页面响应性优化 JavaScript 执行，避免长任务
TBT< 200ms诊断响应性问题最小化繁重任务，使用defer 和 async
CLS< 0.1反应页面布局视觉稳定性页面设置初始宽高
TTFB< 200ms反映服务器响应速度优化服务器设置，使用 CDN

常用工具

  • DevTools
  • Lighthouse

参考网站