当前位置：首页 > news >正文

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

news 来源：原创 2025/5/13 8:46:04

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

前端性能测试指标：
在这里插入图片描述

场景：用户在页面上进行各种交互操作，如点击按钮、输入文本等。
重要指标及原因
- 首次输入延迟（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