paint-brush
Navigation Timing API: How to Track Your Website Loading Performanceby@mozilla
1,107 reads
1,107 reads

Navigation Timing API: How to Track Your Website Loading Performance

by Mozilla Contributors
Mozilla Contributors HackerNoon profile picture

Mozilla Contributors

@mozilla

Mozilla (stylized as moz://a) is a free software community founded...

May 20th, 2020
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Navigation Timing API provides data that can be used to measure the performance of a web site. API lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and so forth. API currently describes navigation Timing Level 1. There is a specification for Level 2, but it is not yet covered here. You can use the API to gather performance data on the client side to be sent to a server via XHR.

Company Mentioned

Mention Thumbnail
Mozilla
featured image - Navigation Timing API: How to Track Your Website Loading Performance
Mozilla Contributors HackerNoon profile picture
Mozilla Contributors

Mozilla Contributors

@mozilla

Mozilla (stylized as moz://a) is a free software community founded in 1998 by members of Netscape.

About @mozilla
LEARN MORE ABOUT @MOZILLA'S
EXPERTISE AND PLACE ON THE INTERNET.

The Navigation Timing API provides data that can be used to measure the performance of a web site. Unlike JavaScript-based libraries that have historically been used to collect similar information, the Navigation Timing API can be much more accurate and reliable.

This article currently describes Navigation Timing Level 1. There is a specification for Level 2, but it is not yet covered here.

Concepts and usage

You can use the Navigation Timing API to gather performance data on
the client side, which you can then transmit to a server using

XMLHttpRequest
or other techniques.

This API lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's

load
handler, and so forth.

Interfaces

Performance

The

window.performance
property returns a Performance object. While this interface is defined by the High Resolution Time API, the Navigation Timing API adds two properties:
timing
and
navigation
, of the types below.

PerformanceNavigationTiming

Provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.

PerformanceTiming

Used as the type for the value of

timing
, objects of this type contain timing information that can provide insight into web page performance.

PerformanceNavigation

The type used to return the value of

navigation
, which contains information explaining the context of the load operation described by this
Performance
instance.

The Navigation Timing API can be used to gather performance data on
the client side to be sent to a server via XHR as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time,
window.onload
total time, etc.

Examples

Calculate the total page load time

To compute the total amount of time it took to load the page, you can use the following code:

const perfData = window.performance.timing; 
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

This subtracts the time at which navigation began (

navigationStart
) from the time at which the load event handler returns (
loadEventEnd
). This gives you the perceived page load time.

Calculate request response time

You can calculate the time elapsed between the beginning of a request and the completion of getting the response using code like this:

const connectTime = perfData.responseEnd - perfData.requestStart;

Here, the time at which the request was initiated (

requestStart
). from the time at which the response was finished being received (
responseEnd
).

Calculate page render time

As another example of an interesting piece of data you can obtain using the Navigation Timing API that you can't otherwise easily get, you can get the amount of time it took to render the page:

const renderTime = perfData.domComplete - perfData.domLoading;

This is obtained by starting with the time at which loading of the DOM and its dependencies is complete (

domComplete
) and subtracting from it the time at which parsing of the DOM began (
domLoading
).

Specifications

image

Browser compatibility

Window.performance.timing

image

Credits

L O A D I N G
. . . comments & more!

About Author

Mozilla Contributors HackerNoon profile picture
Mozilla Contributors@mozilla
Mozilla (stylized as moz://a) is a free software community founded in 1998 by members of Netscape.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Unni
Hashnode
Learnrepo
Hashnode

Mentioned in this story

companies
X REMOVE AD