Render time

[Larry Martell]

This is not strictly a django question, but I'm hoping someone here
has solved this and can help me. I have a client that has a django app
that collects a bunch of server side statistics on the users
activities - e.g. what reports they run, the number of rows returned,
how long the query took, etc. Now they want me to add to that how long
the browser takes to render the page after it gets the data. So I have
3 issues here:

1) How can I even calculate that?
2) How I can return it back to the server?
3) Since the database table is updated with the other statistics
before the data is sent to the browser, assuming I could calculate the
render time and send it back, how could I find the row and update with
that info?

If anyone has already done something like this, or anyone has any
advise on how I could do it (especially item #1), I'd really
appreciate them sharing it with me.

TIA!
-larry

[bruno desthuilliers]

On Monday, June 25, 2012 1:34:08 PM UTC+2, Larry....@gmail.com wrote:

 Now they want me to add to that how long
the browser takes to render the page

How would server code ever know this ?

[Larry Martell]

My assumption is that it would be collected or calculated on the
client side and sent back to the server. But I have no clue how that
could be done (or even if it could be done).

[Deepak Kumar]

I am no django expert ... but I guess you can do following ...

Get the timestamp when request first reaches your server

It does some processing

returns output to browser

use javascript to check if DOM loaded and get the timestamp

calculate time diff and send to the server again to save it.

Don't know if that ll help.

-deepak

-larry

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

[Melvyn Sopacua]

The issue is what your client's definitions are.
A browser starts rendering as soon it receives data. Is that your
starting point?
If your definition is that "as soon as all data is received" and until
browser has fully displayed things, this is a bit more difficult. First,
there's no event for this. The closest approximation is
"DOMContentLoaded", which is used by JQuery's documentready. The
difference between "all data received" and "DOM parsing done" is the cpu
cycles it takes to parse the main DOM tree. Since your clients already
are asking for fractions of seconds in the common case, this is significant.

Secondly, window.onload is your stoptime event, but this doesn't fire
until /everything/ is loaded. This means any networking problems with
content have to time out, but for the end user, everything displays
correctly. In fact, a user can click on to the next page before this
even fires.

So, reliably, you can't really do this and your best approximation is
the event firing times for window.onload minus DOMContentLoaded, or
JQuery's $(document).ready [1].
You can embed the row id for your statistics as a JavaScript variable in
your template.
And finally, you'd send the calculation back using Ajax requests,
something you'll find plenty of howto's for on the web.

[1]
<http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery>

--
Melvyn Sopacua

[Andy McKay]

> Now they want me to add to that how long
> the browser takes to render the page after it gets the data.

You can use the navigation timing API:

https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

We use this in conjuction with graphite and django-statsd to produce
graphs of hour long our sites takes to render.

http://blog.mozilla.org/webdev/2012/01/06/timing-amo-user-experience/

And some more links:

https://github.com/andymckay/django-statsd
http://django-statsd.readthedocs.org/en/latest/#front-end-timing-integration
http://graphite.wikidot.com/

Cheers.

[Larry Martell]

Thanks for the reply Melvyn. I'll be investigating these solutions.

[Larry Martell]

Great! Thanks very much Andy. I'll look into these and let everyone
know what I ultimately do.

[Melvyn Sopacua]

On 26-6-2012 5:04, Andy McKay wrote:
>> Now they want me to add to that how long
>> the browser takes to render the page after it gets the data.
>
> You can use the navigation timing API:
>
> https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

Wow, really nice. Can't believe I missed that.

--
Melvyn Sopacua

[Jani Tiainen]

I stumbled upon this while looking about this timing stuff:

http://www.html5rocks.com/en/tutorials/webperformance/basics/ 

Seemed slightly more verbose than W3C formal documentation.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

--
Jani Tiainen

- Well planned is half done, and a half done has been sufficient before...

[Larry Martell]

On Mon, Jun 25, 2012 at 9:04 PM, Andy McKay <an...@clearwind.ca> wrote:

Thanks Andy. Super cool, and pretty much just what I was looking for.
Seems to work fine in FF and Chrome, but in Safari I don't seem to
have access to the performance.timing data. Should that be there or do
I have do something to load or enable it?

-larry

[John]

Look at Boomerang:

http://lognormal.github.com/boomerang/doc/

John

[Larry Martell]

On Mon, Jun 25, 2012 at 9:04 PM, Andy McKay <an...@clearwind.ca> wrote:

Andy-

I'm trying to use the Navigation Timing package to measure how long a
page takes to be rendered. So that would be loadEventEnd-responseEnd,
however I am finding that loadEventEnd is always 0 for me, even though
I am accessing it from within a window.onload function, e.g:

window.onload = function() {
var t = performance.timing;
var render_time = parseInt(t['loadEventEnd']) - parseInt(t['responseEnd']);
}

What do I have to wait for before loadEventEnd gets set?


Thanks!
-larry

[Andy McKay]

> I'm trying to use the Navigation Timing package to measure how long a
> page takes to be rendered.

So you don't want to include all the lookups? Just the "rendering" part?

> So that would be loadEventEnd-responseEnd,
> however I am finding that loadEventEnd is always 0 for me, even though
> I am accessing it from within a window.onload function, e.g:
>
> window.onload = function() {
> var t = performance.timing;
> var render_time = parseInt(t['loadEventEnd']) - parseInt(t['responseEnd']);
> }
>
> What do I have to wait for before loadEventEnd gets set?

Stupid question, but when does the onload event occur, before or after
loadEventEnd? Running it in a console as I type this email, it gives
me a non-zero value.

[Andy McKay]

> Thanks Andy. Super cool, and pretty much just what I was looking for.
> Seems to work fine in FF and Chrome, but in Safari I don't seem to
> have access to the performance.timing data. Should that be there or do
> I have do something to load or enable it?

Sadly, Safari does not support this :( You'd have to try and fake
this. Boomerang does this.

https://github.com/yahoo/boomerang

[Larry Martell]

On Thu, Jul 5, 2012 at 10:48 PM, Andy McKay <an...@clearwind.ca> wrote:
>> I'm trying to use the Navigation Timing package to measure how long a
>> page takes to be rendered.
>
> So you don't want to include all the lookups? Just the "rendering" part?

Not sure what you mean by "lookups." I want to include everything
between when the server sends the data, to when the page is completely
generated (I'm using "rendered" to mean that). I'm trying to get a
metric on the delay the user experiences.

>> So that would be loadEventEnd-responseEnd,
>> however I am finding that loadEventEnd is always 0 for me, even though
>> I am accessing it from within a window.onload function, e.g:
>>
>> window.onload = function() {
>> var t = performance.timing;
>> var render_time = parseInt(t['loadEventEnd']) - parseInt(t['responseEnd']);
>> }
>>
>> What do I have to wait for before loadEventEnd gets set?
>
> Stupid question, but when does the onload event occur, before or after
> loadEventEnd?

From looking at
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html#processing-model
it seems that that loadEventEnd gets set when the onload event
completes. And from my testing it seems that window.onload fires
before that

> Running it in a console as I type this email, it gives me a non-zero value.

Yes, in a console I see that too. But programatically, I cannot seem
to capture loadEventEnd after it's set.

How did you do it in what you describe at
http://blog.mozilla.org/webdev/2012/01/06/timing-amo-user-experience/?

[Cal Leeming [Simplicity Media Ltd]]

Just FYI - New Relic does a fantastic job of browser speed graphing - but it is an expensive product.

[Larry Martell]

I have this working for our pages that execute all the javascript as
part of the page generation (i.e. all contained in or called from the
django template). But we have pages that have an onchange function
that gets triggered by something done in the template. In those the
loadEventEnd gets set before the onchange function runs. Any idea how
I can get the time the onchange function takes included in the
navigation timing?