第五章

性能优化
利用Next.js内置工具

性能即排名。学习如何保障Core Web Vitals，并利用next/font和next/script优化字体与第三方脚本加载。

进阶内容

预计阅读：35分钟

实战优化

5.1 Core Web Vitals 的保障

Core Web Vitals是Google衡量用户体验的核心指标，直接影响搜索排名。Next.js通过内置组件和优化策略，帮助开发者轻松达到良好标准。

Core Web Vitals 模拟器

LCP

Largest Contentful Paint

1.8s

良好 (<2.5)差 (>4)

衡量最大内容元素（如图片或文本块）的加载时间。

INP

Interaction to Next Paint

150ms

良好 (<200)差 (>500)

衡量用户与页面交互（如点击）的响应速度。

CLS

Cumulative Layout Shift

0.05

良好 (<0.1)差 (>0.25)

衡量页面加载期间视觉元素的稳定性，防止跳动。

5.2 字体优化 (next/font)

`next/font` 自动优化本地或Google字体，通过在构建时处理字体文件，消除字体加载引起的布局偏移(CLS)和性能瓶颈。

next/font 优化演示

传统 @import (会导致CLS)

Banner

This text will shift.

/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto');

/* Causes layout shift when font loads */

使用 next/font (零CLS)

Banner

This text is stable.

// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

<body className={inter.className}>{children}</body>

5.3 脚本优化 (next/script)

第三方脚本（如分析、广告）是常见的性能瓶颈。`next/script` 组件通过提供不同的加载策略，让你能精细化控制脚本的加载时机，避免阻塞页面渲染。

next/script 加载策略模拟

选择策略

模拟日志

import Script from 'next/script';

<Script
  src="https://example.com/script.js"
  strategy="afterInteractive"
/>

5.4 代码分割 (Code Splitting)

Next.js 自动实现代码分割，将代码按页面拆分。用户访问某个页面时，只会下载该页面所需的JavaScript，大大减少了初始加载的JS体积，提升了页面加载速度和交互响应性。

自动代码分割

无需手动配置，Next.js的基于页面的路由系统天然支持代码分割。

// 当用户访问 /dashboard 时...

GET /_next/static/chunks/pages/dashboard-....js

// 只会加载dashboard页面相关的JS，而不是整个应用的JS

第五章总结

核心优化

理解并监控LCP, INP, CLS三个核心指标。
使用 `next/font` 消除字体加载的性能问题。
使用 `next/script` 的策略优化第三方脚本。
利用Next.js的自动代码分割优势。

下章预告

最后一章将介绍如何使用工具诊断和持续监控你的SEO效果，包括Google Search Console、PageSpeed Insights等。

进入下一章

性能优化利用Next.js内置工具