First Contentful Paint【FCP】

First Contentful Paint

• First Contentful Paint (FCP)是 Lighthouse 报告的性能部分追踪的六个指标之一。每个指标捕获页面加载速度的某些方面。
• Lighthouse 以秒为单位显示 FCP
  

What FCP measures

• 一直以来，对开发者来说衡量页面加载中主要内容加载、显示的速度都比较困难。由于Load和DOMContentLoaded跟屏幕上用户所见内容并无必然的关系，所以不够好（它们不是面向用户的指标）。FCP（First Contentful Paint）是基于用户维度的指标，但只关注页面加载的最初阶段，如果页面上存在闪现或者loading组件，也无法反映出用户关注的主要内容是何时加载的。后来我们推荐使用FMP和SI（LightHouse6个指标之一），实际上它们也是复杂的、模糊的，甚至是错误的，并不能准确识别页面主要内容的加载时机。简单为王，研究后发现：

页面加载阶段最重要的内容往往是页面渲染区域最大的那部分内容

---

LCP 定义和标准

• LCP反映的是从页面开始加载到页面视口上最大的图片或者文本块渲染的时间
• LCP < 2.5s意味着得分是GOOD
  

Contentful 元素

• <img>、svg 中的 <image>、<video>、含有用url()设置背景图的元素、含文本节点或者内联子元素的块级元素

元素大小如何衡量

• LCP元素的大小是指视口上可见元素的大小（不包含超过视口元素的大小、发生剪裁的元素、不可见的元素）
• 对于改变了固有大小的图片来说，大小要么是图片可见的大小、要么是固有的大小
  缩小的图片的大小只计算其显示的大小，而放大的图片的大小，只计算其固有的大小
  对于文本元素来说，只会计算其文本节点的大小
  对于所有的元素来说，都不将css中设置的margin、padding和border计算在内

LCP 中元素的替换

• Web页面加载是分布进行，因此，LC 中的元素会发生替换
• 浏览器分发了一个类型为largest-contentful-paint的PerformanceEntry，用于当浏览器绘制了第一帧时识别LC元素。之后，当渲染后续的帧时，只要LC元素发生变化，浏览器又会分发其它的PerformanceEntry
• LC元素只能是已经渲染了的可见元素，因此，刚开始可能会有其他的小一点的元素被检测为LC元素，但只要更大的元素渲染完成，就会通过PerformanceEntry对象更新成为最新的
• 当用户与页面进行交互以后，浏览器就停止分发新的Entry
• 为了降低计算和分发PerformanceEntry带来的性能损耗，元素大小或者位置的变化不会产生新的LC候选元素，只会考虑视口上元素的初始大小和位置

影响 LCP 的因素

• 请求阶段服务端响应缓慢
• 渲染阶段阻塞的JS和CSS
• 资源加载时间
• 客户端渲染