FCP (First Contentful Paint) is one of the 6 metrics that influence your Core Web Vitals score, as reported by tools like Google PageSpeed Insights. In this guide, you will discover what FCP is, how to measure it and how to improve it.
What Is First Contentful Paint (FCP)?
The First Contentful Paint (FCP) metric measures the time from when the page starts loading until the first piece of page content becomes visible on screen. For this metric, “content” can refer to text, images (including background images) or SVGs. Not to be confused with LCP — Largest Contentful Paint — which measures the largest content element to load on the page.
How Is the FCP Score Calculated?
The good FCP value to aim for on desktop is 940ms or less; an average score (needs improvement) falls between 940ms and 1.6s; a poor score is above 1.6s.
For mobile, a score below 1.8s is considered good, above 3s is considered poor, and anything in between needs improvement.
FCP contributes 10 points out of 100 to the Core Web Vitals (CWV) score. For comparison, LCP accounts for 25% of the score — 25 points out of 100.
How to Measure FCP?
FCP can be measured in the lab or in the field. Ideally, you should measure it in the field. To see your score and the opportunities to improve it, you can use one or more of the following tools:
Field tools:
- Google Search Console
- Google PageSpeed Insights (field scores available when data is sufficient)
- web-vitals JavaScript library
Lab tools:
- Lighthouse / Chrome DevTools
- Google PageSpeed Insights
- webpagetest.org
How to Improve Your FCP Score?
FCP is a metric that improves in the same way as LCP. Since I have already covered the topic of LCP improvements step by step in a dedicated article, I strongly invite you to read that guide.
That said, here is a list of possible improvements to boost your FCP score:
- Eliminate render-blocking resources
- Minify CSS and JavaScript
- Remove unused CSS and JavaScript
- Preconnect to required origins
- Reduce server response times (TTFB)
- Avoid multiple page redirects
- Preload key requests
- Avoid enormous network payloads
- Serve static assets with an efficient cache policy
- Avoid chaining critical requests
- Ensure text remains visible during web font load