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

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

框架

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

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

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

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

前端优化

我来解答赞 6 收藏

反馈

2 条解答

瑞君 Lv1

哈，Nuxt3这玩意儿虽然新，但老套路还是管用的。你这问题我遇到过，几个关键点要搞：

第一，骨架屏必须安排上，用useHead先设置个loading状态，再搞个简单的骨架组件。这样用户至少能看到点东西，比白屏强多了。

第二，useAsyncData确实能用，但你这一下子拉15条太狠了。建议改成服务端分页，首屏只拉5条：

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

  return $fetch('/api/posts?limit=5')

}, {

  transform: (data) => data.slice(0, 5) // 保险起见再截断一次

})

第三，缓存策略得搞起来。如果是WordPress当后端的话，装个WP Rocket之类的缓存插件可以显著改善API响应速度。Nuxt这边可以加上SWR策略：

{

  staleWhileRevalidate: 3600, // 1小时缓存

  baseURL: '/api'

}

最后，别忘了开Gzip压缩和上CDN，这些基建工作做好了能直接让加载时间减半。Lighthouse分数40多分的话，多半是这些基础优化都没做。

2026-03-10 09:07

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