Track the loading times of individual web pages using JavaScript

Question

Track the loading times of individual web pages using JavaScript

Users have been reporting that my existing single-page web application is not performing well, but unfortunately I can't change the code. To address this issue, I want to track the loading time in the following manner:

Record the timestamp of when a user clicks on the page
Record the timestamp of when the page rendering is completed, including ajax requests and other JavaScript functions
Calculate the difference between the two timestamps and send it back to the server

I know how to handle steps 1 and 3 using jQuery, but I'm unsure about the best approach for step 2.

Since this seems like a common scenario, is there a standard toolset available for monitoring performance like this?

javascript ajax monitoring performance-testing single-page-application

Answer 1

Answer №1

Here is a useful tip:

function calculatePageLoadTime() { 
  var startTime = new Date().getTime();
  var loadTime = startTime - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + loadTime);
}

Answer 2

Here is a useful tip:

function calculatePageLoadTime() { 
  var startTime = new Date().getTime();
  var loadTime = startTime - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + loadTime);
}

Answer 3

Answer №2

One way to monitor AJAX performance is by utilizing the global ajaxStop event provided by jQuery.

var startTime = +(new Date());
$(document).ajaxStop(function() {
    var executionTime = +(new Date()) - startTime;
    // perform logging here
});

Although this method may not capture code executed after the final AJAX call, it can still be valuable if the bottleneck occurs before the last call.

Answer 4

One way to monitor AJAX performance is by utilizing the global ajaxStop event provided by jQuery.

var startTime = +(new Date());
$(document).ajaxStop(function() {
    var executionTime = +(new Date()) - startTime;
    // perform logging here
});

Although this method may not capture code executed after the final AJAX call, it can still be valuable if the bottleneck occurs before the last call.

Answer 5

Answer №3

One way to accomplish this is by following these steps...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var startTime, endTime, timeDifference;
        function doIt() {
            var startTime = new Date().getTime();
            $.ajax({
                type: 'post',
                url: 'a.php',
                success: function (resp) {
                    endTime = new Date().getTime();
                    timeDifference = endTime - startTime; //The difference in time is captured in milliseconds
                }
            })
        }
    </script>
</head>
<body>
<button style="position: absolute; top:60px" onclick="doIt()">Start</button>
</body>
</html>

Answer 6

One way to accomplish this is by following these steps...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var startTime, endTime, timeDifference;
        function doIt() {
            var startTime = new Date().getTime();
            $.ajax({
                type: 'post',
                url: 'a.php',
                success: function (resp) {
                    endTime = new Date().getTime();
                    timeDifference = endTime - startTime; //The difference in time is captured in milliseconds
                }
            })
        }
    </script>
</head>
<body>
<button style="position: absolute; top:60px" onclick="doIt()">Start</button>
</body>
</html>

Answer 7

Answer №4

Although not a flawless solution, the code below proves effective. It kicks off the timer upon user click and keeps an eye on page content changes via the checkHTML function.

var timeLogging = new Array();
var timeStart;

$(document).click(function() {
    initializeEventLogger();
});

function initializeEventLogger() {
    caption = $(".v-captiontext:first").text();
    timeStart = +(new Date());
    timeLogging.push(new Array(0,0));
    timeLogging[timeLogging.length - 1][0] = timeStart;
}

initializeEventLogger();
// Set up a timer to monitor html changes
window.setInterval(checkHtml, 250);
// Initiate a timer to generate reports
window.setInterval(sendReport, 1000);


var html;
function checkHtml() {
    current = $("body").html();
    if (current != html) {
        html = current;
        var diff = +(new Date()) - timeStart;
        timeLogging[timeLogging.length - 1][1] = diff;
    }
}

function sendReport() {
    if (timeLogging.length > 3) {
        console.log(timeLogging);
        // Perform additional tasks with the collected data
        for (i = 0; i <= timeLogging.length; i++) {
            timeLogging.shift();
        }
    }
}

Answer 8

Although not a flawless solution, the code below proves effective. It kicks off the timer upon user click and keeps an eye on page content changes via the checkHTML function.

var timeLogging = new Array();
var timeStart;

$(document).click(function() {
    initializeEventLogger();
});

function initializeEventLogger() {
    caption = $(".v-captiontext:first").text();
    timeStart = +(new Date());
    timeLogging.push(new Array(0,0));
    timeLogging[timeLogging.length - 1][0] = timeStart;
}

initializeEventLogger();
// Set up a timer to monitor html changes
window.setInterval(checkHtml, 250);
// Initiate a timer to generate reports
window.setInterval(sendReport, 1000);


var html;
function checkHtml() {
    current = $("body").html();
    if (current != html) {
        html = current;
        var diff = +(new Date()) - timeStart;
        timeLogging[timeLogging.length - 1][1] = diff;
    }
}

function sendReport() {
    if (timeLogging.length > 3) {
        console.log(timeLogging);
        // Perform additional tasks with the collected data
        for (i = 0; i <= timeLogging.length; i++) {
            timeLogging.shift();
        }
    }
}

Answer 9

Answer №5

Have you thought about optimizing your application's markup by storing it in localStorage instead of keeping it all in the page, even when it is hidden? By doing this, you can prevent choking the browser's memory and improve performance. I came across this technique a few years ago when Bing and Google started using it and wrote a blog post about it on the same day I discovered it. Since then, I have implemented this method with great success.

http://example.com/#!article/Optimize-Your-Web-App-with-LocalStorage

Answer 10

Have you thought about optimizing your application's markup by storing it in localStorage instead of keeping it all in the page, even when it is hidden? By doing this, you can prevent choking the browser's memory and improve performance. I came across this technique a few years ago when Bing and Google started using it and wrote a blog post about it on the same day I discovered it. Since then, I have implemented this method with great success.

http://example.com/#!article/Optimize-Your-Web-App-with-LocalStorage

Track the loading times of individual web pages using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Order of custom code and JQuery in ASP master page

Tips for accessing CSS properties on the img tag

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

transferring documents using multer

execute ajax calls in sequential order

Using radio buttons and AJAX for switching cases within PHP

"Utilizing a Handlebars Helper to Evaluate if Two Values (v1 and v2) are Equal, and Displaying Content from

Tips for choosing all elements in a form that have a specific class assigned

Switching the markLine in vega lite to a markBar causes it to lose its sorting arrangement

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

The React application functions smoothly when executed using react-scripts start, but encounters an "Unexpected SyntaxError: Unexpected Token: <" error upon building

hashSync function needs both data and salt to generate the hash

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

Angular 4: Modifying the URL without the Component being Displayed

Can an image map area be identified using radial coordinates?

Blur function not performing as anticipated

Do I need to utilize getStaticProps along with JSON imports in Next.js?

Tips on incorporating the Browserified npm package into an Angular controller