Web - Timeline of a page load (Page Speed|Page Latency)

> (World Wide) Web - (W3|WWW) > Web - Browser

1 - Processing

HTML code is loaded by the browser in the order it appears in the file.

Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”.

Advertising

3 - Timeline

Advertising

3.1 - Ready State Status

The document.readyState property returns:

  • loading while the Document is loading, (ie if the document is associated with an HTML parser, an XML parser, or an XSLT processor)
  • interactive once it is finished parsing but still loading sub-resources,
  • and complete once it has loaded.

The readystatechange event fires on the Document object when this value changes.

Timeline Event Reference

4 - Example

Webpack

5 - API

6 - Control

Advertising

6.1 - Script

If JavaScript through the script element is placed before the body (without the HTML - Defer attribute attribute), it will therefore be loaded first and if it is supposed to affect the HTML in the body, it might not work, as the JavaScript would be loaded before the HTML it is supposed to work on.

Scripts in HTML have “run-to-completion” semantics, meaning that the browser will generally run the script uninterrupted before doing anything else (without the HTML - Defer attribute attribute), such as:

7 - Slow page

Probability of bounce by page latency.

(Slow pages lose user)

8 - User perception

  • 100 ms: user perceives as instantaneous
  • 1s: is about the upper limit of human flow of though. User loses the feeling direct feedback
  • 10s: Upper limit of attention. Feedback is important and the chance of context switch is high.

9 - Record

To record a page load, you would use a headless browser

10 - Documentation / Reference