最近完成了我的 推荐链接分享平台 doRefer 的性能优化，PageSpeed Insights 四项指标全部达到 100 分满分。作为一个内容密集型网站，想和大家分享一些实用的优化经验。

技术栈

• 框架: Next.js 14.2.3 (App Router)
• CMS: Keystatic (基于文件的 CMS)
• 样式: Tailwind CSS + Radix UI
• 部署: Docker

核心优化策略

1. 静态生成 (SSG) + 增量静态再生 (ISR)

• 构建时生成所有页面
• 设置合理的重新验证时间（ 1 小时）
• 强制静态生成，避免客户端渲染

2. 图片优化

• 全面使用 Next.js Image 组件
• 自动 WebP 转换和懒加载
• 批量预处理 Logo 为统一尺寸
• 设置合适的 sizes 属性

3. 缓存策略

• React cache() 包装数据读取函数
• RSS 和 API 路由设置 30 分钟缓存
• 充分利用 Next.js 自动优化

4. 代码分割

• 合理使用 Server Components
• 客户端组件按需加载
• 使用 Suspense 处理异步组件

5. 字体优化

• 使用 Geist 字体变量
• 设置 font-display: swap
• 预加载关键字体文件

性能成果

• LCP: 2.2s (绿色)
• FID: 78ms (绿色)
• CLS: 0 (完美)
• FCP: 2.1s (绿色)
• TTI: 1.3s (绿色)

关键经验

优化重点

1. 图片是性能杀手 - 正确使用 Next.js Image 组件至关重要
2. 避免客户端渲染 - 能用 Server Components 就用 Server Components
3. 充分利用缓存 - 从 React 缓存到 HTTP 缓存
4. 字体优化 - 避免布局偏移，使用字体变量

踩过的坑

• 忘记设置图片 sizes 属性导致 LCP 不佳
• 过度使用客户端组件影响 FCP
• 字体加载导致的布局偏移

总结

通过系统性的优化，内容密集型网站也能达到满分。关键是理解 Next.js 的优化机制，严格控制客户端 JS ，优化图片和字体。

网站地址：https://dorefer.com

欢迎讨论交流！