Logging page render times?

JavaScript
1

Hey everyone,

I am looking for a javascript function that can log the following information for each pageview:

  1. The total page rendering time (not php script execution time, but the time at which the entire page is rendered from the user’s perspective - all images loaded, ads served etc)

  2. The URL of the page

  3. The browser used to access the page

  4. The country the page was accessed from

The script should then store the information in a database via an AJAX call after it’s been collected.

It sounds like a tall order, but it will help me get a picture of how fast or slow my site feels depending on where you live (e.g. how far you are from the server), what browser you’re using, and which pages are the slowest to render (keep in mind this is not script execution time or query time, but literally the time at which the page starts to render, to when it finishes rendering).

Is that possible?

2

If you sign up with Google Analytics, they will track all of that for you and more.

3

I’ve been using GA for years and I’ve never seen anything that records rendering time. Am I missing some hidden feature?

4

Yes indeed. Here’s a good article on tracking web page load times

5

I’ve looked at that, but it seems like an awkward way of displaying & organizing that data. It would be so much easier if it was a standard GA metric that showed up whenever you viewed content.

Will it work with custom reporting so I can view average value against browser type, visitor type, and country?

6

That I have no direct experience with, but others might have something else to add here.