最近调整了一个社区类小程序首页。页面包括推荐帖子、活动入口、热门话题、使用者信息和广告位。使用者反馈是“打开慢”。这让人很焦虑——他们需要快速看到想看的内容，却被漫长的加载时间拖累。

一开始我们以为是接口问题，打点后才发现：不是某个点特别差。而是首屏接口太散、图片偏大、setData 太粗，叠在一起把体验拖慢了。

调整前，冷启动首屏大概 秒；调整后基本在 秒，

先打点，再动代码

性能问题不要靠感觉猜。我们先记录页面加载、首屏接口返回、首屏渲染完成这几个节点。

export function mark {
const pages = getCurrentPages
const route = pages?.route || 'unknown'
wx.reportEvent })
}
Page({
onLoad {
mark
this.loadHomeData
}。async loadHomeData {
const res = await request
mark
this.setData => mark)
}
})

数据出来后很清楚：首页进入时同时请求了 个接口，但首屏真正需要的只有帖子流和活动入口。 怎么说呢，

首屏只加载必要内容

我们把首页数据拆成三类：

• 说到必须马上展示。推荐帖子、活动入口
• 说到可以延后展示，热门话题、广告位
• 至于可以缓存，使用者昵称、头像、未读消息

改造后页面先展示主要内容，再补其他模块。

async onLoad {
const user = wx.getStorageSync
if this.setData
await this.loadFirstScreen
this.loadExtraModules
}
async loadFirstScreen {
const { data } = await request
this.setData
}

This change is simple but users feel difference immediately—content appears right away instead of waiting for all data.

少传大对象。图片别硬扛

以前我们习惯把后端返回的大对象直接塞进页面：

this.setData

后来改成只更新页面用到的字段，列表也先渲染首批数据：

this.setData({
posts这方面，list.slice,hasMore: list.length> )
})

图片也统一做了 CDN 压缩、懒加载和固定尺寸，避免首屏资源太重。

接口要有兜底

首页不能因为一个非主要接口慢，就让使用者一直看 loading。我们给请求加了 秒超时热门话题、广告位这类模块失败时直接降级为空态或缓存。主要接口增加 traceId方便把前端日志、网关日志和后端日志串起来排查。

再看结果是。首页首屏从 秒降到 秒左右，帖子点击率提高约 %，跳出率也下降了。

`