FCP (First Contentful Paint)

FCP (First Contentful Paint) marks the first moment the browser paints any content from the DOM: text, an image, an SVG or a non-white canvas. It answers the visitor's first question, "is something happening?"

Why it matters

A blank screen makes people doubt that the page works. FCP is not a Core Web Vital, but it is a diagnostic companion to LCP and appears in Lighthouse. Google's guidance treats 1.8 seconds or less as good.

FCP is held back by what happens before paint: DNS, connection setup, server response (TTFB), and any render-blocking CSS or synchronous JavaScript in the head. The browser cannot paint until it has the CSS it needs.

Example

TTFB            600 ms
CSS download    +350 ms (render-blocking)
First paint of heading text -> FCP = 950 ms

Inlining the small amount of critical CSS and loading the rest asynchronously removes the 350 ms wait.

Common mistakes

• Treating FCP as "page loaded". The main content may arrive much later.
• Loading a large CSS framework synchronously in the head.
• Hiding all text until a web font arrives, which delays the first text paint.

Related

• LCP
• Render-blocking resource
• Critical CSS
• TTFB

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.