以用户为中心的前端性能指标解析

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • 一、以用户为中心的前端性能指标
  • • [（一）首次内容绘制（First Contentful Paint, FCP）](#（一）首次内容绘制（First Contentful Paint, FCP）)
    • [（二）最大内容绘制（Largest Contentful Paint, LCP）](#（二）最大内容绘制（Largest Contentful Paint, LCP）)
    • [（三）首次输入延迟（First Input Delay, FID）](#（三）首次输入延迟（First Input Delay, FID）)
    • [（四）累积布局偏移（Cumulative Layout Shift, CLS）](#（四）累积布局偏移（Cumulative Layout Shift, CLS）)
    • [（五）交互时间（Time to Interactive, TTI）](#（五）交互时间（Time to Interactive, TTI）)
  • 二、测量性能指标的工具
  • • （一）Lighthouse
    • [（二）Google PageSpeed Insights](#（二）Google PageSpeed Insights)
    • [（三）Web Vitals Extension](#（三）Web Vitals Extension)
  • 三、优化性能指标的方法
  • • [（一）优化 FCP 和 LCP](#（一）优化 FCP 和 LCP)
    • [（二）优化 FID](#（二）优化 FID)
    • [（三）优化 CLS](#（三）优化 CLS)
    • [（四）优化 TTI](#（四）优化 TTI)
  • 四、实践案例
  • • （一）某电商网站的性能优化
    • （二）某新闻网站的性能优化
  • 五、总结

在现代 Web 开发中，性能优化是提升用户体验的关键环节。以用户为中心的性能指标能够直接反映用户在使用 Web 应用时的实际体验。本文将详细介绍这些性能指标的定义、重要性以及如何通过工具和技术进行测量和优化。

一、以用户为中心的前端性能指标

（一）首次内容绘制（First Contentful Paint, FCP）

定义：FCP 是页面上首次绘制任何内容的时间点，包括文字、图片或 SVG 等。它反映了用户首次看到页面内容的时间。

重要性：FCP 是用户感知页面加载速度的第一个指标。较快的 FCP 意味着用户能更快地看到页面内容，从而减少等待的焦虑感。

（二）最大内容绘制（Largest Contentful Paint, LCP）

定义：LCP 是页面上最大内容元素（通常是图片或文本块）完成加载的时间点。它反映了页面主要内容的加载时间。

重要性：LCP 是衡量页面主要视觉内容加载速度的关键指标。较快的 LCP 意味着用户能更快地看到页面的核心内容，提升用户的满意度。

（三）首次输入延迟（First Input Delay, FID）

定义：FID 是用户首次与页面交互（如点击按钮、提交表单）时的延迟时间。它反映了页面的交互响应速度。

重要性：FID 直接影响用户的交互体验。较低的 FID 意味着页面能够快速响应用户的操作，减少用户的等待时间。

（四）累积布局偏移（Cumulative Layout Shift, CLS）

定义：CLS 是页面在加载过程中布局变化的累积值。它反映了页面内容的稳定性。

重要性：CLS 越低，页面的布局越稳定，用户在浏览页面时的体验越好。较高的 CLS 可能导致页面内容的跳动，影响用户体验。

（五）交互时间（Time to Interactive, TTI）

定义：TTI 是页面准备好响应用户交互的时间点。它反映了页面从加载到完全可用的时间。

重要性：TTI 是衡量页面整体性能的关键指标。较快的 TTI 意味着用户可以在更短的时间内开始与页面交互，提升用户的满意度。

二、测量性能指标的工具

（一）Lighthouse

简介：Lighthouse 是一个开源的自动化工具，用于改进 Web 应用的质量。它提供了详细的性能报告，包括 FCP、LCP、FID、CLS 和 TTI 等指标。

使用方法：

1. 在 Chrome 浏览器中打开开发者工具（F12）。
2. 点击"Lighthouse"标签。
3. 选择"Performance"选项，点击"Generate report"。
4. 查看生成的报告，分析性能指标。

（二）Google PageSpeed Insights

简介：Google PageSpeed Insights 是一个在线工具，用于分析 Web 页面的性能，并提供优化建议。

使用方法：

1. 访问 Google PageSpeed Insights。
2. 输入要分析的 URL，点击"Analyze"。
3. 查看生成的报告，分析性能指标和优化建议。

（三）Web Vitals Extension

简介：Web Vitals Extension 是一个 Chrome 浏览器扩展，用于实时监控 Web Vitals 指标（包括 FCP、LCP、FID、CLS 等）。

使用方法：

1. 在 Chrome 浏览器中安装 Web Vitals Extension。
2. 打开目标页面，查看实时性能指标。

三、优化性能指标的方法

（一）优化 FCP 和 LCP

1. 减少初始加载时间：

   • 压缩图片和静态资源。
   • 使用高效的缓存策略。
   • 优化 JavaScript 和 CSS 的加载。

2. 优先加载关键内容：

   • 使用 preload 指令预加载关键资源。
   • 确保页面的首屏内容尽快加载。

（二）优化 FID

1. 减少 JavaScript 的执行时间：

   • 延迟加载非关键 JavaScript。
   • 使用代码分割和懒加载技术。

2. 优化交互响应：

   • 避免在主线程上执行长时间的任务。
   • 使用 Web Workers 处理复杂的计算任务。

（三）优化 CLS

1. 避免动态内容的布局变化：

   • 使用 aspect-ratio 属性为图片和视频预留空间。
   • 避免在页面加载后动态插入内容。

2. 优化字体加载：

   • 使用 font-display: swap 确保字体加载不会导致布局偏移。

（四）优化 TTI

1. 减少 JavaScript 的执行时间：

   • 延迟加载非关键 JavaScript。
   • 使用代码分割和懒加载技术。

2. 优化页面的交互性：

   • 确保页面在加载过程中尽快准备好响应用户交互。
   • 使用性能预算工具监控 TTI。

四、实践案例

（一）某电商网站的性能优化

某电商网站通过优化图片加载和使用 preload 指令，将 FCP 和 LCP 分别减少了 30% 和 40%。同时，通过延迟加载非关键 JavaScript 和优化交互响应，FID 降低了 50%，CLS 降低了 60%。最终，TTI 也减少了 30%，用户满意度显著提升。

（二）某新闻网站的性能优化

某新闻网站通过优化字体加载和避免动态内容的布局变化，将 CLS 降低了 70%。同时，通过减少 JavaScript 的执行时间和优化页面的交互性，TTI 减少了 40%，用户在浏览新闻时的体验得到显著改善。

五、总结

以用户为中心的前端性能指标（如 FCP、LCP、FID、CLS 和 TTI）能够直接反映用户在使用 Web 应用时的实际体验。通过使用工具（如 Lighthouse、Google PageSpeed Insights 和 Web Vitals Extension）测量这些指标，并采取相应的优化方法，可以显著提升页面的加载速度和用户体验。希望本文能够帮助你更好地理解和优化前端性能指标。