Optimize largest contentful paint
SkillMediaThis is an agent skill for auditing largest contentful paint, the Core Web Vital that measures when the largest visible element on a page renders. It guides an agent through measuring load speed with Lighthouse, PageSpeed Insights, or field data, verifying the actual bottleneck before recommending changes, and reviewing routes, assets, and loading behavior for unnecessary network, CPU, or layout cost.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a page or site whose load performance you want to audit.
Then ask your AI: use the Optimize largest contentful paint skill
What your AI can do with it
- Measure LCP using Lighthouse or PageSpeed Insights and check it renders under 2.5 seconds
- Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending ch
- Review routes, assets, and loading behavior that affect LCP and flag exact files or reques
- Recommend fixes such as preloading hero images, optimizing image formats, using a CDN, and
- Explain how LCP tracks perceived load speed via the largest visible content element
Getting started
- Have a page or site whose load performance you want to audit.
- Add the skill to your agent so it can follow the largest-contentful-paint workflow.
- Ask the agent to audit slow page loads, heavy assets, or rendering delays on the target page.
- Provide access to measurement data from Lighthouse, PageSpeed Insights, DevTools, or field data when available.
- Review the agent's findings, including flagged files, requests, or rendering steps and the measurement method used.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/largest-contentful-paint/SKILL.md and read by ahel’s review.
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/en/rules/performance/largest-contentful-paint
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does LCP measure?
- LCP measures when the largest visible content element renders, which reflects perceived load speed. The target is under 2.5 seconds.
- How long does an audit take?
- The skill lists an estimated time of 25 minutes and is rated intermediate difficulty with critical priority.
Advanced
- Item type
- skill
- Key
largest-contentful-paint- Source
- github.com/thedaviddias/front-end-checklist