Monitoring Website Load Speed using Performance API

Question

Monitoring Website Load Speed using Performance API

After attending a recent talk by Steve Souders, I was fascinated by the discussion of the new performance spec being implemented by modern browsers. During his presentation, he used an example to demonstrate how to measure perceived page load time:

var timing = performance.timing;
var loadtime = timing.loadEventEnd - timing.navigationStart;
alert("Perceived time:"+loadtime);

Although this example is quite basic, when I tested it on my development environment, I received absurdly large negative numbers like -1238981729837 due to the loadEventEnd being less than 0.

Clearly, there are some issues with this method, and improvements can be made to enhance the accuracy and reliability of the data (especially since this is only available on certain browsers).

So, I'm curious to hear suggestions on how to effectively utilize this API to track page load times using JavaScript for analyzing site performance?

javascript performance optimization analytics navigation-timing-api

Answer 1

Answer №1

Make sure to capture the loadEventEnd once the page has completely loaded to avoid getting a result of 0. This can be achieved by using jQuery to attach to the onload event.

$(window).load(function(){
 setTimeout(function(){
 window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
 var timing = performance.timing || {};
 var parseTime = timing.loadEventEnd - timing.responseEnd;
 console.log('Parsetime: ', parseTime);
 }, 0);
});

Answer 2

Make sure to capture the loadEventEnd once the page has completely loaded to avoid getting a result of 0. This can be achieved by using jQuery to attach to the onload event.

$(window).load(function(){
 setTimeout(function(){
 window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
 var timing = performance.timing || {};
 var parseTime = timing.loadEventEnd - timing.responseEnd;
 console.log('Parsetime: ', parseTime);
 }, 0);
});

Answer 3

Answer №2

I have personally experienced no difficulties using this tool; however, I have not tested its performance on a local machine - it operates smoothly on a website. It is valuable to analyze other websites to have a benchmark for comparison.

For example, here are some commendable performance numbers for page size and resources:

http://stackoverflow.com/questions/7606972/measuring-site-load-times-
Friday, September 30, 2011 4:03:52 AM
//
(timestamp:1317369511747)
navigationStart= 0 milliseconds elapsed 

// More data...

http://www.yankeeweb.com/webshop.html
Friday, September 30, 2011 4:22:25 AM
//
(timestamp:1317370911738)
navigationStart= 0 milliseconds elapsed 

// More data...

It's essential to gather performance data from other users visiting your site. This information can be obtained through a survey or mailing list (using Firefox 7 and Chrome, for instance).

// Code snippet run in Firefox Scratchpad:

(function(){
    // Code function...
})()

Answer 4

I have personally experienced no difficulties using this tool; however, I have not tested its performance on a local machine - it operates smoothly on a website. It is valuable to analyze other websites to have a benchmark for comparison.

For example, here are some commendable performance numbers for page size and resources:

http://stackoverflow.com/questions/7606972/measuring-site-load-times-
Friday, September 30, 2011 4:03:52 AM
//
(timestamp:1317369511747)
navigationStart= 0 milliseconds elapsed 

// More data...

http://www.yankeeweb.com/webshop.html
Friday, September 30, 2011 4:22:25 AM
//
(timestamp:1317370911738)
navigationStart= 0 milliseconds elapsed 

// More data...

It's essential to gather performance data from other users visiting your site. This information can be obtained through a survey or mailing list (using Firefox 7 and Chrome, for instance).

// Code snippet run in Firefox Scratchpad:

(function(){
    // Code function...
})()

Answer 5

Answer №3

Great response from Ionut Popa.

It's pretty wild to see numbers like -1238981729837 as the answer simply because loadEventEnd is less than zero.

Contrary to popular belief, loadEventEnd is not below zero, but actually zero.

According to the Navigation Timing specification: 'This attribute should indicate the time when the current document's load event is finished. It should return zero if the load event has not been triggered or completed.'

Therefore, calculating

timing.loadEventEnd - timing.navigationStart

will result in a negative value.

For your information, here's an alternative to the jQuery implementation:

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}

Answer 6

Great response from Ionut Popa.

It's pretty wild to see numbers like -1238981729837 as the answer simply because loadEventEnd is less than zero.

Contrary to popular belief, loadEventEnd is not below zero, but actually zero.

According to the Navigation Timing specification: 'This attribute should indicate the time when the current document's load event is finished. It should return zero if the load event has not been triggered or completed.'

Therefore, calculating

timing.loadEventEnd - timing.navigationStart

will result in a negative value.

For your information, here's an alternative to the jQuery implementation:

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}

Monitoring Website Load Speed using Performance API

Answer №1

Answer №2

Answer №3

Similar questions

Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Custom cellRenderer prevents Ag Grid's autoHeight and wrapText features from functioning properly

What are effective ways to eliminate script tags from a webpage?

Is the JavaScript Date object consistently displayed in the America/New_York timezone?

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

Issues with calculating SUM in MySQL within a Node.js Express application using EJS template

Error: The variable usersWithSecrets has not been declared and therefore is not defined within the current scope. This issue

Having difficulty in dynamically loading an image from an API's URL in Angular

send JSON data to a Spring MVC endpoint

ReactJS Issue: Failure of Validation on Auto-Populated Form Field

Incorporating grids for a flickering drag and drop effect in Javascript

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

Guide to implementing the HttpOnly flag in a Node.js and Express.js application

leveraging npm packages in Vue single page applications

Disable system discord.js

The server gets blocked by numerous AJAX GET requests happening at the same time until the data gets returned

Structuring JavaScript in Rails' asset pipeline

Steps for creating a CodeBlock in a Next.js Website blog similar to the one in the provided image

Tips for retrieving information from an API and displaying it in a table

Combining two objects in node-red: A step-by-step guide