The 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. Navigation Timing API There is a specification for Level 2, but it is not yet covered here. This article currently describes Navigation Timing Level 1. 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 or other techniques. XMLHttpRequest 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 handler, and so forth. load Interfaces Performance The property returns a Performance object. While this interface is defined by the High Resolution Time API, the Navigation Timing API adds two properties: and , of the types below. window.performance timing navigation 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 , objects of this type contain timing information that can provide insight into web page performance. timing PerformanceNavigation The type used to return the value of , which contains information explaining the context of the load operation described by this 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, total time, etc. navigation Performance window.onload 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: perfData = .performance.timing; pageLoadTime = perfData.loadEventEnd - perfData.navigationStart; const window const This subtracts the time at which navigation began ( ) from the time at which the event handler returns ( ). This gives you the perceived page load time. navigationStart load loadEventEnd 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: connectTime = perfData.responseEnd - perfData.requestStart; const Here, the time at which the request was initiated ( ). from the time at which the response was finished being received ( ). requestStart 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: renderTime = perfData.domComplete - perfData.domLoading; const This is obtained by starting with the time at which loading of the DOM and its dependencies is complete ( ) and subtracting from it the time at which parsing of the DOM began ( ). domComplete domLoading Specifications Browser compatibility Window.performance.timing Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API Published under licence Open CC Attribution ShareAlike 3.0

Navigation Timing API: How to Track Your Website Loading Performance

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Styling HTML Using CSS: A Beginner's Guide

Pi App Studio Expands Beyond No-Code, Giving Creators and Developers More Room to Build

How to Migrate Existing Azure Functions to the .NET 8 Isolated Worker Runtime

Advanced Patterns with the Symfony Clock: MockClock, NativeClock, and More

AI Is Coded Postmodernism: A Look at Bohemian Rhapsody, The Matrix, and More

The Great Data Redundancy Mirage: When "Resilient" Networks Collapse Like Dominoes

Styling HTML Using CSS: A Beginner's Guide

Pi App Studio Expands Beyond No-Code, Giving Creators and Developers More Room to Build

How to Migrate Existing Azure Functions to the .NET 8 Isolated Worker Runtime

Advanced Patterns with the Symfony Clock: MockClock, NativeClock, and More

AI Is Coded Postmodernism: A Look at Bohemian Rhapsody, The Matrix, and More

The Great Data Redundancy Mirage: When "Resilient" Networks Collapse Like Dominoes

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps