Web - Timeline of a page load (Page Speed|Page Latency)
Table of Contents
About
Page load is the latency performance metrics that cumulates:
- TCP latency (ie how fast, HTTP will be delivered)
- and HTML latency (ie how fast a page will be rendered)
Processing
HTML code is loaded by the browser in the order it appears in the file. Ie the code on the page (ie HTML, CSS, Javascript, …) is processed top down
For instance, let's say you have the following script inlined in your HTML page.
<script>alert('Blocking alert');</script>
<img src="/_media/lenna.png" width="200px"/>
When the page is loaded, the browser will execute the alert, the alert window will pop up and the page will stop loading until the alert window is closed. Ie in this case, you will not see the image
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”.
Articles Related
Timeline / State
The main page state of the loading process are available in the readyState property
- Page Load - Navigation (Browsing) - The user begins a page load with a navigation.
- Phase: Browser - Page loading - Executing a HTTP request and getting the document
- Phase: DOM and CSSOM building
- Event: DomContentIoaded event is fired (same as DOM - Document Loaded - onload event ?) when the document is loaded and parsed
- Page Load - Content Load Time - The amount of time to fully load the HTML and build the DOM (external resources like images & stylesheets not yet loaded).
- Page Speed - Load time - The amount of time to complete all the processing and resource (images, styles, etc) loading for the page.
- Phase: Browser - Rendering
- Render tree: Building the render tree from the DOM and CSSOM
- Box Model tree creation
- Phase: Web Page - Painting
There is no rendering event that notify of the first rendering but as the rendering complete after the first two animation frames rendering of the loaded event, you can simulate the event with the requestAnimationFrame web api function.
Example:
function renderingCompleted() {
console.log("Rendering completed")
}
function renderingStarted() {
console.log("Rendering started");
requestAnimationFrame(renderingCompleted);
}
window.addEventListener("load", function () {
requestAnimationFrame(renderingStarted);
});
- Output:
Example
Webpack
API
Statistics
Control
- Javascript: HTML - Defer attribute - The defer attribute of a script will defer its execution at the end of a page load.
- Css and Javascript: preload
- Image: Web Resources - Lazy Loading
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:
- firing further events
- or continuing to parse the document.
Slow page
Icon / Progress while loading
The icon while loading is known as a Throbber.
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.
Record
To record a page load, you would use a headless browser
Utility
- side-by-side-pageload.js - Load 2 or more pages side-by-side to visually see the difference in page load. Optional desktop viewport and throttling settings.
- https://web.dev/vitals-tools-workflow/ - A performance-focused workflow based on Google tools