Contentful Paint Signal Test
The Contentful Paint Test combines First Contentful Paint (when the first pixel appears) and Largest Contentful Paint (when the largest hero element appears) into a single waterfall view, so you can see exactly how the…
- Results in seconds
- Pass / fail + fix guidance
- No account required
The Contentful Paint Test combines First Contentful Paint (when the first pixel appears) and Largest Contentful Paint (when the largest hero element appears) into a single waterfall view, so you can see exactly how the page renders to the user from the first millisecond. Most pages have a healthy FCP but a poor LCP — meaning the page starts loading visually but the hero element arrives late. This combined view shows the gap and tells you which resource is responsible.
What This Tool Checks
- First Contentful Paint timestamp and trigger element
- Largest Contentful Paint timestamp and identified element
- Gap between FCP and LCP (delay diagnostic)
- Render-blocking resources between FCP and LCP
- Image / font loading order
- CSS that delays the LCP element specifically
Why It Matters for SEO
FCP and LCP together describe the user's perceived load experience. A fast FCP with a slow LCP means the page starts loading but the hero takes too long — frustrating users and hurting conversion. A slow FCP and slow LCP usually point to a render-blocking resource problem. Looking at both metrics together is the fastest way to diagnose page-load issues; looking at either in isolation often misses the real cause.
How to Fix It
Identify the LCP element from this report. Preload it. Convert it to WebP / AVIF if it is an image. Inline the CSS needed to render it. Defer everything else. The FCP-to-LCP gap should compress to under 1 second on a fast connection.
How It Works
Headless Chrome captures both FCP and LCP from the Performance Timeline, identifies the elements that triggered each, and walks the network waterfall to find the resources that delayed each metric. The combined report shows the timing gap and the specific fixes for closing it.
Common Mistakes to Avoid
- Optimising FCP and ignoring the LCP gap
- Treating FCP and LCP as independent (they share the critical render path)
- Forgetting that the LCP element can change between deploys
- Lazy-loading the LCP image because it sits "below the fold" on desktop but above on mobile
- Not preloading hero fonts that delay text-based LCP
Quick Checklist
- FCP under 1.8 s and LCP under 2.5 s
- Gap between FCP and LCP under 1 second
- LCP element preloaded
- Critical CSS inlined
- Hero font and image use fetchpriority="high"
Put your whole site on autopilot — SEO and AI search
PositionMySite monitors every signal on this page across your entire website 24/7 — plus keyword rankings, competitor moves and AI-search readiness (llms.txt, schema, ChatGPT & Gemini visibility). When something breaks, you know before Google does.
Every feature unlocked · No commitment · Cancel anytimeFrequently Asked Questions
FCP is when the first pixel of content appears. LCP is when the largest above-the-fold element appears. FCP signals "loading", LCP signals "loaded". Both matter; LCP carries more weight.
They can be when a single hero image is the largest element and renders as the first paint. More commonly, FCP fires earlier on small text, then LCP fires later when the hero arrives.
Usually because the hero image or hero font loads later than the first text. Preload the LCP element and remove anything blocking it from the critical render path.
LCP is a direct ranking signal under Core Web Vitals. FCP is a strong correlated metric reported in Lighthouse and the page-experience report — improving FCP usually improves LCP too.
Run this tool, or open DevTools Performance panel and look for the LCP marker. The element identified is the one to optimise first.