GitHubGitHub Repository
blurred image
现代 Next.js (13-16) 优化 LCP 的方法 thumbnail image

现代 Next.js (13-16) 优化 LCP 的方法

mahirooyama

mahirooyama

@Mahiro___Oyama

现代 Next.js（尤其 13 → 16 这一代）对 LCP 的优化已经不只是“图片懒加载”那么简单了，而是从：

  • React Server Components
  • Streaming SSR
  • Partial Hydration
  • Image Pipeline
  • Resource Priority
  • Script Scheduling
  • Font Optimization
  • Router Prefetch
  • Cache Strategy

整套链路去优化。

下面我按“代码层面到底做了什么”来讲。

一、Next.js 如何优化 LCP 的核心思路

LCP 本质上取决于：

LCP =
TTFB
+ Resource Load Delay
+ Resource Load Time
+ Render Delay

所以 Next.js 重点优化：

阶段Next.js 做什么
TTFBRSC + Streaming SSR
资源发现preload / preconnect
图片下载next/image
JS 阻塞partial hydration
CSS 阻塞CSS splitting
字体阻塞next/font
客户端水合selective hydration

二、next/image 如何优化 LCP（最核心）

这是你刚才问到的重点。

1. 自动 preload

当你：

<Image priority />

Next.js 会自动生成：

<link
  rel="preload"
  as="image"
  href="..."
  fetchpriority="high"
/>

不需要手动写 <Head>。

2. 自动 fetchPriority

浏览器会得到：

<img fetchpriority="high">

Chrome 会：

  • 提前调度下载
  • 提升网络优先级
  • 更早进入 preload scanner

3. 自动 srcset

<Image width={1200} />

会生成：

srcset="
  image?w=640,
  image?w=1080,
  image?w=1920
"

避免：

  • 手机下载桌面大图
  • 浪费带宽
  • LCP 变慢

4. 自动尺寸占位（防 CLS）

width={724}
height={440}

浏览器提前知道布局。

避免：

图片下载后页面跳动

CLS 和 LCP 经常关联。

5. AVIF / WebP 自动协商

Next.js Image Optimizer：

Accept: image/avif

自动返回：

  • AVIF
  • WebP
  • JPEG fallback

减少：

Resource Load Time

三、React Server Components（Next13+ 最大变化）

这是现代 Next.js 提升 LCP 的真正核心。

传统 React 问题

以前：

HTML -> JS Bundle -> Hydration -> Render

用户必须等待：

  • JS 下载
  • JS 执行
  • React hydration

才能看到内容。

RSC 之后

现在：

Server Rendered HTML
直接流式输出

用户：

  • 更早看到页面
  • 不需要等待 JS

因此：

Render Delay 大幅下降

四、Streaming SSR

以前：

等整个页面 render 完
再返回 HTML

现在：

边 render 边 stream

例如：

<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

Next.js：

  • 先返回关键 HTML
  • Hero 区先显示
  • 非关键内容后加载

因此：

首屏 LCP 更快出现

五、Selective Hydration

以前：

整个页面一起 hydration

现在 React 18：

优先 hydration 可交互区域

比如：

  • Hero CTA
  • 导航栏
  • 首屏按钮

优先。

减少：

Main Thread Blocking

六、自动代码分割（Code Splitting）

Next.js：

dynamic(() => import('./HeavyChart'))

会：

  • 不把 chart JS 放首屏
  • 减少 JS bundle

因此：

JS 下载更少 → LCP 更快

七、CSS 优化

Next.js：

  • route-level CSS splitting
  • critical CSS inline
  • 删除 unused CSS

避免：

Render Blocking CSS

八、next/font（现代非常关键）

字体是 LCP 杀手。

以前：

@font-face

会：

  • FOIT
  • FOUT
  • render blocking

next/font 做了什么

import { Inter } from 'next/font/google'

自动：

  • preload font
  • subset
  • self-host
  • size-adjust
  • fallback metrics

减少：

Font Swap CLS

和：

Text LCP Delay

九、Link Prefetch

Next.js：

<Link href="/about" />

自动：

  • viewport prefetch
  • hover prefetch

让下一页：

  • instant navigation
  • 几乎没有 LCP

十、现代 Next16 更进一步的优化

Next16 开始重点优化：

1. Partial Prerendering（PPR）

页面：

静态 shell + 动态 island

用户：

  • 立刻看到页面框架
  • 动态内容后补

LCP 巨大提升。

2. Cache Components

自动缓存：

  • fetch
  • server components
  • segment

减少 TTFB。

3. 更智能的 Resource Priority

Next16 会自动识别：

  • LCP image
  • critical CSS
  • above-the-fold content

并调整：

fetchPriority
preload
preconnect

十一、真正的大头其实是：

很多人误以为：

next/image = LCP 优化

其实真正收益最大的是：

React Server Components + Streaming

因为：

现代 LCP 最大问题往往不是：

图片下载慢

而是：

JS 阻塞渲染

十二、现代 Next.js 最佳实践（LCP）

Hero Image

<Image
  priority
  unoptimized
/>

CDN 图片建议：

unoptimized

减少 Client Components

不要：

'use client'

滥用。

因为：

client component：

  • 增加 JS
  • 增加 hydration
  • 降低 LCP

首屏避免：

  • Carousel
  • 大动画
  • 大状态管理
  • Chart
  • 巨大 icon library

使用 Suspense

<Suspense fallback={<Skeleton />}>

先渲染关键内容。

使用 next/font

不要手写 Google Fonts。

尽量：

Server Components First

十三、现代 Next.js 的核心理念

Next.js 16 的方向其实是：

“少给浏览器 JS”

因为：

现代性能瓶颈：

不是网络
而是 JS 执行

所以：

  • RSC
  • streaming
  • selective hydration
  • partial prerendering

本质都在解决：

浏览器主线程过载

这才是现代 Next.js 优化 LCP 的核心。