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

Tips for successfully submitting a collection of items with unique identifiers to a controller in asp.net core using ajax

Learn how to create a button that will only submit a value when clicked using Node.js and EJS

Transforming Excel data into JSON format using ReactJS

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

Exploring the concept of chained ajax requests technique

Continuously running loop to retrieve data

Challenges with sending JSON encoded Arrays from WordPress to PHP results in empty or NULL responses

Is there a way to transfer a JSON map object from Flask and then utilize it as a JavaScript object?

Finding the correct placement for importing 'reflect-metadata' in Next.js version 14.1.0

What is the method to individually determine "true" or "false" using .map() in coding

What is the solution to the error message "Cannot assign to read only property 'exports' of object '#<Object>' when attempting to add an additional function to module.exports?"

Pass multiple variables as input to a function, then query a JSON array to retrieve multiple array values as the output

Having trouble submitting a FORM remotely on Rails 3.0.3?

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Inject a directive attribute dynamically into an element using another directive, and ensure the initial directive is set to 'active.'

Nested loops combined with a timeout occasionally results in failure

Trigger event listener of AngularJS directive on click and send information to it

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

Issue with Titanium: Unable to scroll within tableview

Challenges arise when using Bootstrap 4 for country selection