1.3 NavigationTiming API
Browser developer tools.
1.3.1 Log to console
The performance.timing object is a W3C draft spec, is a a dynamically generated
timeline of all the performance timing events that occurred in navigating to this page and loading
The value of each event key is represented as an timestamp Integer.
You can open the console panel in your Chrome browser by pressing alt + ctrl + j and selecting the console tab.
Inside the console type and hit enter:
Data from the API really comes handy when the events are used in combination:
- Network latency ():
(responseEnd - fetchStart)
- The time taken for page load once the page is received from the server:
- The whole process of navigation and page load:
(loadEventEnd - navigationStart)
Although you have most control and power manipulating the Timing object within the browser console most times you just want to quickly see a breakdown of the current page your on without having to jump into the console.
Go to this page and drag the bookmarklet link into your browsers toolbar.
Now navigate to any given page and click on the bookmarklet to view the pages timing information.