CODEWITHSUNDEEP
javascriptweb-performance
Razor
Razor

Reputation: 29638

How to get time of page's first paint

While it is easy enough to get firstPaint times from dev tools, is there a way to get the timing from JS?

Upvotes: 1

Views: 3561

Answers (3)

Dhaval Lila
Dhaval Lila

Reputation: 425

if(typeof(PerformanceObserver)!=='undefined'){ //if browser is supporting
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
     console.log(entry.entryType);
     console.log(entry.startTime);
     console.log(entry.duration);
   }
  });
  observer.observe({entryTypes: ['paint']});
}


this will help you just paste this code in starting of your js app before everything else.

Upvotes: 1

zizzamia
zizzamia

Reputation: 241

Recently new browser APIs like PerformanceObserver and PerformancePaintTiming have made it easier to retrieve First Contentful Paint (FCP) by Javascript.

I made a JavaScript library called Perfume.js which works with few lines of code

const perfume = new Perfume({
  firstContentfulPaint: true
});
// ⚡️ Perfume.js: First Contentful Paint 2029.00 ms

I realize you asked about First Paint (FP) but would suggest using First Contentful Paint (FCP) instead.

The primary difference between the two metrics is FP marks the point when the browser renders anything that is visually different from what was on the screen prior to navigation. By contrast, FCP is the point when the browser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a canvas element.

Upvotes: 2

Razor
Razor

Reputation: 29638

Yes, this is part of the paint timing API.

You probably want the timing for first-contentful-paint, which you can get using:

const paintTimings = performance.getEntriesByType('paint');
const fmp = paintTimings.find(({ name }) => name === "first-contentful-paint");
enter code here
console.log(`First contentful paint at ${fmp.startTime}ms`);

Upvotes: 6

Related Questions