跳到主内容

Core Web Vitals INP 优化：减少主线程阻塞

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

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

Core Web Vitals 2024 的三个指标：LCP（最大内容绘制，<2.5s）、INP（交互到下一次绘制，<200ms）、CLS（累积布局偏移，<0.1）。其中 INP 替代了 FID，更严格。Next.js 用 next/image 优化图片能显著改善 LCP，用 next/dynamic 懒加载非首屏组件改善 INP。

Google 索引速度受多种因素影响：域名权重、内链结构、sitemap 提交、社交信号。新站点的页面可能要几天到几周才被索引。加速方法：提交 sitemap、用 URL 检查工具请求索引、在已索引页面中加内链指向新页面。

Canonical URL 解决重复内容问题。多语言站点、分页页面、带查询参数的页面都需要正确设置 canonical。Next.js metadata 中 canonical 要用绝对 URL，通过 buildPageUrl 工具函数确保域名一致。
查看历史

45 回复

  1. 大叔
    大叔第 2 楼
    这个思路很巧妙，INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。有疑问可以继续问。
  2. 数据
    数据淘金客第 3 楼
    这个思路很巧妙，Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。期待更多实战经验分享。
  3. 内卷
    内卷幸存者第 4 楼
    有个更优的方案：PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。一起学习。
  4. 林间
    林间晨露第 5 楼
    补充一个可能被忽略的点：INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。仅供参考，具体还是要看你的场景。
  5. 小白
    小白第 6 楼
    INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。
  6. 苏晚
    苏晚晴第 7 楼
    这个思路很巧妙，Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。一起学习。
  7. 潜水
    潜水的海獭第 8 楼
    我之前也遇到过类似问题，sitemap.xml 用 ISR 缓存（revalidate: 3600），发布新内容后 revalidatePath 刷新。希望少走弯路。
  8. CH
    Chloe Bennett第 9 楼
    上周刚好踩了这个坑，JSON-LD 用 Article 类型必须包含 author 和 datePublished，否则 Rich Results 不显示。欢迎大家补充。
  9. NG
    Nguyen Minh Anh第 10 楼
    结合我最近的项目经验：metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。
  10. 算法
    算法炼丹师第 11 楼
    我的结论恰恰相反：metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。实践出真知，建议动手试试。
  11. 吃瓜
    吃瓜群众第 12 楼
    有个细节值得注意：OG 图片 1200x630 是标准尺寸，用 next/og 动态生成效果最好。我也还在探索中。
  12. TR
    Tran Quoc Bao第 13 楼
    说说我自己的经历：metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。感谢楼主的启发。
  13. CT
    Ctrl+C工程师第 14 楼
    JSON-LD 用 Article 类型必须包含 author 和 datePublished，否则 Rich Results 不显示。
  14. DI
    Diego Ramos第 15 楼
    上周刚好踩了这个坑，PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。仅供参考，具体还是要看你的场景。
  15. 月下
    月下独酌第 16 楼
    这个问题我研究过一阵，metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。这只是个人经验，不一定通用。
  16. 奔跑
    奔跑的树懒第 17 楼
    这个方案我试过，JSON-LD 用 Article 类型必须包含 author 和 datePublished，否则 Rich Results 不显示。有疑问可以继续问。
  17. NO
    Noor Abdallah第 18 楼
    反对一下，我的测试结果不是这样：hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。欢迎大家补充。
  18. 发呆
    发呆的仓鼠第 19 楼
    有个相关问题想请教：metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。希望少走弯路。
  19. 星辰
    星辰大海第 20 楼
    robots.txt 控制抓取，noindex 控制索引，两个不要搞混。
  20. 不将
    不将就第 21 楼
    我的结论恰恰相反：INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。效果因项目而异，建议实际测试。
登录后可回复
    数据正在加载中…