Calculate page load time

Question

Calculate page load time

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (0 votes)

6

I'd like to measure the loading time of a page using JavaScript. What do you mean?

When someone accesses my page I want to start measuring the loading time.
If this load time exceeds, for example, 500 ms, I want to display a link suggesting a simpler version of the page, as it is clear to me that this user's connection is slow.

Is there a script that does this?

EDIT

I had good answers, but I did not have an answer exactly as I expected. I'm sure there are more elegant approaches than putting a timer on the page. I want to identify bottlenecks to reach a standard of excellence in speed.

I found the approach interesting using window.performance.timing .

This example in the SOen apparently comes close to what I'm looking for. Has anyone used this approach?

EDIT 2

So I do not look annoying in the comments, I'd like to give you some more information:

The Date object of JavaScript solves part of my problem, but not with the level of excellence I expect.

First because it is not necessary;
Second that I can not measure network latency.

Latency is very important because I'm making a decision between a cloud service ( www.parse.com ) and an application server (< in> Java + Wildfly ) also in the cloud.

Parse offers me a fantastic development speed, but is the response time satisfactory? Will Wildfly , even though it also be in the cloud, will respond to me at a faster rate? I need metrics for this, and Date will not give me all the metrics I want.

javascript

asked by anonymous 04.11.2014 / 22:46

3 answers

4

Soon after the <head> tag of your page, add the following script:

<script>
    var time = new Date().getTime();
</script>

Before closing </body> the next script:

<script>
    time = (new Date().getTime()) - time; 
</script>

For the jQuery use case you can replace the pre-closing script </body> with the following (thanks to Miguel Angelo by the comment):

<script>
    $("document").ready(function(){
        time = (new Date().getTime()) - time; 
    });
</script>

And time will have its load time measured in milliseconds.

Example

See how long it takes to confirm the alert as page load can be extremely fast:

$("document").ready(function(){
    var time = (new Date().getTime()) - start;
    $("p").text("A página foi renderizada em " + String(time) + " milissegundos...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>varstart=newDate().getTime();alert("Espere e Aperte Enter");
</script>
<center>
    <h1>Página renderizada!</h1>
    <br />
    <p></p>
</center>

04.11.2014 / 23:20

0

The answer already existed, see this link and example code:

<script>
   var startTime = (new Date()).getTime();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>$(window).load(function(){varendTime=(newDate()).getTime();varmillisecondsLoading=endTime-startTime;//PutmillisecondsLoadinginahiddenformfield//orAjaxitbacktotheserverorwhatever.});</script>

Source: Page load time with jquery

05.11.2014 / 13:39

What is the applicability of the 8 queens problem? "Hello, world" with Wish TCL / TK, how to change text in a widget?

score 2 · Accepted Answer

You can try pinging your server, assuming it is available and you use jQuery:

// Timer de Alta Resolução
hDPing = window.performance.now();

// Timer de Alta Resolução para browser baseados em WebKit
hDWKitPing = window.performance.webkitNow();

// Timer de resolução padrão
ping = new Date().getTime();

$.ajax({ 
    type: "HEAD",
    url: "http://server.com/ping.php",
    data: "",
    cache: false,
    success: function(output){ 
        hDPing = window.performance.now() - hDPing;
        hDWKitPing = window.performance.webkitNow() - hDWKitPing;
        ping = new Date().getTime() - ping;
    }
});

window.performance.now() is supported in Google Chrome, Firefox 15+ and IE10.

As a simple request, the script <?php echo ""; ?> runtime will not take any time.

And in the end, ping , hpPing , hpWKitPing will return to general latency (client -> server -> client). On top of these values you can do the calculations and define what is an acceptable speed and other things.

You can run more than one ping to perform a mean and a thousand more possible methods.