• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

192
Views
How to use the `PerformanceNavigationTiming` API to get page load time?

I am trying to to use the PerformanceNavigationTiming API to generate a page load metric.

The MDN API document linked above says that the PerformanceEntry.duration should give me what I need because it:

[r]eturns a timestamp that is the difference between the PerformanceNavigationTiming.loadEventEnd and PerformanceEntry.startTime properties.

However, when I check this property, I get simply 0. I'm accessing this API from within a React hook that runs a useEffect function that wait for the window load event and then checks the api like so:

export const useReportPageLoadTime = () => {
  useEffect(() => {
    const reportTime = () => {
      let navPerformance: PerformanceEntry
      navPerformance = window.performance.getEntriesByType('navigation')[0]

      console.log({
        duration: navPerformance.duration,
        blob: navPerformance.toJSON()
      })
    }

    if (document.readyState === 'complete') {
      reportTime()
      return null
    } else {
      window.addEventListener('load', reportTime)
      return () => window.removeEventListener('load', reportTime)
    }
  }, [])
}

As you can see there, I also call toJSON on the performance entry and indeed it shows that the values upon which duration (startTime and loadEventEnd) are both 0 as well:

picture of data

Does anyone know why I am getting this value?

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error