求助：React/Next.js网站移动端加载性能优化问题

云原生阿岚

2026-8-19

移动端PageSpeed优化方案（针对你的场景）

一、优先解决字体阻塞问题（核心影响点）

你观察到移除Catamaran字体后评分大幅提升，确实是字体加载阻塞渲染导致的——哪怕字体体积小，默认加载策略会让浏览器等待字体下载完成才显示文本，移动端网络延迟高时，这个等待时间会直接拖慢LCP（最大内容绘制）和FID（首次输入延迟）。

解决办法：

强制启用font-display: swap：
- 用Google Fonts的话，在链接里加display=swap参数，比如：
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran&display=swap">
```
- 自托管字体的话，在@font-face规则里加上：
```
@font-face {
  font-family: 'Catamaran';
  src: url('catamaran.woff2') format('woff2');
  font-display: swap; /* 关键属性 */
  font-weight: 400;
}
```
这个属性会让浏览器先显示系统 fallback 字体，等自定义字体加载完成后再替换，彻底避免FOIT（隐形文本闪烁），直接改善渲染阻塞问题。
优化自托管字体的加载效率：
- 只打包你实际用到的字重（比如只保留400、700，不要全量加载）。
- 用unicode-range限定加载的字符集，比如你的网站是英文，就只加载拉丁字符：
```
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
```
这样能进一步减小字体实际加载体积。

你已经用了next/image和webp，还可以做这些细节优化：

确认next/image的响应式配置：确保width和height是对应移动端实际显示的尺寸，避免加载远超屏幕需求的大图（比如桌面端1920px的图，移动端只需要750px）。
进一步压缩webp图片：用Squoosh或Sharp工具调整压缩质量，比如把质量从80降到65-70，视觉上几乎无差异，但体积能再减20%-30%，对移动端加载速度提升明显。
检查非next/image托管的图片：比如背景图、第三方插件里的图片，这些可能没被自动优化，需要手动转webp并压缩。

清理未使用的CSS/JS：PageSpeed报告里应该会提示"移除未使用的代码"，移动端CPU性能弱，冗余代码会拖慢解析和渲染速度，用Next.js的purgeCSS或者手动清理无用样式。
延迟加载非关键JS：把非首屏需要的JS（比如统计脚本、弹窗插件）设为async或defer，或者用Next.js的动态导入（dynamic(() => import('../components/NonCritical'), { ssr: false })）。
验证缓存策略：确保字体、图片、静态资源的Cache-Control头设置为长期缓存（比如max-age=31536000），减少重复请求带来的延迟。

内容的提问来源于stack exchange，提问作者Dominik Braun