C端营销领域前端页面性能测试全流程实践

最新推荐文章于 2025-10-14 09:36:18 发布

原创最新推荐文章于 2025-10-14 09:36:18 发布 · 907 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#测试

一、前端页面性能测试的必要性

前端性能测试远非锦上添花，而是关乎产品成败的核心活动。它连接着用户体验、商业目标和技术实现。将前端性能测试纳入开发、测试和发布流程，进行持续的监控和优化，是构建高质量、高竞争力、用户喜爱且商业成功的数字产品的必然要求。

二、顺丰前端页面性能测试的痛点

为了反映真实用户体验，基于用户真实行为进行前端页面性能测试时，面临着如何制定测试标准、如何快速精准测试、如何保障用户体验等问题。其中制定测试标准是否以行业标准为基准就可还是需要按照业务系统变化而调整？快速精准测试是否有基于现有行业的常用工具基础上可更精准快速的进行测试？实验室测试数据是否能真实反应用户体验？如何在实际生产环境中保障用户体验？

三、前端页面性能测试实践

基于行业标准走出顺丰独有的实践之路

1、分析用户行为

1.1、遵循原则

● 用户中心原则：性能优化需以真实用户场景为核心，避免脱离用户需求的实验室测试。

● 数据驱动原则：通过真实用户监控（RUM）数据定位高频路径和性能瓶颈。

● 帕累托法则（80/20法则）：优先优化影响80%用户的关键页面和交互路径。

1.2、明确影响性能的因素

1.3、分析用户使用场景 & 统计关键路径

在明确影响用户页面性能的因素后，统计分析生产环境真实用户的使用数据，按照影响因素、用户核心使用场景与操作路径得到性能测试场景集，进而确保测试结果能够反映生产环境中90%用户的真实使用场景。

1. RUM（Real User Monitoring）：通过埋点收集用户实际访问时的性能数据（如页面加载时间、交互延迟）。

2. 热力图/点击流分析：识别高频操作路径（如首页→商品详情页→支付页）。

3. 设备与网络分布：分析主流用户设备类型（移动端/PC）、网络环境（4G/弱网）、屏幕大小。

4. 核心用户旅程（Core User Journeys）：定义关键业务场景（如用户登录、商品搜索、支付流程），作为性能测试的重点路径。

2、制定性能测试标准

2.1、确定指标

参考谷歌发布的以用户为中心的效果指标

首次内容渲染 (FCP)：衡量从网页开始加载到网页任何一部分内容呈现在屏幕上的时间。
Largest Contentful Paint (LCP)：衡量从网页开始加载到屏幕上渲染最大文本块或图片元素所用的时间。
Interaction to Next Paint (INP)：衡量与网页进行的每一次点按、点击或键盘互动的延迟时间，并根据互动次数，选择网页最长的互动延迟时间（或接近最长的互动延迟时间）作为单个代表性值，以描述网页的总体响应速度。
Total Blocking Time (TBT)：衡量从 FCP 到 TTI 之间的总时长，在此期间，主线程处于屏蔽状态的时间够长，足以阻止输入响应。
累积布局偏移 (CLS)：衡量网页开始加载到其生命周期状态更改为“隐藏”之间发生的所有意外布局偏移的累计得分。
首字节时间 (TTFB)：衡量网络响应用户请求并发送资源第一个字节所需的时间。

2.2、谷歌的指标标准

参考谷歌的标准再进行调整

2.3、我们的标准

制定评分模型

根据我们的业务属性，移动设备要求的体验追求比桌面设备强，并且根据我们实际用户使用数据的分析，目标客户实际使用的设备性能比谷歌统计数据的性能要好，用户对性能要求也更高，所以我们对性能测试的标准进行了调整以用来适配顺丰业务发展。

3、模拟用户测试性能

使用行业常用工具与自研工具进行测试

3.1、lighthouse测试

可设置设备类型、模式、分类等进行测试，为了提供接近真实移动用户体验的性能评估，lighthouse会默认进行网络限速与CPU限制，比如移动设备lighthouse默认限制CPU throttling: 4x slowdown (Simulated)、Screen emulation: 412x823（屏幕大小的限制）、Network throttling: 默认限制slow 4G （150 ms TCP RTT, 1,638.4 kb/s throughput ），桌面设备默认限制CPU throttling: 1x slowdown (Simulated)、Screen emulation: 412x823、Network throttling: 40 ms TCP RTT, 10,240 kb/s throughput (Simulated)
想要修改限制可以使用命令行的方式运行lighthouse去掉限制或指定设置。比如：lighthouse "url"--screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent

3.2、开发者工具测试

谷歌开发者工具中的性能面板，分析网站性能。可设置CPU、网络速度、设备模式，可实时观察LCP、CLS、INP（与网页互动才会捕获到INP），也可以点击录制分析运行时的性能。

3.3、JS测试

1、首次内容渲染 (FCP)：

执行 JavaScript 得到 FCP

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

2、Largest Contentful Paint (LCP)：

执行 JavaScript 得到 LCP

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

3、累积布局偏移 (CLS)：

执行 JavaScript 中衡量布局偏移

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

4、首字节时间 (TTFB)：

执行 JavaScript 中衡量 TTFB

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});