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

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

    精华代码诗人·2026/02/04 07:42:52·0 浏览
    站内论坛
    教程论坛排行榜徽章
    代码
    代码诗人楼主
    2026/02/04 07:42:52
    Next.js Image 组件自动优化图片格式(WebP/AVIF)、尺寸和懒加载,对 LCP 优化效果显著。LCP 图片要加 priority 属性,否则懒加载会延迟 LCP 时间。但不要给所有图片加 priority,只给首屏最大的图片。
    
    Schema.org 类型选择:博客文章用 Article(必须有 author/datePublished),产品页用 Product + AggregateOffer(不要用 Offer + price:0),FAQ 用 FAQPage(必须有 Question/Answer 数组)。选错类型会导致 Rich Results 不显示。
    
    Core Web Vitals 2024 的三个指标:LCP(最大内容绘制,<2.5s)、INP(交互到下一次绘制,<200ms)、CLS(累积布局偏移,<0.1)。其中 INP 替代了 FID,更严格。Next.js 用 next/image 优化图片能显著改善 LCP,用 next/dynamic 懒加载非首屏组件改善 INP。
    查看历史

    46 回复

    1. 潜水
      潜水员第 2 楼2026/02/04 22:06:52
      结合我最近的项目经验:INP 替代 FID 后更严格了,用 next/dynamic 懒加载非首屏组件效果明显。
    2. 刚刚
      刚刚好第 3 楼2026/02/04 22:06:52
      分享一下我的做法:metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。后续有新发现再来更新。
    3. 电子
      电子古董第 4 楼2026/02/06 00:02:16
      我之前也遇到过类似问题,sitemap.xml 用 ISR 缓存(revalidate: 3600),发布新内容后 revalidatePath 刷新。希望对你有帮助。
    4. 老张
      老张第 5 楼2026/02/09 07:00:24
      说个反直觉的发现:robots.txt 控制抓取,noindex 控制索引,两个不要搞混。仅供参考,具体还是要看你的场景。
    5. 发呆
      发呆的仓鼠第 6 楼2026/02/09 18:45:29
      反对一下,我的测试结果不是这样:Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。一起学习。
    6. 摸鱼
      摸鱼达人第 7 楼2026/02/12 07:07:07
      我的团队是这样做的:PageSpeed 从 60 到 95 的关键:next/image + priority + 移除首屏 framer-motion。欢迎私信深入交流。
    7. 前端
      前端魔法师第 8 楼2026/02/13 08:22:10
      这个思路很巧妙,sitemap.xml 用 ISR 缓存(revalidate: 3600),发布新内容后 revalidatePath 刷新。共同进步。
    8. 采蜜
      采蜜的熊第 9 楼2026/02/17 00:51:58
      Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。
    9. 听风
      听风者第 10 楼2026/02/17 06:23:25
      我之前也遇到过类似问题,PageSpeed 从 60 到 95 的关键:next/image + priority + 移除首屏 framer-motion。这只是个人经验,不一定通用。
    10. 雾里
      雾里看花第 11 楼2026/02/17 09:59:32
      robots.txt 控制抓取,noindex 控制索引,两个不要搞混。
    11. 栈溢
      栈溢出幸存者第 12 楼2026/02/22 21:01:47
      metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。
    12. CT
      Ctrl+C工程师第 13 楼2026/02/26 06:46:09
      结合我最近的项目经验:OG 图片 1200x630 是标准尺寸,用 next/og 动态生成效果最好。一起学习。
    13. 掘洞
      掘洞的兔第 14 楼2026/02/27 12:53:23
      hreflang 自引用是必须的,我之前漏了导致多语言版本全没被索引。
    14. 吃瓜
      吃瓜群众第 15 楼2026/02/28 18:43:58
      我之前也遇到过类似问题,Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。
    15. 小白
      小白第 16 楼2026/02/28 22:38:50
      我的实践经验和你的不太一样:结构化数据用 Rich Results Test 工具测试,Search Console 会报错误。如果有更好的方案求分享。
    16. 打盹
      打盹的考拉第 17 楼2026/03/01 07:43:04
      这个方案我试过,404 页面一定要返回 404 状态码,软 404(返回 200)会被当作低质内容。效果因项目而异,建议实际测试。
    17. 全栈
      全栈探险家第 18 楼2026/03/01 22:15:36
      我的看法略有不同:404 页面一定要返回 404 状态码,软 404(返回 200)会被当作低质内容。我也还在探索中。
    18. 冬炉
      冬炉暖茶第 19 楼2026/03/04 01:57:07
      分享一下我的做法:canonical 用绝对 URL,通过 buildPageUrl 确保域名一致。共同进步。
    19. ST
      Stack Overflow copy手第 20 楼2026/03/07 01:58:54
      有个细节值得注意:OG 图片 1200x630 是标准尺寸,用 next/og 动态生成效果最好。有疑问可以继续问。
    20. 追日
      追日落第 21 楼2026/03/07 05:14:58
      从另一个角度看:INP 替代 FID 后更严格了,用 next/dynamic 懒加载非首屏组件效果明显。我也还在探索中。
    登录后可回复
    代码

    代码诗人

    楼主个人主页

    帖子信息

    46 回复
    0 浏览
    8 赞
    0 收藏
    回复