前端页面加载性能指标之FCP

什么是FCP

首次内容渲染（First Contentful Paint，简称FCP）是一个以用户角度来衡量的性能指标，它衡量的是用户在网页加载过程中首次看到内容的时间点。这个指标之所以重要，是因为它代表了用户在屏幕上第一次看到网页内容的时刻，从而影响用户对网页加载速度的感知。一个快速的FCP可以增强用户的体验，让用户感知到页面正在加载内容。

FCP测量哪些元素

FCP首次看到的“内容”包括文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。

在上述页面加载的时间轴上，第二帧可以看到元素已经渲染到屏幕了，这个时间点就是FCP的触发时间。

FCP什么指标才是优秀的

为了提供良好的用户体验，网站应努力使首次内容绘制时间不超过 1.8 秒。为确保大多数用户都能达到此目标，建议将网页加载的第 75 个百分位作为阈值衡量，并按移动设备和桌面设备细分。

理想的 FCP 值为 1.8 秒或更短。超过 3.0 秒则需要改进。

如何测量FCP？

测量FCP可以使用多种工具，例如：

• Chrome DevTools Performance面板

该面板提供详细的加载瀑布图，能够直观地查看每个阶段的耗时。

• Lighthouse

这是一个开源自动化工具，内置于Chrome DevTools中，也可以作为命令行工具或Node.js库运行，用于审计网页性能，其中包括FCP的度量结果。

Lighthouse 显示 FCP（以秒为单位）：

• PageSpeed Insights

Google提供的在线工具，它基于Lighthouse的数据，分析网页性能并提出改进意见。

• web-vitals

Google官方的js库，可以在生产环境中收集真实用户数据，准确报告包括FCP在内的核心网页性能指标。

综合运用上述方法和工具，开发者可以有效地监控并优化网站的FCP，从而提升整体用户体验。

如何改进FCP

要降低FCP的值，通常可以使用以下方法来改进：

• 减少页面体积大小，dom结构不要太复杂，css样式内联
• 移除不需要的外部静态资源，移除无用css/js代码
• 使用async或者defer异步加载js资源，避免阻塞页面渲染
• 合理利用preload，preconnect属性来提前加载，提前建立连接
• 非当前页面渲染必须的功能代码可以使用延迟加载，按需加载
• 使用ssr，ssg技术在服务端生成完整的html结构
• 使用cdn，利用缓存提高资源加载速度，减少服务器响应时间
• 减少301/302重定向次数

如果你有更好的方案，欢迎评论区讨论。