v145 · Web APIs · Paint Timing Demo

Paint Timing Demo

A PerformanceObserver watches for LCP, element timing, and paint entries. Each card below shows all timing fields including the new paintTime and presentationTime added in Chrome 145.

Checking PerformanceObserver support…

observed element (LCP candidate)

Hero image placeholder (LCP candidate)

Chrome 145 Paint Timing

observed entries

Waiting for performance entries…

code

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    const paintTime = entry.paintTime ?? 'N/A';    // Chrome 145+ on LCP/element
    const presTime  = entry.presentationTime ?? 'N/A'; // Chrome 145+ on all types

    console.log({
      type: entry.entryType,
      startTime: entry.startTime.toFixed(1),
      paintTime: typeof paintTime === 'number' ? paintTime.toFixed(1) : paintTime,
      presentationTime: typeof presTime === 'number' ? presTime.toFixed(1) : presTime,
      delta_paint_to_present: typeof paintTime === 'number' && typeof presTime === 'number'
        ? (presTime - paintTime).toFixed(1) + 'ms' : 'N/A',
    });
  }
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'element', buffered: true });
observer.observe({ type: 'paint', buffered: true });

see also