Calculate loading time of a page

Asked

Viewed 3,037 times

6

I would like to measure the load time of a page using Javascript. How so?

  • When someone accesses my page I want to start measuring load time.
  • In case this load time exceeds, for example, 500 ms I want to display a link suggesting the use of a simpler version of the page, because it is clear to me that the connection of this user is slow.

Is there any script do that?

EDIT

I got a good answer, but I didn’t get 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 arrive at a standard of excellence in the speed category.

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

This example in Soen apparently comes close to what I’m looking for. Someone has already used this approach?

EDIT 2

So that I do not seem boring in the comments, I would like to provide some more information:

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

  • First because he doesn’t have to;
  • Second with it I can’t measure network latency.

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

The parse offers me a fantastic development speed, but is the response time satisfactory? Will the Wildfly, even though I’m in the cloud, will you answer me with more speed? I need metrics for that, and Date won’t give me all the metrics I want.

javascript
  • 1

    window.performance.timing maybe it’s a good way...

  • 1

    @Guill, I don’t think it lacks the question, the content has an explicit question. . . . Edgar, cool this info that Sergio passed; would suggest perhaps vc store a dozen values of timing in a local object Torage and be able to average.

  • @brasofilo found it interesting, I will test the methods passed so far.

  • So enriching what @Sergio said, I found interesting, and has a good explanation right here in the OS: http://stackoverflow.com/questions/16808486/explanation-of-window-performance-javascript

  • Sleek approach?

  • @Guill put it. I liked your answer, it works, but I’ll wait for more approaches. I wonder if anyone has used an approach with the windows performance.. I intend to study it myself, but while I don’t have time I’ll wait for more answers. Just don’t think I didn’t like your answer :), she is good and I want to know if a better one can come up even better.

Show 1 more comment

3 answers

4

Right after the tag <head> from 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 case of using jQuery you can replace the script before closing </body> for the following (thanks to Miguel Angelo by comment):

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

And time will have its charging time measured in milliseconds.

Example

See how long it takes you to confirm the alert once page loading 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>
    var start = new Date().getTime(); 
    alert("Espere e Aperte Enter");
</script>
<center>
    <h1>Página renderizada!</h1>
    <br />
    <p></p>
</center>

  • 2

    The solution is good, however, it is not correct in the case where there are scripts to be loaded that are declared inside the head tag

  • 1

    I consider the option presented in the snippet (using Document ready) much better than the one described in the text (put a script before closing the body tag). Maybe it’s even better to combine the two, put in the script $("document").ready(function() ... before the closure of body, to make Handler measuring time last to run.

  • Corrections implemented. Thanks for the comments.

  • Although solving is not the kind of solution I was hoping for. The code itself works, but I have to replicate it on every page and it’s not quite what I want. I’ll give an edited question.

  • You can save the result in localStorage. According to your issue in the question, what you need is to measure the speed of the requester’s connection.

2


You can try a ping using 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 or higher and IE10.

Because it is a simple request, the execution time of the script <?php echo ""; ?> won’t take any time.

And in the end, ping, hpPing, hpWKitPing will return the 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.

Can run more than one ping to achieve an average plus a thousand possible methods.

0

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

<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 () {
       var endTime = (new Date()).getTime();
       var millisecondsLoading = endTime - startTime;
       // Put millisecondsLoading in a hidden form field
       // or Ajax it back to the server or whatever.
   });
</script>

Source: Page load time with jquery

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.