性能不是一件事——它是数十个小决策的总和。本清单涵盖图片、字体、JavaScript、CSS、缓存和渲染 六个领域的 30 个项目。每个项目按典型影响程度排列。从最重要的项目开始处理。
图片（影响最大）
- 将所有图片转换为 WebP 或 AVIF。 WebP 将 JPEG 减少 25–35%，PNG 减少 50–70%。静态资源使用 Picovert 转换工具。
- 绝对不要对 LCP 图片使用懒加载。 改为添加
fetchpriority="high"和<head>中的<link rel='preload'>。 - 始终为每个 img 指定 width 和 height。 防止图片在没有预留空间时加载 导致的 CLS。
- 使用至少 3 个尺寸的 srcset。 320w、768w、1200w 覆盖移动、平板和桌面。 移动端负载减少 50–60%。
- 对折叠下方的图片使用懒加载。
loading="lazy"现在是所有 现代浏览器的基础功能。无需 JavaScript。 - 将 GIF 动画转换为 MP4。 MP4 小 10–20 倍，使用硬件解码。在这里转换。
字体
- 只使用 WOFF2。 WOFF2 比 WOFF 压缩效率高 30%，浏览器支持率 98%。
- 将字体子集化为实际使用的字符。 完整拉丁字体 80 KB，子集化为语言字符集： 15–20 KB。
- 预加载关键字体。
<link rel="preload" as="font" crossorigin>消除第二次往返的发现延迟。 - 正文字体用 font-display: swap，装饰字体用 optional。 防止加载期间的不可见文本（FOIT），同时避免主要布局偏移。
- 自托管字体而非从 Google Fonts 加载。 消除对 fonts.googleapis.com 的 DNS 查询和连接。
JavaScript
- 在路由级别分割代码。 每个路由只应加载它需要的 JavaScript。Next.js 自动 为页面执行此操作。
- 审查并删除未使用的依赖项。 添加任何新 npm 包前运行
npx bundle-phobia [包名]。 - 动态导入重型组件。 富文本编辑器、图表库、PDF 渲染器——只在需要时加载。
- 延迟所有非关键第三方脚本。 分析、热图、聊天机器人——在
load事件触发后加载。
CSS
- 对首屏内容内联关键 CSS。 浏览器无需等待外部样式表即可渲染可见部分。
- 删除未使用的 CSS。 使用 PurgeCSS 或 Tailwind 的 JIT，只发送页面 实际使用的样式。
- 优先使用 CSS 动画而非 JavaScript 动画。 CSS 动画在合成器线程上运行， 不会阻塞主线程。
缓存
- 为静态资源设置长效缓存头。 哈希文件名（JS、CSS、图片）使用
Cache-Control: max-age=31536000, immutable。immutable 告知浏览器不要 重新验证。 - 部署到用户附近有边缘节点的 CDN。 将大多数全球流量的往返延迟从 150 ms 降至 10 ms 以下。
渲染
- 对数据密集页面使用 Next.js App Router RSC。 服务器组件无需向客户端 发送自身的 JavaScript 即可流式传输 HTML。
- 对屏幕外区域使用 content-visibility: auto。 浏览器跳过不可见内容的 布局和绘制，在长页面上将渲染时间减少 40–60%。
- 不要猜测，要测量。 每次更改前后运行 Lighthouse，在 Search Console 中 检查 CrUX 数据，并结合自己的 RUM 数据使用 web-vitals 库。