自从 Lighthouse 推出以来，与页面速度相关的新参数就出现了。这些参数中最重要的一个就是首次内容绘制（FCP）。 在 Lighthouse 版本 10 中，自 2024 年 10 月起生效，FCP 对总体评分的影响为 XNUMX%.
要采用并理解 FCP 作为衡量指标，首先必须研究其背后的心理学。该概念类似于 电梯内安装的镜子:
简单总结一下：1900 世纪上半叶，高层建筑中电梯的使用率大幅增加，但电梯系统与今天相比还很原始。因此，出现了在电梯中安装镜子的想法，以使乘坐电梯的时间感觉更短。
回到我们的主题：在尝试访问页面时，让您在加载时间内感知到的等待点是 FCP。 首次内容绘制 (First Contentful Paint) 的定义是向用户显示第一个文本、图像、非白色画布等所需的时间.FCP的单位是秒。
在 Lighthouse 中，FCP 的颜色尺度确定如下：
- 0-2秒： 绿色 => 快速
- 2-4秒： 橙色 => 需要改进
- 4 秒以上： 红色 => 缓慢
根据 HTTP Archive 数据，可以考虑的网站数量 快 25%，现有网站中有 50% 被归类为速度慢。
怎样才能改善FCP？
减少服务器响应时间
一般来说，这可以解释为服务器和软件的服务器端需要改进。列出对服务器响应时间产生负面影响的问题：
- 服务器的共享、配置（即服务器设置）和服务器资源可能是问题所在。您的服务器容量应根据您的流量增加。在某些情况下，编写不当的数据库查询和高度复杂的软件组件会严重影响服务器响应时间。
- 不使用 CDN（内容分发网络）可能会导致访问内容延迟，从而影响 FCP随着内容大小的增加，例如，如果尝试在没有 CDN 的情况下调用大型动画 GIF 或视频，并且主服务器位于不同的大陆，则可能需要考虑 CDN 解决方案来解决 FCP。
- 不使用适当且一致的缓存策略来提供静态内容可能会导致过载 随着访客数量的增加，您的服务器将不必要地。例如，如果您在每个页面上加载徽标时没有将其保存在长期缓存中，则会不必要地损害服务器的响应时间。
- 不必要的页面重定向 访问该页面可能会不必要地影响您的 FCP。
例如，过去曾有过这样的设置：当用户想要进入某个网站时，会有一个 HTTP 到 HTTPS 的重定向，如果是移动网站，则会有一个 HTTPS 到移动网站的重定向（例如，https://www 到 https://m），如果该页面被删除并使用 301 重定向到其他地方，感觉就像用户在税务局里被从一个办公桌转到另一个办公桌一样。这是一个极端的例子，以便于理解，但如果您使用 301 重定向将页面重定向到另一个 URL，然后使用 301 将该页面重定向到另一个页面，您可能正在做同样不合逻辑的设置。
- 如果你 不要使用预连接或 DNS 预取 前缀在连接到第三方服务时，并连接到许多第三方服务，你并没有做任何对 FCP 有益的事情。
减少渲染阻塞资源
我必须承认，要将这一问题单独列成一项，可能需要几个月的时间才能解决。
为了实现这一点，有一个解决方法，即所有 JS、CSS 和类似的会阻塞页面渲染的资源在页面创建后加载，但网站最初可见的部分会在网站加载时首先加载。但是要做到这一点，需要检查所有 JS、CSS 和类似资源，并分离最耗时的流程。此外，尽可能少使用第三方服务有助于优化 FCP。
