The purpose of this document is to outline the main metrics we use when discussing various end-user performance measurements such as "page speed".
Fig 1) A diagram we have been using in conversations to help illustrate the various events and how they inter-relate.
- FIRST BYTE
- DOC READY/DOM CONTENT EVENT
- SCRIPTS END
- MODEL FETCH
- LOAD EVENT
What is it?
First byte loaded (or Time to First Byte) is when the browser receives it's first byte in response to a request for a page.
How does it work?
The browser receives it's first byte in response to a request for a page.
How can it be measured?
With curl:
curl -o /dev/null -w "Connect: %{time_connect} TTFB: %{time_starttransfer} Total time: %{time_total} \n" https://www.modcloth.com
With js: window.performance.timing.responseStart
What is it?
When the browser has received the full page and instantiated the DOM.
How does it work?
There is no standard cross-browser way of doing this so it's a little different between browsers and even JS frameworks. In jQuery it listens out for the DOMContentLoaded event to come from the browser. Some browsers fire a onreadystatechange event instead. BUT!!! jQuery merely just uses this event as an opportunity to check if document.body exists. If it does, then jQuery's internal state is changed to be "ready". If not, it checks again every 1ms.
See REF
How can it be measured?
window.performance.timing.domContentLoadedEventStart or window.performance.timing.domContentLoadedEventEnd
What is it?
The point at which out scripts have been evaluated and executed. At this point the site should be functional, if not "complete". I.e. some third party scripts important to the business might not have loaded, but everything needed for the end user should be present and ready to go.
How does it work?
No "event" exists. This is somewhat arbitrary and therefor not an agreed "standard".
How can it be measured?
As no actual event is fired by the browser we would have to conceive of our own event and a mechanism to know when to trigger it.
What is it?
This is the point at which ajax requests triggered by our scripts (that fired requests as they were loaded) complete. Eg. personalization header.
How does it work?
No "event" exists. This is somewhat arbitrary and specific to our own site.
How can it be measured?
As no actual event is fired by the browser we would have to conceive of our own event and a mechanism to know when to trigger it.
What is it?
The point at which the browser has finished processing requests (ours and third parties) to load, fetch, (and possibly execute) assets such as images, stylesheets and scripts.
How does it work?
Similar to how doc ready works. The browser fires a 'load' event when it reaches this point.
How can it be measured?
window.performance.timing.loadEventStart