用途
该技能用于审计与优化首次内容绘制(First Contentful Paint,FCP)。FCP 是页面开始加载时出现的第一个视觉信号——即首次绘制出文本或图像的时间点。较快的 FCP 能让用户确信站点正在响应,从而减少感知等待时间并降低跳出率。
主要能力
- 测量 FCP:使用 Lighthouse 或 PageSpeed Insights 测量 FCP,并验证首个内容是否在 1.8 秒内出现。
- 定位瓶颈:在 DevTools 中确认实际瓶颈,识别导致渲染延迟的资源与请求。
- 优化建议:消除阻塞渲染的 CSS 与 JavaScript;为折叠上方内容内联关键 CSS;对第三方源使用 preconnect;减少服务器响应时间。
- 代码审查:审查影响 FCP 的路由、资源与加载行为,标记出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤,并描述用于确认问题的测量方法。
- 解释说明:解释 FCP 如何测量首个文本或图像被绘制的时间,以表明页面加载已经开始。
使用方式
在审计页面加载缓慢、资源过重或渲染延迟且与 FCP 优化相关的问题时使用该技能。可通过 Lighthouse 或 PageSpeed Insights 进行测量,并在 DevTools 中验证瓶颈。完整的实现细节、代码示例与框架相关指导见 references/rule.md。规则页面:https://frontendchecklist.io/en/rules/performance/first-contentful-paint
适用场景
- 页面加载缓慢、资源过重或存在渲染延迟的审计。
- 需要验证 FCP 是否达到 1.8 秒以内目标的性能检查。
- 代码审查中需要识别影响 FCP 的具体文件、请求或渲染步骤。
限制
资料未提供该技能的具体安装命令、支持的框架版本、收费方式或价格信息,暂未提供。