Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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) measures the time from navigation to the time 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?