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 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"