Nuxt 项目首屏加载太慢，怎么优化？

Mc.小敏提问于 2026-03-04 20:02:20 阅读 5

框架

我用 Nuxt 3 搭了个博客，首页要加载十几篇文章的摘要，现在首屏白屏时间特别长，Lighthouse 评分才 40 多分。试过 lazy: true 和 suspense，但效果不明显。

数据是通过 useAsyncData 从 CMS 拉的，代码大概这样：

const { data } = await useAsyncData('posts', () => {
  return $fetch('/api/posts?limit=15')
}, {
  lazy: true,
  server: true
})

有没有更有效的优化手段？比如分页、骨架屏，或者缓存策略？

前端优化

我来解答赞 1 收藏

反馈

1 条解答

Designer°瑞珺 Lv1

15篇摘要一次性加载确实太重了，几个实测有效的方案：

1. 先加个骨架屏至少让用户感知快些：

2. 必须做分页，首屏只加载5条：

const { data } = await useAsyncData('posts', () => {

  return $fetch('/api/posts?limit=5') // 改这里就行

}, {

  lazy: true,

  server: true

})

3. 用nuxt提供的payload缓存，下次访问直接从本地取：

// nuxt.config.ts

export default defineNuxtConfig({

  experimental: {

    payloadExtraction: true

  }

})

4. 顺便检查下是否开了SSR，没开的话加上：

// nuxt.config.ts

ssr: true

这些改完Lighthouse至少能上70，再慢就是CMS接口的问题了，得加CDN或者换更快的CMS。

2026-03-05 10:04