(artist: Hiroshi Nagai)

(Paul Irish, Elizabeth Sweeny: Google I/O 2019)

The speed it takes to load a page:   

How easy it is to find what I'm looking for:     

How well the site fits my screen:     

How simple the site is to use:     

How attractive the site looks:     

75%

66%

61%

58%

24%

(Paul Irish, Elizabeth Sweeny: Google I/O 2019)

1s to 3s​ : the probability of bounce increases

1s to 5s : the probability of bounce increases

1s to 6s : the probability of bounce increases

1s to 10s : the probability of bounce increases

32%

90%

106%

123%

Pinterest saw a

sign-up increase by reducing the user's perceived wait time by        

15%

-40%

(Source: A Pinterest Progressive Web App Performance Case Study)

(source: the humanbenchmark study)

Mental Chronometry

The average human response time is

(Chromium Dev Tools profiling twitter.com)

Goal: ~3s

Total:

Humans

(Google's optimal mobile performance benchmark)

There's less of a latency budget than you think.

(Microsoft Research: Applied Sciences Group, 2012)

Goal: ~3s

Total: 50ms

Humans

Hardware

Goal: ~3s

Total: 2.6s

Humans

Hardware

(Mach Metrics: Average time to first bite on mobile in 2021)
(Cloudflare: Serverless cold start average)

Average page load time on mobile:

(Google: average mobile page load time)

Goal: ~3s

Total: 3.9s

Humans

Hardware

Web Apps

Goal: ~3s

Total: 12.2s

Humans

Hardware

Web Apps

Goal: ~3s

Total: 14.9s

Humans

Hardware

Web Apps

Goal: ~3s

Total: 15.3s

Humans

Hardware

Web Apps

Goal: ~3s

Total: 16.3s

Humans

Hardware

Web Apps

Other relevant latencies are

adds                  of latency to the average packet (500b)

(Noction: Network latency and its effect on application performance)

Africa

Middle East

Europe

LATAM

North America

(Heavy Traffic)

Telegraf

Time-Series Data Polling & Collection -or- Incoming Data Source Handler

InfluxDB
A high-write-frequency Time-Series DataBase

Chronograf

Data Visualization Platform (Dashboards)

Kapacitor
Alert Monitoring (using thresholds or inactivity)

A Data Source

A Data Store and/or Handler

(TSDB ingestion service or API)

A Data Visualization Tool

where you can set alerts

(signups, posts, logins, etc)

(Photograph by Will Van Overbeek)

InfluxDB OSS API

Telegraf

Grafana

Prometheus

Chronograf

+

Chronograf + Kapacitor

Like PerformanceObserver

github.com/DataDog/browser-sdk

https://github.com/DataDog/datadog-agent

github.com/DataDog/browser-sdk/blob/main/packages/rum-core/src/rumEvent.types.ts

and get in the flow of

Real User Monitoring