数据预取方案终于更新了!!!更灵活,还支持预取图片🎉
通过参与小程序性能优化助力活动,很多小程序拿到了优化收益👏,打破了以下误区:
- 性能优化太高端,上手成本高 No
- 性能优化对业务收益不大 No
实际上大家验证发现,根据下述流程优化,开发成本在 0.5 天左右 🎉
部分小程序对比优化前后,成功看到小程序页面内容的人数提升 0.5%~1% 🎉
详细使用教程:
Web 页面 LCP 的优秀值为 2500ms,为减少因为性能问题导致的用户流失,我们目标设置为 2000ms。
开始前,下载最新版本 IDE 调试工具(4.2.4 或以上版本)
第一步:明确优化页面目标
选取PV较高的作为重点优化对象(不确定的可以通过「控制台-数据-数据中心-页面分析」模块查看)。
将PV 较高的页面设置为启动页面(如右图),然后进行第二步。
第二步:找出影响启动 / 页面切换耗时的主要影响元素
1、在IDE 中使用“体验评分工具” 勾选真机体验后,运行待整个页面渲染完成,点击屏幕后停止(点击屏幕是为了触发LCP 上报)。
2、查看体验评分结果(右图),截图部分为当前场景的最大元素,就是主要优化对象。
3、找到主要优化目标:
- 目标一:影响该部分渲染的数据请求(数据来源 、展示时机等),为主要优化接口,进行第三步「预取主要接口」。
第三步:预取主要数据接口
1、优化思路:尽可能前置主要元素的渲染时机
2、预取逻辑:
- 根据上述流程找到 LCP 触发元素(上右图 已经圈⭕️出来了!),如果是图片,直接预取该图片。
- 点击「查看详情」(下左图)展开渲染层,可以看到图片渲染时机。
- 点击「查看详情」展开网络层,找到影响 LCP 元素的网络请求,选中看url 信息确认是不是LCP元素的数据源。
- 找到重要请求后,尽可能前置请求发出的时机,依次检查以下几点:
- 有前置依赖请求:对前置依赖配置预取,否则直接预取该请求,参考接入示例代码
- 请求发起时机较晚(trace中请求前有其他逻辑或在 onload 之后):尽早早早发出该请求,并及时更新数据。
- 有前置同步 API:尽可能替换为异步API,或者放在请求后。
最后,上线后在「控制台-开发-性能分析」查看上线效果,如果接入了预取又没有效果,那就不要客气,可通过抖音开放平台-开发者助手提交技术工单提问,将有专业同学协助解决。