前言

小程序性能体验对于小程序在经营初期获客并建立用户信任、提高用户访问意愿甚至在促进用户转化层面有着重要的加持作用。假如小程序用户在进入小程序或者在消费小程序产品/服务的时候，出现页面加载慢、页面渲染慢、白屏等异常问题，将直接影响用户的转化率，用户体验大打折扣。

为了提供给开发者更好用更高效的开发者工具，提高小程序性能和体验，新版小程序性能分析工具重新定义和划分模块、增加归因和运行性能分析能力并支持自定义配置预警，进一步完善工具的可用性和能力丰富度。

在产品灰度期间，不同行业的小程序基于小程序性能分析工具分别取得了不错的性能数据收益，我们整理了开发者的性能优化思路，希望可以给平台开发者带来启发、提供方向。

案例一：游乐宝点小程序

关键词：#借势共创 #合力优化 #快速验证

亮点数据：冷启动LCP80降低约1600ms 冷启动LCP到达率提升约5%

一、游乐宝点小程序介绍

游乐宝点小程序主要是为游乐行业的门店提供与收银系统及抖音实现链接的工具，可实现游戏币/套票等商品购买，以及实现顾客快速进行抖音核销等功能的生活服务类抖音小程序。

游乐宝点小程序研发和运营团队通过旧版性能数据面板发现小程序偶然会出现首屏加载慢、页面渲染慢、白屏等异常问题，恰逢接到灰度共创项目邀约，双方一拍即合，便快速参与到了新版性能分析工具灰度共创项目中。通过前期分析了解到首屏加载慢的主要原因是接口耗时长，经过与抖音开放平台性能团队一起定位和拆解问题，并针对问题逐一进行了优化，取得了有效的性能优化收益：通过将缩略图代替大图，启用图片延迟加载，并使用预取数据功能，使首屏渲染耗时显著减少。恰逢春节假期，优化后的小程序性能借着春节用户活动得到快速验证，在假期运营过程中性能表现稳定，未再出现白屏和加载迟缓等异常情况，尤其在支撑春节用户活动方面，订单相关的接口稳定且响应快，小程序整体性能有相当不错的表现。现在在周末用户访问量大、订单接口请求量大的日常运营过程中，也未出现白屏和报错情况。

二、小程序性能优化思路拆解和数据收益

分析过程：通过性能分析平台「性能报告-性能概览」发现问题

通过性能分析平台「性能报告-性能概览」部分查看到小程序概况，发现小程序整体性能问题如下：

1.启动性能：冷启动耗时在 5000ms左右，冷启动打开率约为 88%，均低于同行业小程序。对比与同类型差异值，平台建议设定耗时优化目标为 2750ms；冷启动打开率理想目标为 94%。

2.运行性能：

• 页面切换耗时在996ms，与同类型小程序差异不大，但页面切换较慢占比较高 12.16%，我们期望用户在使用过程中有更丝滑的体验，耗时的优化目标设定为 800ms，切换慢的占比降低至 7%，提升运行过程中的体验。

• 网络耗时均值接近 1500ms，劣于同类型小程序300ms，小程序运行过程中存在多个网络请求，部分重要请求耗时直接影响页面渲染时机。参考同类型基准，优化目标暂定为 400ms。

• 网络请求失败率为 0.75%，劣于同类型小程序 0.1%，考虑到优化成本，暂定优化目标低于为 0.5%。

3.质量监测：小程序白屏和JSAPI 异常率整体优于同类型小程序，暂不做额外处理。页面元素渲染异常占比较高为 0.95%，该异常可能导致部分能力不可用，参照同类型均值，优化目标定为 0.5%，主要关注预警建设，作为中长期的优化跟进。

优化思路

1.基于分析结果进行问题拆解

• 通过启动流程漏斗图发现，在阶段一～阶段二、阶段三～阶段四 两个过程启动转化率较低，分别对应框架及小程序资源加载、页面渲染。

• 根据小程序运行流程以及平台启动漏斗中的阶段耗时指标，启动阶段资源加载耗时 1600ms 关键耗时点为代码下载耗时、创建APP耗时。

• 页面渲染（FP->LCP）链路较长，主要影响点有渲染数据获取（同步API阻塞，网络请求，数据处理）、页面渲染耗时（DOM复杂度，图片资源）。

2.优化方案：参照小程序启动性能优化，分别进行了三个阶段的优化。

• 接口优化，次页LCP耗时-23ms，白屏率-0.01%，页面渲染异常率-0.20%

• 去除无用页面和图片，减少包体积：LCP到达率+0.4%，次页LCP-4ms

• 应用数据预取，缩短数据获取时间，进行代码裁剪，缩短代码下载时间等。冷启动LCP-1600ms，LCP到达率+5%

案例二：文娱微短剧类小程序

关键词：#经常犯的错误不再犯 #优化性能转化漏斗

亮点数据：冷启动LCP80降低超2300ms

一、文娱微短剧小程序介绍

参与小程序性能分析工具灰度共创的微短剧小程序，经营规模和日活用户数均属行业TOP小程序。文娱行业微短剧小程序在视频播放、广告展现、订单支付和搜索模块对接口请求速度、用户体验都有较高的性能稳定性要求。在共创初期，平台性能团队先是帮助小程序进行性能体检，基于启动性能、运行性能、质量监测三个模块给出近一周数据情况和优化目标。

在共创期，通过平台性能研发团队一对一输出的性能体检简报，开发者可以全面了解当前小程序状态、关键耗时点及对应的优化建议。开发者对照性能体检简报，并结合新版性能分析工具进行试用和优化，通过精简页面结构、设置渲染优先级等方式实现冷启动耗时降低超2300ms，通过页面启动逻辑优化在onLoad中减少非必要同步代码实现次页耗时降低超200ms。

二、小程序性能优化思路拆解和数据收益

分析过程：通过性能分析平台发现和定位问题

通过性能分析平台，发现小程序整体性能问题如下：

1.启动性能：冷启动耗时在 5047ms，冷启动打开率为 97.74%，均劣于同类型小程序。对比与同类型差异值，设定耗时优化目标为 2700ms；冷启动打开率理想目标为 97%。

2.运行性能：

• 页面切换耗时在1069ms，略劣于同类型小程序 900ms，以同类型小程序为底线，设置短期优化目标。

• 网络耗时整体较优秀。

• 网络请求失败率为 0.2%，劣于同类型小程序，以其为底线，设置优化目标为 0.1%。

3.质量监测：小程序白屏率和 JSAPI 调用异常失败率略劣于同类型，订阅性能告警，作为长期关注目标。

优化思路

1.基于分析结果进行问题拆解

• 通过启动流程漏斗图发现，关键耗时阶段在于页面首帧到页面最大元素渲染完成。

• 根据小程序运行流程以及平台上启动性能转化漏斗阶段指标，从数据请求、DOM 复杂度入手。

2.优化方案：参照小程序启动性能优化，我们分别进行了两个阶段的优化。

• HTML, CSS 加载耗时优化。精简页面结构，结合占位组件减少首次渲染耗时，设置渲染优先级，懒加载视口外内容。启动LCP-2000ms。

• 页面启动逻辑优化，onLoad 中减少非必要同步代码；封装组件。次页LCP-200ms。

结语

希望上述两个案例，能带给开发者启发和优化思路，通过自查和提升小程序性能稳定性，为业务增长扎实根基，助力小程序运营获得更好的用户满意度和产品评价。

新版小程序性能分析工具现已升级上线，欢迎开发者到小程序控制台体验和使用产品👉快速了解新版产品更新亮点！