SEO

FCP

Also called First Contentful Paint

The point at which a loading page first shows the visitor something real, rather than a blank screen.

Quick facts: FCP

Category
SEO
Also called
First Contentful Paint
Level
Intermediate
Affects
Perceived speed, abandonment on slow connections, Lighthouse score, LCP
Where to see it
PageSpeed Insights, Lighthouse, Chrome DevTools, CrUX field data
In this article4
  1. What FCP measures
  2. Why FCP matters
  3. Where FCP goes wrong
  4. How to act on it

What FCP measures

First Contentful Paint is the time from a visitor starting navigation to the browser drawing the first piece of real content: a line of text, an image, a graphic, anything that is not blank background. It marks the end of the white screen.

The word “contentful” is doing the work. A background colour does not count, and neither does a page that has technically loaded but shows nothing. The metric exists because the gap between requesting a page and seeing evidence of it is where people give up, and it is the part of loading a visitor can actually feel.

Why FCP matters

It is not one of the Core Web Vitals, so it carries no weight in ranking on its own. It is a diagnostic, and a good one, because it splits the loading problem in two. Everything before the first paint is server and delivery: response time, redirects, files blocking the head. Everything after it belongs to the main content, images and layout.

That split saves days of work. If Largest Contentful Paint is poor and FCP is poor as well, there is no point optimising a hero image, because the page is not painting anything at all yet. If FCP is fine and LCP is slow, delivery is working and the main content is the problem.

Where FCP goes wrong

The usual cause sits in the head of the document. A stylesheet must be downloaded and parsed before the browser will paint, and an ordinary script in the head stops parsing while it fetches. Add a few font files, a tag loaded the wrong way and a theme’s stacked styles, and the first paint waits for all of it. This is the render-blocking resource problem in its most visible form.

The other trap is treating a good FCP as a good page. A site that paints a header quickly and then shows a spinner where the article should be has an excellent score and a poor experience. Read it next to what comes after it, never alone.

How to act on it

Fix the server response first, since the paint cannot happen earlier than the answer arrives. Then reduce what the browser must process before it is allowed to draw: inline the small amount of styling the top of the page needs, load the rest without blocking, move scripts out of the critical path, and let text render in a fallback face rather than staying invisible while a web font downloads.

Test on the hardware and connection your visitors actually use. Much of Nepal browses on mid-range Android phones over mobile data, where parsing a heavy stylesheet costs far more than it does on a desktop. Where the fixes sit inside a theme or page builder you did not write, that is page speed optimisation work rather than something a content edit will solve.

Do and do not

Do

  • Cut render-blocking styles and scripts from the head
  • Show text in a fallback font while the real one loads
  • Check it on a mid-range Android phone, not a laptop

Do not

  • Treat a fast FCP as proof the page is usable
  • Hide content behind a script that must run first
  • Chase FCP while the server response stays slow

Questions people ask about this

Is First Contentful Paint a ranking factor?

Not directly. Google assesses the Core Web Vitals, and this is not one of them. It still matters, because it constrains the metrics that are assessed and because it describes the wait a visitor feels before anything appears at all. Improving it almost always improves the graded metrics too, which is the real reason to watch it.

What is the difference between FCP and LCP?

First Contentful Paint is when the browser draws anything at all. Largest Contentful Paint is when it draws the biggest element in the visible area, usually the hero image or the main heading. The first tells you the page has started; the second tells you the thing a visitor came for is finally on screen.

Why is my First Contentful Paint slow on mobile but fine on desktop?

Phones have less processing power and usually a slower connection, so the same stylesheets and scripts take longer to fetch and parse before the browser is allowed to paint. A desktop hides that cost completely. Judge the metric on a mid-range phone over a mobile connection, because that is what most visitors are holding.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.