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

Navigation

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:

• Page Load Metrics - Time to First Bit (TTFB)
• Time To Response End (TTRE)

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 ( HTML Latency)

• Render tree: Building the render tree from the DOM and CSSOM
• Box Model tree creation
• Web Page - Painting

Metrics:

• Largest ContentFul Paint (LCP) / Page (Load|Speed) Metric - First Contentful Paint (FCP)
• Page Load - Time To Interactive (TTI)

Event:

• With the performance timeline observer, you can responds for instance to LCP.
• With the requestAnimationFrame callback, you can execute a script between rendering frames.

Analytics Provider

Your web analytics provider should provide you with them.

Example for Google Analytics

Timing

See Page Load Event (Timing)

Browser API

You can get the metrics via:

• the performance timeline
• or a library such as perfume

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;
    }  
  },
});

HTTP Resource Request Optimization

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

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 ?

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

Bounce by latency

Probability of bounce by page latency.

(Slow pages lose user)

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.