Skip to content
weballin

weballin DIGIWIKI

First Contentful Paint

FCP is a performance metric that measures when the browser draws the first text or image to the screen. It relates to the initial point at which the user feels the blank screen has ended and is affected by server responsiveness and render-blocking resources.

weballin

FCP relates to the initial point at which the user feels the blank screen has ended. Even before the page is fully loaded, the perceived speed can be improved if the first content is displayed quickly.

If the server response is slow or there are many render-blocking resources, FCP becomes slow. If the blank screen persists for a long time, users may feel that the page is not working.

Check initial HTML, critical CSS, fonts, JavaScript bundle, and server response together. FCP is viewed together with LCP, but interpreted separately from the point in time when the main content appears.

Key takeaways

  • Measures when the first content is drawn on the screen.
  • It is related to the initial perceived speed.
  • FCP is affected by render-blocking resources and server response times.
  • It must be interpreted together with the LCP.

References

Frequently asked questions

How should FCP and LCP be interpreted together?

FCP is when the first content appears, and LCP is when the main content appears. Even if FCP is fast, if LCP is slow, users have to wait even after the first screen. The key indicator is LCP, but if FCP is late, LCP is also late.

What is the most effective way to improve FCP?

Improving initial HTML response speed (TTFB), removing render-blocking CSS and JS, applying critical CSS inline, and preloading web fonts are effective. The key is to include only the minimum resources required for the first screen in the initial loading.

Related terms