Paint Timing API

The Paint Timing API provides perceived performance data that allows you to know exactly how long a user waits, after navigating to your page, before seeing any of the page content at all (which may not yet be the main content) first starting to appear. More specifically, it allows you to know exactly when, during page load, first paint and first contentful paint occur.

The Largest Contentful Paint API is a closely-related API that allows you to know exactly how long a user waits before they can see the main content of your page in the browser viewport — in contrast to just knowing when the user can see what may be a loading indicator or background image or other such initial/early-loading content (which is what the Paint Timing API provides).

Concepts and usage

The key principle underlying the Paint Timing API is that by having data to help you minimize the time that users have to wait before they can see the site's content start to appear, you can make the site feel more engaging and responsive (better performing) for your users.

See the perceived performance article for an introduction to the core concepts underlying both the Paint Timing API and the Largest Contentful Paint API.

Interfaces

PerformancePaintTiming

Extends the PerformanceEntry interface with the additional entryType value "paint" and the two additional name values "first-paint" and "first-contentful-paint".

Examples

See the PerformancePaintTiming article for an example of using the Paint Timing API.

Specifications

Specification
Paint Timing 1
# sec-PerformancePaintTiming

Browser compatibility

BCD tables only load in the browser

See also