First paint of page

[dragonTour]

We want to collect the first paint of page,but how to calculate it

[devcorpio]

Hi @741439599,

Thanks for using the RUM agent!

The agent calculates First Contentful Paint automatically so you don't need to do it manually. Just make sure that you are not disabling the instrumentation related to page-load

The agent will attach FCP to the transaction created while the page is loading. This transaction is commonly known as "page-load transaction". You can see all the data attached via APM UI.

You also can look for its info in Kibana discover:

Apart from that, on the User Experience page you can see all key user experience metrics, too.

Thanks, Alberto

[dragonTour]

Thanks，I add below code in captureObserverEntries function of metrics.js

const fpEntry = list.getEntriesByName(FIRST_PAINT)[0]
  if (fpEntry) {
    const fp = parseInt(
      unloadDiff >= 0 ? fpEntry.startTime - unloadDiff : fpEntry.startTime
    )
    result.marks.firstPaint = fp
  }

[devcorpio]

Hi @741439599,

The agent does not report First Paint (FP) because the major players within the performance industry have decided to focus on these user-centric metrics. That's why we only want to report FCP.

If you want to include first paint with the page-load transaction, you could leverage the addLabels API and add a code similar to this one to your website:

window.addEventListener('load', function () {
    const loadTransaction = elasticApm.getCurrentTransaction()
    if (loadTransaction) {
         const firstPaint = performance.getEntriesByName("first-paint")[0]

        loadTransaction.addLabels({ "first-paint": firstPaint.startTime })
    }
})

You can see that data on the transaction detail section:

What is more, if you want to filter all the transactions with your new label, what you can do is to write this query in Kibana Discover:

Cheers, Alberto