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

Browser

About

Page load is the latency performance metrics that cumulates:

You may be also interested by the web speed page (possible duplicate)

Timeline / State / Phase / Moment

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.

Page Loading Key Moment

The main page state of the loading process are available in the readyState property

The user begins a page load with a navigation:

  • a click on a link
  • an URL in the address bar.

This navigation will make the browser execute an HTTP request to retrieve the HTML page.

HTML Loading

Browser - Page loading - The HTTP response has been received.

Metrics:

HTML Parsing

Top down

HTML code is processed 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

Demo: Click on the button to start loading the HTML

<script>alert('The image is not yet downloaded because this alert is blocking. Click on the Ok button to close the alert, to resume the load process and load the image');</script>
<img src="/_media/lenna.png" width="200px"/>

Explanation:

  • When the page is loaded, the browser execute the alert, the alert window will pop up and the page stops loading until the alert window is closed. Ie in this case, you will not see the image until you close the alert.

Parsing: Object Model build (DOM)

In this phase, the browser will build the DOM document from the HTML document received in the response.

Event:

Metrics:

  • 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).

Loading Resources

In this phase, the browser will fetch resources present in the HTML page.

If the linked resources are:

  • css stylesheet: they will be added to the CSS Object Model and trigger a re-rendering
  • javascript: they will be executed depending on the async or defer attribute
  • image: they will trigger a re-rendering and may cause a layout shift if the width and height attributes are not present or had bad values
  • iframe: they will trigger another page load.

CSSOM Building

In this phase, the browser will transform all CSS (inline and stylesheet) into a CSSOM (tree)

Fully loaded

The page is loaded. Image may still download. The page is not yet fully rendered.

Metrics:

  • Page Speed - Load time - The amount of time to complete all the processing and resource (images, styles, etc) loading for the page.

Event:

  • load event: occurs on a element or on the page (ie window)

Rendering

Browser - Rendering

Metrics:

Event:

Metrics

Analytics Provider

Your web analytics provider should provide you with them.

Example for Google Analytics

Page Load Latency

Timing

See Page Load Event (Timing)

Browser API

You can get the metrics via:

Example:

// All results are reported to the analyticsTracker callback
new Perfume({
  analyticsTracker: options => {
    const { metricName, data, eventProperties, navigatorInformation, vitalsScore, } = options;
    switch (metricName) {
       case 'fp':
           console.log('firstPaint duration: '+data);
           return;
       case 'fcp':
           console.log('firstContentfulPaint duration: '+data);
           return;
       case 'lcp':
           console.log('largestContentfulPaint duration: '+data);
           return;
       default: 
          return;
    }  
  },
});

Control / Solution

The below table lists the parameters that have an impact on the speed of your page load.

Resources Javascript Css Stylsheet Image / Video TCP Network Description
Preload x x Load non-critical Javascript or CSS
Async/Defer x Loading in parallel
Lazy loading x Load only when the element is going into the viewport
Tree shaking/ pruning x x Delete code that is not relevant
Minify x x Compress the code
Responsive Image x Use and advertise the best image (size and format)
HTTP accept encoding x x Compress the HTTP content (compress, gzip, …)
Edge/Cdn server x x x x Serve the page and resources close to the user
HTTP cache / Bundle / Inline x x x x Reduce the number of resource requests (Bundle or incorporate in your page)

HTTP Resource Request Optimization

HTTP request for resources have a latency cost. You can see their effect in the devtool network tab.

Impact Of The Number Of Http Request On Page Load Devtool

In this case, even if the resources (css, js, img) were not modified and in the cache, the browser goes through a conditional cache validation request. And even if the server returns a 304 Not Modified status, the network round trips (and server response) add latency.

To eliminate this network requests, the solution are:

  • to cache them without revalidation. (ie without any revalidate in cache-control (example without Cache-Control: proxy-revalidate))
  • to bundle the script resources (javascript and css) into one file
  • or to incorporate the resources in the page if they are tiny enough via the style (css) and script tag (javascript)

Server Location

On a world scale, the location of the server has a great impact on the response time.

In a single server architecture can you guess where the server is located ?

Distance Effect On Response Time

This takes into account only the first byte of the response (network performance), it may add up to seconds when the full page is loaded.

Solution: Edge/Cdn server

  • static cdn: you put a cdn proxy cache solution in front of your web server (cloudflare, ..)
  • dynamic cdn: you locate multiple web servers and redirect the browser request via DNS or Anycast solution

User Effect

Bounce by latency

Probability of bounce by page latency.

(Slow pages lose user)

Page Load Time Latency Vs Bounce

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

States

The Page lifecycle API 1) formalizes two new lifecycle states:

  • Frozen: lifecycle state for CPU suspension. This means that the freeze steps algorithm was called
  • Discarded: means that the discard algorithm was called

Documentation / Reference





Discover More
Page Load Time Latency Vs Bounce
(Web|Mobile) Analytics - Bounce (Rate)

A bounce is normally a single-page session. Other definition may add without user interaction (click, forms,...) Probability of bounce by page latency. (Slow...
Chrome Devtool Network 304
304 - Not Modified HTTP Status

The 304 Not Modified indicates to the browser that the resource was not changed and that it can serve it from its cache
Above The Fold Example
Ad - Placement

A placement is a property that groups together Ad Unit in order to facilitate targeting It's used to group pages that share similar content. Homepage ads: for all the homepages in your network...
Header Bidding Expert On Weather
Advertising - Header Bidding (Advance or Pre-bidding)

Header bidding is a mediation that consists of an auction that takes place (by default outside) of the ad server via the header of a web page. When the page loads, the header script loads before anything...
Browser
Browser - DOMContentLoaded event (page load)

DomContentLoaded is a page load event that signals that the parser has finished the construction of the DOM. The resources at the left or touching the blue line are blocking the construction of the DOM....
Browser
Browser - Fetching Resources (Request/Response)

This article is fetching (http request/response) in the browser. User agents can implement a variety of transfer protocols to fetch resources such as: HTTP : , ... Form FTP ... rendering...
Browser
Browser - Page and User Performance API

The performance timeline is an API to measure user or browser page load performance. Page load performance Example with By entry types:
Browser
Browser - Page loading

Page loading is a status of the timeline of a page load. When a page is loaded, it means that the browser: has received a HTTP response from an request and has parsed the content (during the parse...
Browser
Browser - Rendering

Rendering is a page load phase that consists of generating an output that can be read by the client. Render tree building stage: The CSSOM and DOM trees are combined into a render tree. Before the...
CSS - Style Sheet (Script|File) - Stylesheet

A stylesheet is a list of rules that specify the presentation of a source document. The stylesheet is a combination of : the external files with the suffix css defined via the HTML link element the...



Share this page:
Follow us:
Task Runner