Track the loading time of a webpage and the time it takes to render all subelements of

Question

Track the loading time of a webpage and the time it takes to render all subelements of

For my project, I need to track page load times for each individual visitor. My idea is to embed a JavaScript snippet into the page in order to achieve this goal. However, the task is more complex than I anticipated because I also need to measure the response times for all subrequests made during the page load process, including those sent to third-party systems like CDNs or Google. Moreover, there are numerous AJAX calls that occur throughout the page loading sequence, and I must ensure that only requests made before the completion of the initial page load event are recorded. Once all measurements have been captured, they need to be transmitted back to the server for storage using XMLHttpRequest. Has anyone encountered a similar challenge in the past? Are there any recommendations or sample scripts available?

Thank you.

javascript ajax performance

Answer 1

Answer №1

UPDATE: Although a good start, the issue remains that certain content is loaded asynchronously. Determining the loading time for images, for example, presents a challenge. However, it can be applied in AJAX calls.

One approach to address this is provided here: http://jsfiddle.net/45Lpwhyv/

function LoadingTimer() {
    this.timestamp = null;
    this.parts = [];
}

LoadingTimer.prototype.start = function (data) {
    this.stop();
    var i = this.parts.length;
    this.parts[i] = {};
    this.parts[i].data = data;
    this.timestamp = new Date().getTime();;
};

LoadingTimer.prototype.stop = function () {
    if (this.timestamp !== null) {
        this.parts[this.parts.length - 1].duration = (new Date().getTime()) - this.timestamp;
        this.timestamp = null;
    }
};

This class enables passing a data parameter to the timer, such as a string indicating the current section of the document being loaded. To utilize it, instantiate LoadingTimer and call .start("sectionName") for each action requiring tracking. To pause a section without starting another immediately, simply invoke .stop.

lt = new LoadingTimer();
lt.start("Time before first dialog closes.");
alert("Loading time will be recorded upon closing this dialog.");
lt.start("Time before second dialog closes.");
alert("Let's move on to the next!");
lt.stop();

Additional methods could be implemented to eventually transmit the data to the server, potentially using JSON format.

Answer 2

UPDATE: Although a good start, the issue remains that certain content is loaded asynchronously. Determining the loading time for images, for example, presents a challenge. However, it can be applied in AJAX calls.

One approach to address this is provided here: http://jsfiddle.net/45Lpwhyv/

function LoadingTimer() {
    this.timestamp = null;
    this.parts = [];
}

LoadingTimer.prototype.start = function (data) {
    this.stop();
    var i = this.parts.length;
    this.parts[i] = {};
    this.parts[i].data = data;
    this.timestamp = new Date().getTime();;
};

LoadingTimer.prototype.stop = function () {
    if (this.timestamp !== null) {
        this.parts[this.parts.length - 1].duration = (new Date().getTime()) - this.timestamp;
        this.timestamp = null;
    }
};

This class enables passing a data parameter to the timer, such as a string indicating the current section of the document being loaded. To utilize it, instantiate LoadingTimer and call .start("sectionName") for each action requiring tracking. To pause a section without starting another immediately, simply invoke .stop.

lt = new LoadingTimer();
lt.start("Time before first dialog closes.");
alert("Loading time will be recorded upon closing this dialog.");
lt.start("Time before second dialog closes.");
alert("Let's move on to the next!");
lt.stop();

Additional methods could be implemented to eventually transmit the data to the server, potentially using JSON format.

Track the loading time of a webpage and the time it takes to render all subelements of

Answer №1

Similar questions

Issue when Updating Component State: React child cannot be an object

What is the best way to reference an i18n entry within .json files?

Reverse the color of H1 text within a vertical div

Press the button to access the URL within the current window

Tips for displaying a div briefly before loading the second page

The values of variables persist even after refreshing the page

Is it possible to cache silverlight WCF service calls?

Run a Javascript function when the expected event fails to happen

Sending JSON objects via AJAX to an ASP.NET callback page and serializing them

What is the best way to incorporate Vuetify into a new application?

The attribute 'subtle' is not found within the definition of 'webcrypto' type

Exploring the mechanics behind ES6 Map shims

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Tablesorter with FilteredPages for enhanced server-side filtering

What is the best way to update the value of a specific key in discord.js?

Ways to remove an automatically inserted underscore along with a timestamp

Find the string "s" within a div element aligned vertically, using Popper

performing asynchronous operations with async functions within the array.map() method in JavaScript

Which event in the listbox should I trigger to adjust the scroll position?

Tips for refreshing extensive JSON structures?