免费在 GitHub 公开中文介绍

largest-contentful-paint

测量页面主要内容出现所需的时间，定位图片、服务器响应和渲染过程中的瓶颈，并根据实测结果提出改进建议，帮助确定优化顺序。

原文查看原文说明

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize largest contentful paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

thedaviddias/Front-End-Checklist

AI 评分80分/ 100 查看安装方法

适用场景

调查主要内容显示延迟
检查主图的加载方式
根据测量结果确定改进优先级
审查影响首次显示的代码

中文介绍

功能

largest-contentful-paint检查LCP，即页面中最大内容显示所需的时间，协助改善加载缓慢的问题。它查看图片格式与尺寸、关键资源的预加载、服务器响应时间等，并根据实测发现的原因提出修改建议。代码审查时，会具体指出增加负担的文件、请求或渲染步骤。

适用场景

适合调查主图或主要内容迟迟未显示的页面。也适合结合显示速度的测量结果，判断应先改善图片传输还是服务器响应。改进目标是将LCP降至2.5秒以下。

使用示例

“用Lighthouse测量LCP，指出加载缓慢的原因和可考虑的修改。”
“检查主图的预加载与尺寸设置，找出延迟显示的环节。”

注意事项

提出修改建议前，需通过DevTools、Lighthouse、PageSpeed Insights或实际使用环境的数据确认原因。不能在未经测量的情况下，一律建议预加载图片或使用CDN。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确说明调查显示延迟，并先通过实测确认原因再提出改进建议。
步骤具体性步骤、输入输出和示例是否具体: B部分不足列出测量工具和2.5秒目标，但未提供各项改进措施的实施步骤。
安全性发送数据、删除文件、执行命令等是否有说明: A良好要求先实测再建议修改，没有删除文件或获取凭据的指示。
安装难易度所需工具和 API 密钥是否少且有说明: B部分不足指定了Lighthouse和PageSpeed Insights，但未提供配置或使用步骤。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md1.7 KB
references/rule.md4.1 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Optimize largest contentful paint

LCP is the most important Core Web Vital for perceived load speed—it measures when the main content becomes visible, directly impacting user perception and SEO rankings.

Quick Reference

LCP measures when the largest element renders—target under 2.5s
Use preload for hero images and critical resources
Optimize image formats and use responsive sizes
Reduce server response time (TTFB)

Check

Measure LCP using Lighthouse or PageSpeed Insights. Verify the largest visible element renders within 2.5 seconds.

Fix

Optimize LCP by preloading critical resources, optimizing images, using CDN, and reducing server response time.

Explain

Explain how LCP measures perceived load speed by tracking when the largest visible content element becomes visible.

Code Review

Review the routes, assets, and loading behavior that affect Optimize largest contentful paint. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/largest-contentful-paint

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能