王玉军博客

Appearance

Web 性能指标解析 ​

什么是 Web 性能指标 ​

Web 性能指标是衡量网站加载和交互性能的标准度量，它们帮助开发者了解用户体验质量，并识别需要优化的方向。

核心 Web 性能指标 (Core Web Vitals) ​

1. Largest Contentful Paint (LCP) ​

定义：最大内容绘制，测量页面主要内容加载完成的时间。

目标值：2.5 秒以内

影响因素：

  • 服务器响应时间
  • 资源加载时间
  • 渲染阻塞资源
  • 客户端渲染时间

优化策略：

  • 使用 CDN 加速静态资源
  • 优化服务器响应时间
  • 减少 CSS 和 JavaScript 的阻塞
  • 预加载关键资源

2. First Input Delay (FID) ​

定义：首次输入延迟，测量用户首次与页面交互到浏览器响应的时间。

目标值：100 毫秒以内

影响因素：

  • 主线程繁忙时间
  • JavaScript 执行时间
  • 第三方脚本

优化策略：

  • 减少 JavaScript 执行时间
  • 使用 Web Workers 处理 heavy 任务
  • 优化第三方脚本
  • 延迟加载非关键 JavaScript

3. Cumulative Layout Shift (CLS) ​

定义：累积布局偏移，测量页面元素意外移动的程度。

目标值：0.1 以内

影响因素：

  • 图片没有指定尺寸
  • 动态插入内容
  • 字体加载导致的布局变化

优化策略：

  • 为图片和视频指定尺寸
  • 使用 aspect-ratio 属性
  • 预加载字体
  • 避免在用户交互期间插入内容

其他重要性能指标 ​

1. First Contentful Paint (FCP) ​

定义：首次内容绘制，测量浏览器首次绘制文本、图像等内容的时间。

目标值：1.8 秒以内

2. Time to First Byte (TTFB) ​

定义：首字节时间，测量从请求到收到第一个字节的时间。

目标值：0.8 秒以内

3. Total Blocking Time (TBT) ​

定义：总阻塞时间，测量主线程被阻塞超过 50 毫秒的总时间。

目标值：300 毫秒以内

如何测量性能指标 ​

1. 使用 Chrome DevTools ​

  • Performance 面板：分析页面加载和运行时性能
  • Lighthouse：生成性能报告和建议

2. 使用 Web Vitals API ​

javascript
// 测量 LCP
import { getLCP } from 'web-vitals';

getLCP(console.log);

// 测量 FID
import { getFID } from 'web-vitals';

getFID(console.log);

// 测量 CLS
import { getCLS } from 'web-vitals';

getCLS(console.log);

3. 使用 Google Search Console ​

  • 提供 Core Web Vitals 的真实用户数据
  • 识别性能问题页面

性能优化最佳实践 ​

  1. 资源优化

    • 压缩 CSS、JavaScript 和图片
    • 使用适当的图片格式 (WebP、AVIF)
    • 实现图片懒加载

  2. 代码优化

    • 减少 JavaScript 包大小
    • 代码分割和懒加载
    • 优化 CSS 选择器

  3. 服务器优化

    • 使用 HTTP/2 或 HTTP/3
    • 启用 GZIP 或 Brotli 压缩
    • 实现浏览器缓存策略

  4. 渲染优化

    • 减少关键渲染路径
    • 预连接和预加载关键资源
    • 使用 CSS Grid 和 Flexbox 提高布局性能

性能监控 ​

建立持续的性能监控机制，定期检查性能指标，及时发现和解决性能问题。

总结 ​

Web 性能指标是衡量用户体验的重要标准，通过关注 Core Web Vitals 和其他关键指标，开发者可以持续优化网站性能，提供更好的用户体验。

参考资料 ​