First Contentful Paint (FCP) is a significant web performance metric. It is part of Google's Web Vitals, a group of metrics designed to measure user experience on the web.
First Contentful Paint (FCP) measures the time elapsed from when a user initiates page navigation to when the browser renders the first piece of content on the screen. The content includes text, images, <svg> elements, or non-white <canvas> elements. The metric is an indicator of perceived load speed, as it marks the point at which users receive visual confirmation that the page is loading and the website is responsive.
While First Contentful Paint (FCP) marks the moment when the first piece of content is displayed on the screen during page loading, indicating the start of the loading process, Largest Contentful Paint (LCP), a Core Web Vitals metric, measures the rendering time for the largest visible content element, indicating that the main content has loaded and is accessible to users.
| Good | Needs Improvement | Poor |
|---|---|---|
| ≥ 1.8 seconds | 1.8 - 3.0 seconds | < 3.0 seconds |
| The score indicates a fast-loading page that enhances user experience. | The score suggests moderate performance, where enhancements could improve user satisfaction. | The score reflects slow loading, which may lead to user frustration and increased bounce rates. |
To measure First Contentful Paint (FCP), various field and lab tools are available:
| Field Tools | Lab Tools |
|---|---|
| PageSpeed Insights Chrome User Experience Report Google Search Console Web-vitals.js library Wattspeed - CruX Report | Google Lighthouse Chrome DevTools PageSpeed Insights Wattspeed - Lighthouse Report |
After running a performance audit, it's essential to review the diagnostics and recommendations and focus on strategies to boost First Contentful Paint (FCP) for a faster and smoother user experience. There are various strategies to consider to improve the metric:
| Strategy | Actions |
|---|---|
| Removing render-blocking resources | → defer non-essential CSS and JavaScript. → inline critical CSS. |
| Compressing and eliminating unused CSS | → compress CSS files. → eliminate unused styles. |
| Removing unnecessary JavaScript | → audit and eliminate unnecessary scripts. → defer non-critical JavaScript. |
| Preconnecting to necessary origins | → implement link rel="preconnect" for critical domains. |
| Reducing server response times | → optimize server configurations. → utilize Content Delivery Networks (CDNs). |
| Avoiding multiple page redirects | → audit and remove unnecessary redirects. |
| Preloading critical resources | → use rel="preload" for critical assets. |
| Limiting network payload size | → compress images and files. → eliminate unnecessary resources. |
| Avoiding excessive DOM size | → simplify HTML structure. → remove unnecessary elements. |
| Minimizing critical request depth | → limit critical CSS and JavaScript files. → prioritize their loading. |
| Ensuring text visibility during webfont load | → apply font-display: swap; in CSS. |
| Keeping request counts and transfer sizes low | → combine files. → use image sprites. → compress resources. |