本文分享了作者对其推荐链接分享平台doRefer进行性能优化的经验，该平台最终在PageSpeed Insights上获得了四项指标满分的成绩。文章详细介绍了Next.js 14.2.3、Keystatic、Tailwind CSS + Radix UI和Docker等技术栈，并着重阐述了静态生成、图片优化、缓存策略、代码分割和字体优化等核心优化策略。作者还分享了优化过程中遇到的问题及解决方案，最终实现了网站性能的显著提升。

🖼️ **静态生成与增量静态再生：** 采用静态生成（SSG）构建所有页面，并设置合理的重新验证时间，避免客户端渲染，确保页面快速加载。

🖼️ **图片优化：** 使用Next.js Image组件进行图片优化，实现WebP自动转换、懒加载、批量预处理Logo，并设置合适的sizes属性，提升图片加载速度。

💾 **缓存策略：** 利用React cache()包装数据读取函数，对RSS和API路由设置30分钟缓存，充分利用Next.js的自动优化功能，提高数据读取效率。

🧩 **代码分割：** 合理使用Server Components，按需加载客户端组件，并使用Suspense处理异步组件，减少首屏加载时间。

🔤 **字体优化：** 使用Geist字体变量，设置font-display: swap，预加载关键字体文件，避免布局偏移，改善用户体验。

最近完成了我的 推荐链接分享平台 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 (绿色)

关键经验

优化重点

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

踩过的坑

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

总结

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

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

欢迎讨论交流！