First Contentful Paint Test

First Contentful Paint (FCP) measures the time from when your page starts loading to when any part of its content is rendered on the screen, the first text, image, or SVG that appears. FCP is the user's first visual confirmation that the page is loading, and faster values are strongly correlated with lower bounce rates and better Core Web Vitals scores.

Why FCP matters

Users abandon pages that show nothing for too long. Research consistently finds that bounce rates climb sharply when FCP exceeds two or three seconds, even on connections where the rest of the page eventually loads quickly. Google recommends keeping FCP under 1.8 seconds at the 75th percentile of users, which is the threshold for a "good" experience.

FCP depends on TTFB plus the time the browser spends rendering the first piece of visible content once the response arrives. Improving it therefore requires either making the server respond faster (which TTFB optimization addresses) or removing whatever is blocking the browser from rendering once the response arrives. Render-blocking CSS and JavaScript are the most common culprits, followed by web fonts that delay text display and heavy hero images that delay the first useful paint.

Common causes of slow FCP

• Slow TTFB: the underlying server, redirect, or hosting issue must be addressed first.
• Render-blocking CSS: inline the critical CSS for the first viewport, load the full stylesheet asynchronously.
• Render-blocking JavaScript in the head: add defer or move scripts to the end of the body.
• Web fonts delaying text rendering: add font-display: swap so a fallback font is shown immediately while the custom font loads.
• Heavy hero image without prioritization: add fetchpriority="high" to the hero image and preload it in the head.

This test measures your page's FCP. The fix guide below covers improving TTFB, eliminating render-blocking resources, optimizing web font loading, and prioritizing the assets needed for the first paint.