Web - Page Load Time (Speed|Performance)

Browser

About

Goal: being interactive in under 5 seconds

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

Mobile web speeds matter.

One of the most important and basic metric that defines the performance of a website is Page Load time (perceived vs actual).

Pick a measurement tool (like Rigor, Lighthouse or PageSpeed Insights) and stick with it. Trends are more important than exact numbers.

Load Time

There are two numbers representing two different approaches how to measure the page load time:

  • 298ms. the load event (the red line) was fired in 298ms.
  • 343ms. The total elapsed time (from beginning of the first request till the end of the second/last request) is 343ms

The DOMContentLoaded event is the blue line.

Firebug Netpanel Explained

HTTP request phase:

  • DNS Lookup: DNS resolution time
  • Connecting: Elapsed time required to create a TCP connection.
  • Blocking: Elapsed time spent in a browser queue waiting for a network connection. Displayed only in the case where this situation happens (see also this post). Each browser has a limit for number of simultaneous connections to the same server when downloading a page. If the limit is reached, other resources have to wait in an internal browser queue till a connection is released.
  • Sending: Time needed to send request data to the server.
  • Waiting: Waiting for the response (till the first byte is received from the server).
  • Receiving: Time necessary to download response body.

Load performance Metrics

Load performance audits look at:

  • First meaningful paint (when is the main content of the page visible)
  • Speed Index (visual completeness)
  • Estimated Input Latency (when is the main thread available to immediately handle user input)
  • Time To Interactive (TTI) (how soon is the app usable & engagable). A time measure of when layout has stabilized, web fonts are visible and the main thread is available enough to handle user input.

Metrics

  • Under representative network (3G) & hardware conditions
  • Be interactive in < 5s on first visit & < 2s on repeat visits once a Service Worker is active.
  • First load (network-bound), Speed Index of 3,000 or less
  • Second load (disk-bound because SW): Speed Index of 1,000 or less.
  • Time to First Paint (TTFP)
  • Time to First Contentful Paint (TTFCP)
  • Time to First Meaningful Paint (TTFMP)

In Chrome:

  • DOMContentLoaded: blue line. The resources at the left or touching the blue line are blocking the DOM. They are known as render blocking resources.
  • total load time: red line

Load Performance Model

Measuring tool

How to improve the page load ?

Others

By country

Average speed of mobile internet. (Mbps) - (SpeedTest)

  • 1. Iceland: 72.5
  • 2. Norway: 67.8
  • 3. Qatar: 60.3
  • 4. Canada: 59.6
  • 6. Australia: 55.7
  • 28. France: 38.7
  • 33. Turkey: 34.7
  • 41. US: 31.2
  • 49. China: 28.9
  • 52. UK: 28.3
  • 54. Saudi: 27.1
  • 70. Brazil: 20.5
  • 77. Russia: 18.4
  • 111. India: 9.9

Documentation / Reference





Discover More
HTTP - Benchmark (Download - Get / Upload - Put request)

Web Server benchmarking. See also: hrbrmstr/speedtest Apache Bench is a command line program bundled with Apache HTTP...
HTTP Caches - All the web caches layer explained on one page

Cache is an important tool for data performance but may be creepy when controlling data consistency. Why am I seeing an old version, is it my code or is it the cache ? This article lists all the possible...
Speed Index Distribution
Lighthouse

GoogleChrome/lighthouselighthouse - a tool for auditing an app for PWA features and checking your app meets a respectable bar for web performance under emulated mobile conditions. can emulate a Nexus...
Search Engine Optimization (SEO)

Add structured data to your site to help Google understand the page: for example, a review, recipe, business, or event. rich results: and Meta description tags: Google sometimes uses search engine Too...
Web - Static Web Site

A Static website is a web application that is composed of static resources. (ie the web site doesn't need to generate dynamic pages at runtime) The first reason to create or generate a static website...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
Devtool Chrome Web Core Vital Overlay
Web Core Vital Metrics

The web core vitals are the three core page load metrics that a web page should focus on. Largest ContentFul Paint First Input Delay Cumulative Layout Shift: All layout shift cumulated You...



Share this page:
Follow us:
Task Runner