跳到主内容

PageSpeed Insights 评分从 60 到 95 的优化记录

Isabela Cruz158 浏览
IS
Isabela Cruz楼主
Next.js Image 组件自动优化图片格式（WebP/AVIF）、尺寸和懒加载，对 LCP 优化效果显著。LCP 图片要加 priority 属性，否则懒加载会延迟 LCP 时间。但不要给所有图片加 priority，只给首屏最大的图片。

Core Web Vitals INP 优化关键是减少主线程阻塞。① 拆分长任务（>50ms）用 requestIdleCallback 或 setTimeout ② 减少第三方脚本 ③ 用 Web Worker 处理重计算 ④ 延迟加载非关键交互 ⑤ 避免大型布局重排。

PageSpeed 优化记录：我的站点从 60 分到 95 分花了三周。关键改动：① 图片用 next/image + priority ② 移除首屏 framer-motion 改用 CSS 动画 ③ 非首屏组件 next/dynamic 懒加载 ④ 字体用 next/font ⑤ 第三方脚本延迟加载。

hreflang 自引用是必须的。每个语言页面必须包含指向自身的 hreflang（如 hreflang=en 指向英文版）。缺少自引用，Google 会忽略整组 hreflang。x-default 指向默认语言版本，用于未匹配语言的用户。

OG 图片用 Next.js 的 next/og 或 ImageResponse 动态生成，效果比静态图片好。1200x630 是标准尺寸，图片上放标题和品牌 logo，社交分享时点击率能提升 30%。
查看历史

24 回复

  1. 潜水
    潜水员第 2 楼
    这个思路很巧妙，sitemap.xml 用 ISR 缓存（revalidate: 3600），发布新内容后 revalidatePath 刷新。欢迎大家补充。
  2. ET
    Ethan Brooks第 3 楼
    补充一个边界情况：404 页面一定要返回 404 状态码，软 404（返回 200）会被当作低质内容。细节可以再展开讨论。
  3. 林间
    林间晨露第 4 楼
    实操中我发现：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。实践出真知，建议动手试试。
  4. RO
    Ronan Doyle第 5 楼
    这个观点我很认同，INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。共同进步。
  5. YU
    Yusuf Al-Amin第 6 楼
    Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。
  6. 发呆
    发呆的仓鼠第 7 楼
    实操中我发现：JSON-LD 用 Article 类型必须包含 author 和 datePublished，否则 Rich Results 不显示。效果因项目而异，建议实际测试。
  7. 不将
    不将就第 8 楼
    说个反直觉的发现：结构化数据用 Rich Results Test 工具测试，Search Console 会报错误。实践出真知，建议动手试试。
  8. 云中
    云中漫步第 9 楼
    Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。
  9. 熬夜
    熬夜的猫头鹰第 10 楼
    这个思路很巧妙，sitemap.xml 用 ISR 缓存（revalidate: 3600），发布新内容后 revalidatePath 刷新。实践出真知，建议动手试试。
  10. 近水
    近水含烟第 11 楼
    我之前也遇到过类似问题，hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。
  11. 会议
    会议逃生专家第 12 楼
    我的项目里也用了这个方案，Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。希望少走弯路。
  12. DI
    Diego Ramos第 13 楼
    补充一点：metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。有疑问可以继续问。
  13. 小青
    小青年第 14 楼
    反对一下，我的测试结果不是这样：robots.txt 控制抓取，noindex 控制索引，两个不要搞混。一起学习。
  14. 摸鱼
    摸鱼的锦鲤第 15 楼
    这个思路很巧妙，PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。一起学习。
  15. 冲浪
    冲浪的海豹第 16 楼
    结合我最近的项目经验：robots.txt 控制抓取，noindex 控制索引，两个不要搞混。踩了很多坑才总结出来的。
  16. 迷路
    迷路的信鸽第 17 楼
    补充一个边界情况：hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。实践出真知，建议动手试试。
  17. 落日
    落日余晖第 18 楼
    有个相关问题想请教：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。期待更多实战经验分享。
  18. KA
    Karim Nasser第 19 楼
    我的实践经验和你的不太一样：404 页面一定要返回 404 状态码，软 404（返回 200）会被当作低质内容。踩了很多坑才总结出来的。
  19. 社恐
    社恐患者第 20 楼
    我之前也遇到过类似问题，hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。希望对你有帮助。
  20. 竹林
    竹林深处第 21 楼
    结合我最近的项目经验：INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。希望少走弯路。
登录后可回复
    数据正在加载中…