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".
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.
- Minimize the number of render-blocking external stylesheets and scripts upon which the page depends. See Render-Blocking CSS and Loading Third-Party JavaScript.
- Use HTTP Caching to speed up repeat visits.
- Minify and compress text-based assets to speed up their download time. See Optimizing Encoding and Transfer Size of Text-Based Assets.
- Optimize JavaScript bootup and reduce JavaScript payloads with tree shaking or code splitting. The goal is to do less JavaScript work on page load.
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: