FCP 和 LCP 有什么区别？为什么 FCP 很快，LCP 却很慢？

FCP 是页面第一次画出任何内容的时间，哪怕只是一个标题、一个 loading 图标；LCP 是视口里最大的那块内容画出来的时间，通常是首屏大图或者主标题段落。FCP 回答的是「页面有反应了吗」，LCP 回答的是「用户要看的主要内容出来了吗」。FCP 快、LCP 慢，说明页面框架很早就出来了，但主角来得晚，问题一般出在大图发现晚、下载慢，或者主内容要等 JS 请求完数据才渲染。

速记要点

• FCP：第一次画出任何文字或图片
• LCP：视口内最大的图片或文本块画出
• 达标线：FCP 1.8s，LCP 2.5s 以内
• LCP 元素多数是首屏大图
• 差距大通常是：图发现晚、下载慢、等接口

*1. 两个指标对比