First Contentful Paint (FCP)

First Contentful Paint (FCP) measures how long it takes a page to display the first piece of DOM-rendered content, such as text, an image, or a non-white canvas element. It is a user-perceived loading metric that helps reveal how quickly a page begins to look useful.

FCP starts when navigation begins and records the first time the browser paints qualifying content to the screen. This can include text, images, SVG elements, or non-white canvas content that is rendered from the page's DOM.

FCP is different from simply measuring when HTML arrives. The browser must parse enough of the response, build the relevant rendering structures, and actually paint qualifying content before FCP occurs. Network delays, CSS, JavaScript, and rendering work can therefore affect the measurement.

A useful FCP measurement is generally associated with a value of 1.8 seconds or less for a good user experience. Values above 3.0 seconds indicate a poor result, with the range between them requiring improvement according to common web-performance guidance.

Frontend engineers can improve FCP by reducing server response time, eliminating render-blocking resources, minimizing unnecessary CSS and JavaScript, and ensuring important content can be discovered and rendered quickly. FCP should be considered alongside other performance metrics rather than treated as a complete description of page speed.

Key points

• FCP measures the first qualifying content paint after navigation starts.
• Qualifying content can include text, images, SVG, and non-white canvas content.
• FCP is about an actual browser paint, not merely receiving HTML.
• Render-blocking resources and slow server responses can delay FCP.
• A commonly used target is FCP at or below 1.8 seconds.

Interview questions

What are common causes of a slow FCP?

A slow server response can postpone the point at which the browser receives content to render. Render-blocking CSS and JavaScript can also prevent the browser from reaching the first useful paint quickly. Large resources, excessive main-thread work, and inefficient page structure can add further delay.

What is First Contentful Paint?

FCP measures the time from the start of navigation until the browser first paints qualifying page content. Examples include text, images, SVG, and non-white canvas content. It is useful because it indicates when users first see meaningful output rather than waiting on a completely loaded page.

What kinds of content can trigger FCP?

FCP can be triggered by qualifying text, images, SVG elements, or non-white canvas content rendered from the page. The important distinction is that the browser must actually paint qualifying content. A network response arriving by itself does not constitute FCP.

How would you improve FCP on a frontend application?

I would first identify whether the delay comes from the server, network, blocking resources, or main-thread work. I would reduce server response time, remove or defer unnecessary render-blocking resources, and minimize the amount of CSS and JavaScript needed before initial rendering. I would then verify the change using field or lab performance measurements rather than assuming the optimization helped.

Why shouldn't a team optimize FCP in isolation?

FCP describes when the first qualifying content appears, but that content may not be the most important content on the page. A page can achieve an early FCP while its primary content remains slow to render. Engineers should therefore consider FCP alongside metrics such as LCP and other responsiveness measures. The right optimization depends on the user's actual experience and the bottleneck identified by measurement.