Widely available Supported across all major browsers. Safe to use in production.

Paint timing

The PerformancePaintTiming interface provides timing information about "paint" (also called "render") operations during web page construction. "Paint" refers to conversion of the render tree to on-screen pixels.

There are two key paint moments this API provides:

First Paint (FP): Time when anything is rendered. Note that the marking of the first paint is optional, not all user agents report it.

First Contentful Paint (FCP): Time when the first bit of DOM text or image content is rendered.

A third key paint moment is provided by the LargestContentfulPaint API:

Largest Contentful Paint (LCP): Render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load.

The data this API provides helps you minimize the time that users have to wait before they can see the site's content start to appear. Decreasing the time until these key paint moments make sites feel more responsive, performant, and engaging for your users.

Like other Performance APIs, this API extends PerformanceEntry.

PerformanceEntry PerformancePaintTiming

Observers and Performance

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
PerformancePaintTiming
60
79
84
14.1
60
14.5
first-contentful-paint

First Contentful Paint (FCP) is when the browser renders the first content from the DOM, providing feedback to the user that the page is loading. Completing the first contentful paint answers the question "Is it happening?"
60
79
84
14.1
60
14.5
first-paint

First Paint is the time between navigation and when the browser first renders pixels to the screen, rendering anything that is visually different from the default background color of the body. It is the first key moment in page load and will answer the question "Has the browser started to render the page?"
60
79
60
toJSON

The toJSON() method of the PerformancePaintTiming interface is a Serialization; it returns a JSON representation of the PerformancePaintTiming object.
60
79
84
14.1
60
14.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Use cases

  • Using Paint timing

    The PerformancePaintTiming interface provides timing information about "paint" (also called "render") operations during web page construction.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links