小程序性能优化教程:数据预取方案使用图解
1302 浏览2024年06月12日作者:抖音开放平台团队

数据预取方案终于更新了!!!更灵活,还支持预取图片🎉


通过参与小程序性能优化助力活动,很多小程序拿到了优化收益👏,打破了以下误区:

  1. 性能优化太高端,上手成本高 No
  2. 性能优化对业务收益不大 No

实际上大家验证发现,根据下述流程优化,开发成本在 0.5 天左右 🎉

部分小程序对比优化前后,成功看到小程序页面内容的人数提升 0.5%~1% 🎉

详细使用教程:

Web 页面 LCP 的优秀值为 2500ms,为减少因为性能问题导致的用户流失,我们目标设置为 2000ms

开始前,下载最新版本 IDE 调试工具(4.2.4 或以上版本)


第一步:明确优化页面目标

选取PV较高的作为重点优化对象(不确定的可以通过「控制台-数据-数据中心-页面分析」模块查看)。

将PV 较高的页面设置为启动页面(如右图),然后进行第二步。

第二步:找出影响启动 / 页面切换耗时的主要影响元素

1、在IDE 中使用“体验评分工具” 勾选真机体验后,运行待整个页面渲染完成,点击屏幕后停止(点击屏幕是为了触发LCP 上报)。

2、查看体验评分结果(右图),截图部分为当前场景的最大元素,就是主要优化对象

3、找到主要优化目标:

    • 目标一:影响该部分渲染的数据请求(数据来源 、展示时机等),为主要优化接口,进行第三步「预取主要接口」。
    • 目标二:如果该区域有图片资源,且资源url 固定(如背景图等),则需要重点优化图片,同时根据 「数据预取JS方案」用 tt.preloadImage 预取图片资源。如果图片依赖网络请求,进行第三步。

第三步:预取主要数据接口

1、优化思路:尽可能前置主要元素的渲染时机

2、预取逻辑:

    • 根据上述流程找到 LCP 触发元素(上右图 已经圈⭕️出来了!),如果是图片,直接预取该图片。
      • 点击「查看详情」(下左图)展开渲染层,可以看到图片渲染时机。
    • 点击「查看详情」展开网络层,找到影响 LCP 元素的网络请求,选中看url 信息确认是不是LCP元素的数据源。
    • 找到重要请求后,尽可能前置请求发出的时机,依次检查以下几点:
      • 有前置依赖请求:对前置依赖配置预取,否则直接预取该请求,参考接入示例代码
      • 请求发起时机较晚(trace中请求前有其他逻辑或在 onload 之后):尽早早早发出该请求,并及时更新数据
      • 有前置同步 API:尽可能替换为异步API,或者放在请求后。

最后,上线后在「控制台-开发-性能分析」查看上线效果,如果接入了预取又没有效果,那就不要客气,可通过抖音开放平台-开发者助手提交技术工单提问,将有专业同学协助解决。

最后一次编辑于 2024 年 06 月 12 日
0 条评论

相关公告

专题推荐

热门文章

热门问答