What is the Navigation Timing API?

What is the Navigation Timing API?

The Navigation Timing API is a browser interface that reports how long each stage of loading a page took: redirects, connection, request, response, DOM processing and the load event. Today you read it through a PerformanceNavigationTiming entry. The older performance.timing object is deprecated, and MDN says to avoid it in new projects.

How it works

The browser records one navigation entry for the current document, as part of the Performance Timeline and the wider Web Performance API. Read it like this:

const [nav] = performance.getEntriesByType('navigation');

All values are in milliseconds relative to the start of the navigation, so startTime is always 0. Useful properties, per MDN:

• domInteractive: just before the document becomes interactive.
• domContentLoadedEventStart and domContentLoadedEventEnd: the DOMContentLoaded handlers.
• domComplete, loadEventStart, loadEventEnd: the document finishing and the load handlers. duration equals loadEventEnd minus startTime.
• type: navigate, reload or back_forward.
• redirectCount: redirects since the last non-redirect navigation.

The entry also inherits the network phases from PerformanceResourceTiming, such as DNS, connection and responseStart.

Example: a quick page load breakdown

On a slow page, run the line above in the browser console. If responseStart is large, the wait is on the network or the server: look at time to first byte (TTFB) and the Server-Timing header. If responseStart is small but domContentLoadedEventEnd is late, the browser is busy parsing or running scripts, so look at your JavaScript.

Common mistakes

• Using the deprecated performance.timing in new code.
• Reading loadEventEnd too early. It stays 0 until the load handlers finish, so read it after the load event.
• Expecting single-page app route changes to appear. There is one navigation entry per document, not one per route.
• Averaging values and calling it performance. Look at percentiles across many visits.
• Treating a single lab run as truth for all users.

Navigation Timing in testing and monitoring

Navigation Timing is the raw material for real user monitoring: a small script reads the entry and sends it to your backend, so you see what real visitors experienced. For a controlled view, a lab tool is the counterpart: LoadFocus page speed monitoring runs scheduled Lighthouse audits from 25 cloud regions and alerts you when a page slows down, and the free Core Web Vitals checker shows real-user data for a URL. See also our guide to monitoring Core Web Vitals with alerts and reports. For the specification details, read PerformanceNavigationTiming on MDN.

FAQ

Is performance.timing deprecated?

Yes. MDN marks it as deprecated and superseded by PerformanceNavigationTiming. Use performance.getEntriesByType('navigation') instead.

How do I get the page load time?

Read the navigation entry after the load event. Its duration is loadEventEnd minus startTime, which is 0.

Does Navigation Timing measure Core Web Vitals?

No. It gives navigation milestones such as DOMContentLoaded and load. Metrics like LCP and CLS come from other performance entries.

Does it work in all browsers?

PerformanceNavigationTiming is marked widely available on MDN and has worked across browsers since October 2021.