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

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

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，或者放在请求后。

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