Paint Timing

ELI5 — The Vibe Check

Paint Timing is your browser's diary of when it drew stuff on screen. 'Dear diary, at 1.2 seconds I painted the first pixel. At 1.8 seconds I painted something useful.' Developers read this diary obsessively to shave off milliseconds.

Real Talk

The Paint Timing API provides timestamps for First Paint and First Contentful Paint via the PerformanceObserver interface. These metrics help developers measure and optimize the initial rendering experience from the user's perspective.

Show Me The Code

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
}).observe({ type: 'paint' });

When You'll Hear This

"Use the Paint Timing API to track FCP in your analytics" / "Paint timing entries show we're 500ms slower on mobile"