小程序首页性能优化实战：从 4 秒到 1.8 秒

最近优化了一个社区类小程序首页。页面包括推荐帖子、活动入口、热门话题、用户信息和广告位。用户反馈是"打开慢"，一开始我们以为是接口问题，打点后才发现：不是某个点特别差，而是首屏接口太散、图片偏大、setData 太粗，叠在一起把体验拖慢了。

优化前，冷启动首屏大概 4.2 秒；优化后基本在 1.6-2.3 秒。

先打点，再动代码

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

js 复制代码

export function mark(name) {
  const pages = getCurrentPages()
  const route = pages[pages.length - 1]?.route || 'unknown'
  wx.reportEvent('page_perf', { route, name, time: Date.now() })
}

Page({
  onLoad() {
    mark('home_load_start')
    this.loadHomeData()
  },
  async loadHomeData() {
    const res = await request('/api/home')
    mark('home_data_ready')
    this.setData({ homeData: res.data }, () => mark('home_render_done'))
  }
})

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

首屏只加载必要内容

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

必须马上展示：推荐帖子、活动入口
可以延后展示：热门话题、广告位
可以缓存：用户昵称、头像、未读消息

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

js 复制代码

async onLoad() {
  const user = wx.getStorageSync('user_profile')
  if (user) this.setData({ user })

  await this.loadFirstScreen()
  this.loadExtraModules()
}

async loadFirstScreen() {
  const { data } = await request('/api/home/first-screen')
  this.setData({ posts: data.posts, activity: data.activity })
}

这个改动不复杂，但用户感知很明显：先看到内容，而不是等整页数据都回来。

少传大对象，图片别硬扛

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

js 复制代码

this.setData({ pageData: res.data })

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

js 复制代码

this.setData({
  posts: list.slice(0, 10),
  hasMore: list.length > 10
})

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

html 复制代码

<image src="{{item.cover}}?imageView2/1/w/360/h/240" lazy-load />

接口要有兜底

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

最后结果是：首页首屏从 4.2 秒降到 2 秒左右，帖子点击率提升约 12%，跳出率也下降了。

我的经验是，小程序性能优化不一定先做大改造。先拆清楚首屏链路：用户先看到什么，哪些接口必须等，哪些内容可以延后，哪些数据可以缓存。把这几个问题想明白，大部分"打开慢"都有办法下手。