CODEWITHSUNDEEP
node.jsgoogle-chromegoogle-chrome-devtoolspuppeteercore-web-vitals
Ali Habibzadeh
Ali Habibzadeh

Reputation: 11568

Is it possible to derive Web Vitals from chrome trace events data?

I am hoping to get some advice with regards to calculating core web vitals without interacting with PerformanceObserver api but instead to use Chrome trace events.

Since the puppeteer operation is done at scale I prefer to not to interact with the page using page.evaluate but instead calculate the metrics if possible from the data I get using:

await page.tracing.start();
await page.goto(url, { waitUntil: "networkidle0" });
writeFile("dump.json", (await page.tracing.stop()).toString()); -> Can I get web vitals/perf metrics here?

I can see in the output of the trace, events like this:

{
  "args": {
    "data": {
      "candidateIndex": 1,
      "isMainFrame": true,
      "navigationId": "927C29B0D3BD3783D85D54D161903DEF",
      "nodeId": 92,
      "size": 145574,
      "type": "image"
    },
    "frame": "8DCDB2C2311B3C524C094C8C4555E0FB"
  },
  "cat": "loading,rail,devtools.timeline",
  "name": "largestContentfulPaint::Candidate",
  "ph": "I",
  "pid": 94113,
  "s": "t",
  "tid": 775,
  "ts": 437767356341
}

Would be good to know if I am barking up the wrong tree here or I can extract/calculate perf metrics using only the traceEvents data. I am assuming this should be possible since the dump has all the events that took place during page load and the devtools seems to place them metrics on the timeline too.

Many Thanks.

enter image description here

Upvotes: 3

Views: 508

Answers (1)

Rick Viscomi
Rick Viscomi

Reputation: 8872

The PerformanceTimeline domain used by the Chrome DevTools protocol may contain the kind of information you're looking for, similar to your screenshot.

The FCP, LCP, and CLS vitals are also recorded in the trace data and accessible via Puppeteer, but there are some caveats to consider:

  • The correct trace categories should be recorded. Refer to the categories used by DevTools.
  • The render and frame IDs should be used to disambiguate records between the top-level frame and any iframes. You can get these IDs from the TracingStartedInBrowser event.

Upvotes: 3

Related Questions