First Contentful Paint (FCP)

The page starts displaying content within 1.8 seconds.

On this page

    Impact

    ScanGov impact ratings

    About

    First Contentful Paint (FCP) measures how quickly a webpage shows any content after a user starts to load it. It checks the time from when the user begins to navigate to the page until any part of the page's content, like text or images, appears on the screen. A fast FCP reassures users that the page is loading. For a good user experience, aim for an FCP of 1.8 seconds or less.

    Risks

    Users see blank screen and think site is broken.

    Why it's important

    Measures how quickly important content appears, improving user experience by reducing wait time when loading a page.

    User stories

    As a user visiting the website, I want the first visible content to load quickly so that I know the site is responding and I don't leave out of frustration.

    Code

    Inline critical CSS and defer non-critical styles:

    <style>/* critical above-the-fold styles */
body { font-family: sans-serif; }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

    Error

    ScanGov messaging when a site fails a standard:

    Page didn't display within 1.8 seconds.

    Guidance

    Demo

    Indicators

    On this page