JavaScript object containing all of the timing event information of the current page.

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 its content. It is represented as a JavaScript object and can be found directly on the window object. The value of each event key is represented as an timestamp Integer.

We can quickly view this information by logging it out inside the JavaScript console.

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:

window.performance.timing
Navigation timing

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: (loadEventEnd-responseEnd)
  • The whole process of navigation and page load: (loadEventEnd - navigationStart)

1.3.2 Bookmarklet


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.

Bookmarklet

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.

Navigation timing bookmarklet