如何进行前端性能测试？--性能标准

如何进行前端性能测试？–性能标准

前端性能测试指标：

首次加载阶段

• 场景：用户首次访问网页，在页面还未完全呈现各种内容和功能时的体验。
• 重要指标及原因
  • 首次内容绘制（FCP - First Contentful Paint）​
    • 标准：FCP 通常应在 1.8 秒内达成。
    • 重要性：这是用户看到页面第一个内容的时刻，能让用户快速知道页面已经开始加载，减少等待的焦虑感。如果 FCP 时间过长，用户可能会认为页面加载缓慢甚至放弃访问。
  • 最大内容绘制（LCP - Largest Contentful Paint）​
    • 标准：一般来说，LCP 应该在 2.5 秒内完成。
    • 重要性：LCP 衡量视口中最大内容元素何时渲染到屏幕上，对于用户快速感知页面主要内容很关键。较快的 LCP 时间可以让用户更快地了解页面的核心信息。

交互响应阶段

• 场景：用户在页面上进行各种交互操作，如点击按钮、输入文本等。
• 重要指标及原因
  • 首次输入延迟（FID - First Input Delay）​
    • 标准：FID 应控制在 100 毫秒以内。
    • 重要性：直接反映用户操作后页面的响应速度。如果 FID 时间过长，用户点击按钮后要过很久页面才有反应，会极大地影响用户体验，让用户觉得页面卡顿、不流畅。
  • 页面交互时间（TTI - Time to Interactive）​
    • 标准：TTI 应在 5 秒以内。
    • 重要性：表示页面达到可稳定交互状态的时间。如果 TTI 时间过长，用户在一段时间内无法正常与页面交互，可能会放弃操作或离开页面。
      页面加载完整性阶段
• 场景：用户等待整个页面包括所有资源（图片、脚本、样式表等）完全加载### 完成的体验。
• 重要指标及原因
  • 页面完全加载时间（Time to Fully Loaded）​
    • 标准：一般希望TFL在 3 秒内完成，复杂 Web 应用通常不应超过 5 秒。
    • 重要性：对于一些需要完整资源才能正常使用的页面功能，如视频播放、大型文件上传下载等，页面完全加载时间过长会导致用户无法及时使用这些功能，可能造成用户流失。

视觉稳定性场景

• 场景：用户在浏览页面过程中，希望页面布局保持稳定，不会突然发生意外变化。
• 重要指标及原因
  • 累积布局偏移（CLS - Cumulative Layout Shift）​
    • 标准：CLS 通常应保持在 0.1 以下。
    • 重要性：如果页面在加载或交互过程中频繁出现布局偏移，会让用户感到困惑和不适，可能导致误操作，严重影响用户体验。

整体加载速度感知场景

• 场景：用户对页面整体加载快慢的主观感受，尤其是在网络环境较差或页面较为复杂时。
• 重要指标及原因
  • 速度指数（Speed Index，SI）​
    • 标准：SL通常认为速度指数在 3 秒以内是比较理想的。
    • 重要性：从整体上衡量页面加载期间内容可视化显示的速度，能让开发者了解用户对页面加载速度的大致感受，以便进行针对性的优化 。

线上网站测试工具：

• WebPageTest：这是一个专业的网页性能测试工具，它提供了一系列详细的性能评分和建议。一般来说，在 WebPageTest 的综合评分中，得分在 90 分以上通常被认为是一个性能表现优秀的网站。
• https://www.webpagetest.org/
• GTmetrix：同样是一个知名的性能分析工具，它会给出页面加载速度、可优化程度等方面的评分。通常，页面加载时间在 3 秒以内，且各项优化建议得分较高时，表明网站前端性能良好 。
• https://gtmetrix.com/
  分析前端性能基础教学视频：https://www.bilibili.com/video/BV1C8411V7y2/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=9a733dd9dd93beb88cbe0c3ba258b6d8
  Google Charome中Lighthouse性能分析功工具：https://developer.chrome.com/docs/lighthouse/overview?hl=zh-cn
  Preferences性能测试工具：https://developer.chrome.com/docs/devtools/settings/preferences?hl=cn
  Performance Monitor性能监视工具：https://developer.chrome.com/docs/devtools/performance-monitor?hl=cn