The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

First Contentful Paint

Overview

Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as "fast" or "slow".

--- Paint Timing spec

First Contentful Paint (FCP) marks the point, immediately after navigation, when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.

Recommendations

To speed up First Contentful Paint, speed up the download time of resources or do less work that blocks the browser from rendering DOM content.

Tracking FCP in the real world

To measure when FCP actually occurs on your users' devices, see Tracking FP/FCP. The code snippet describes how to programmatically access FCP data and submit it to Google Analytics.

See Assessing Loading Performance in Real Life with Navigation and Resource Timing for more on collecting real-user metrics.

More information

See First Contentful Paint for an exact definition of what types of content trigger the First Contentful Paint milestone.

Sources:

Feedback

Was this page helpful?