拓扑森林
首页OPC课程政企培训专属智能体项目投融资行业资讯站内论坛关于我们
登录
跳到主内容
    论坛/SEO讨论

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

    吃代码的猫·2026/05/29 21:46:48·0 浏览
    站内论坛
    教程论坛排行榜徽章
    吃代
    吃代码的猫楼主
    2026/05/29 21:46:48
    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 楼2026/05/30 12:10:48
      这个思路很巧妙,INP 替代 FID 后更严格了,用 next/dynamic 懒加载非首屏组件效果明显。有疑问可以继续问。
    2. 数据
      数据淘金客第 3 楼2026/06/01 01:45:36
      这个思路很巧妙,Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。期待更多实战经验分享。
    3. 内卷
      内卷幸存者第 4 楼2026/06/02 21:35:30
      有个更优的方案:PageSpeed 从 60 到 95 的关键:next/image + priority + 移除首屏 framer-motion。一起学习。
    4. 无所
      无所谓第 5 楼2026/06/05 20:17:13
      补充一个可能被忽略的点:INP 替代 FID 后更严格了,用 next/dynamic 懒加载非首屏组件效果明显。仅供参考,具体还是要看你的场景。
    5. 雾里
      雾里看花第 6 楼2026/06/08 12:31:21
      INP 替代 FID 后更严格了,用 next/dynamic 懒加载非首屏组件效果明显。
    6. 前端
      前端魔法师第 7 楼2026/06/08 22:03:48
      这个思路很巧妙,Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。一起学习。
    7. 潜水
      潜水的海獭第 8 楼2026/06/09 13:35:11
      我之前也遇到过类似问题,sitemap.xml 用 ISR 缓存(revalidate: 3600),发布新内容后 revalidatePath 刷新。希望少走弯路。
    8. 电子
      电子古董第 9 楼2026/06/13 21:04:30
      上周刚好踩了这个坑,JSON-LD 用 Article 类型必须包含 author 和 datePublished,否则 Rich Results 不显示。欢迎大家补充。
    9. 溪畔
      溪畔听雨第 10 楼2026/06/14 05:20:19
      结合我最近的项目经验:metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。
    10. 算法
      算法炼丹师第 11 楼2026/06/14 05:59:32
      我的结论恰恰相反:metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。实践出真知,建议动手试试。
    11. 吃瓜
      吃瓜群众第 12 楼2026/06/15 06:12:04
      有个细节值得注意:OG 图片 1200x630 是标准尺寸,用 next/og 动态生成效果最好。我也还在探索中。
    12. 社恐
      社恐患者第 13 楼2026/06/15 13:35:21
      说说我自己的经历:metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。感谢楼主的启发。
    13. CT
      Ctrl+C工程师第 14 楼2026/06/15 17:51:06
      JSON-LD 用 Article 类型必须包含 author 和 datePublished,否则 Rich Results 不显示。
    14. ST
      Stack Overflow copy手第 15 楼2026/06/17 12:13:40
      上周刚好踩了这个坑,PageSpeed 从 60 到 95 的关键:next/image + priority + 移除首屏 framer-motion。仅供参考,具体还是要看你的场景。
    15. 月下
      月下独酌第 16 楼2026/06/18 11:55:50
      这个问题我研究过一阵,metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。这只是个人经验,不一定通用。
    16. 奔跑
      奔跑的树懒第 17 楼2026/06/18 12:34:14
      这个方案我试过,JSON-LD 用 Article 类型必须包含 author 和 datePublished,否则 Rich Results 不显示。有疑问可以继续问。
    17. 栈溢
      栈溢出幸存者第 18 楼2026/06/18 21:57:57
      反对一下,我的测试结果不是这样:hreflang 自引用是必须的,我之前漏了导致多语言版本全没被索引。欢迎大家补充。
    18. 发呆
      发呆的仓鼠第 19 楼2026/06/19 00:23:38
      有个相关问题想请教:metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。希望少走弯路。
    19. 星辰
      星辰大海第 20 楼2026/06/19 14:59:11
      robots.txt 控制抓取,noindex 控制索引,两个不要搞混。
    20. 不将
      不将就第 21 楼2026/06/22 14:11:24
      我的结论恰恰相反:INP 替代 FID 后更严格了,用 next/dynamic 懒加载非首屏组件效果明显。效果因项目而异,建议实际测试。
    登录后可回复
    吃代

    吃代码的猫

    楼主个人主页

    帖子信息

    45 回复
    0 浏览
    0 赞
    0 收藏
    回复