How fast is your website, really?

https://macklin.me

Macklin Hartley

https://macklin.me

Spoiler Alert

⬛ User-Centric Performance

⬛ Capture Metrics from End User Devices

⬛ Continuous Monitoring

https://macklin.me

Not in this Talk

❌ Web Performance Improvement

https://macklin.me

Page Load event

const start = Date.now();

window.addEventListener('load', () => {
  console.log({ load: Date.now() - start });
});

https://macklin.me

Performance Inspector

https://macklin.me

Navigation Timing API

https://www.w3.org/TR/navigation-timing-2/

window.performance.timing

https://macklin.me

Adobe

Airbnb Inc

Akamai Technologies

Alibaba Group

Apple, Inc.

Baidu, Inc.

BBC

Cloudflare

Facebook

Fastly

Google LLC

Microsoft Corporation

Mozilla Foundation

Salesforce

Shopify

The New York Times

Wikimedia Foundation

https://www.w3.org/webperf/

W3C Web Performance Working Group

https://macklin.me

User Centric PerformancE

https://macklin.me

Perceived Load Speed
Load Responsiveness
Runtime Responsiveness
Visual stability
Smoothness

https://web.dev/user-centric-performance-metrics/

User-Centric PerformancE

https://macklin.me

https://web.dev/user-centric-performance-metrics/

TTFB

Time to First Byte

FCP

First Contentful Paint

LCP

Last Contentful Paint

FID

First Input Delay

INP

Interaction to Next Paint

CLS

Cumulative Layout Shift

https://macklin.me

https://developer.mozilla.org/en-US/docs/Glossary/time_to_first_byte

the time between the browser requesting a page and when it receives the first byte of information from the server.

TTFB

Time to First Byte

https://macklin.me

https://www.mindspun.com/blog/time-to-first-byte-ttfb/

TTFB

Time to First Byte

https://macklin.me

GOOD

POOR

NEEDS
IMPROVEMENT

800ms

1.8s

https://web.dev/ttfb/

TTFB

Time to First Byte

https://macklin.me

https://web.dev/fcp/

the time from when the page starts loading to when any part of the page's content is rendered on the screen...

FCP

First Contentful Paint

https://macklin.me

https://macklin.me/7-useful-tools-for-monitoring-web-performance-user-experience

FCP

First Contentful Paint

https://macklin.me

GOOD

POOR

NEEDS
IMPROVEMENT

1.8 sec

3.0 sec

https://web.dev/fcp/

FCP

First Contentful Paint

https://macklin.me

https://calibreapp.com/blog/largest-contentful-paint

...tracks how many seconds it takes for your page’s most data-intensive, above-the-fold element to load.

LCP

Largest Contentful Paint

https://macklin.me

https://macklin.me/7-useful-tools-for-monitoring-web-performance-user-experience

LCP

Largest Contentful Paint

https://macklin.me

GOOD

POOR

NEEDS
IMPROVEMENT

2.5 sec

4.0 sec

https://web.dev/lcp/

LCP

Largest Contentful Paint

https://macklin.me

https://web.dev/fid/

the time from when a user first interacts with a page[...] to the time when the browser is actually able to begin processing event handlers...

FID

First Input Delay

https://macklin.me

https://requestmetrics.com/web-performance/first-input-delay

FID

First Input Delay

https://macklin.me

GOOD

POOR

NEEDS
IMPROVEMENT

100ms

300ms

https://web.dev/fid/

FID

First Input Delay

https://macklin.me

https://web.dev/inp/

...represents a page's overall responsiveness by measuring all click, tap, and keyboard interactions made with a page.

INP

Interaction to Next Paint

https://macklin.me

https://web.dev/inp/

INP

Interaction to Next Paint

https://macklin.me

GOOD

POOR

NEEDS
IMPROVEMENT

200ms

500ms

https://web.dev/inp/

INP

Interaction to Next Paint

https://macklin.me

https://web.dev/cls/

[a calculated score] for every unexpected layout shift that occurs during the entire lifespan of a page...

CLS

Cumulative Layout Shift

https://macklin.me

https://macklin.me/7-useful-tools-for-monitoring-web-performance-user-experience

CLS

Cumulative Layout Shift

https://macklin.me

CLS

Cumulative Layout Shift

https://macklin.me

GOOD

POOR

NEEDS
IMPROVEMENT

0.1

0.25

https://web.dev/cls/

CLS

Cumulative Layout Shift

https://macklin.me

Core Web Vitals

https://developers.google.com/search/blog/2020/11/timing-for-page-experience

https://macklin.me

Interactivity
Interaction to Next Paint (INP)

Loading
Largest Contentful Paint (LCP)

Visual Stability
Cumulative Layout Shift (CLS)

Mobile Friendly

HTTPS

No Intrusive Interstitials

Search signals

for web page

experience

Core
Web
Vitals

Atomicity

TTFB ≈ 290ms

FCP ≈ 500ms

LCP ≈ 1.625 sec

https://csswizardry.com/2022/08/measure-what-you-impact-not-what-you-influence/

https://macklin.me

https://web.dev/vodafone/

Vodafone Case Study

https://macklin.me

Goals

✅ User-Centric Performance

⬛ Capture Metrics from End User Devices

⬛ Continuous Monitoring

https://macklin.me

Ad-hoc Testing

Synthetic Monitoring

Real User Monitoring (RUM)

Capture Methods

https://macklin.me

Ad-hoc Testing

Lighthouse for
Google Chrome

https://macklin.me

Ad-hoc Testing

web.dev/measure

https://macklin.me

Ad-hoc Testing

👍 Free, no setup required

👎 Once-off, manual tests only

👎 Unlikely to represent real world traffic

https://macklin.me

Synthetic Monitoring

Calibre

https://calibreapp.com/features/pull-request-reviews

https://macklin.me

Calibre

👍 CI/CD + scheduled automation

👍 Monitor change over time

👎 Not free, although competitively priced

👎 Still not representative of real world traffic

https://macklin.me

Global Mobile Market Share

https://macklin.me

https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022

Global Browser Market Share

https://macklin.me

https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022

Low End vs High End Performance

Low End Device
Motorola Moto E13

10x

https://macklin.me

https://infrequently.org/2024/01/performance-inequality-gap-2024/

High End Device
Apple iPhone 15 Pro

https://macklin.me

Geekbench 5 Single-core

https://infrequently.org/2024/01/performance-inequality-gap-2024/

https://macklin.me

Geekbench 5 Multi-core

https://infrequently.org/2024/01/performance-inequality-gap-2024/

The Performance INequality Gap

https://macklin.me

# of devices

performance

50th percentile
Apple iPhone 11 (2019)
Samsung Galaxy S20 Ultra (2021)

The Performance INequality Gap

https://macklin.me

# of devices

performance

75th percentile
Motorola Moto E13 (2023)
Google Pixel 4a (2020)
Apple iPhone 6 (2015)
Samsung Galaxy S6 (2015)

The Performance INequality Gap

https://macklin.me

# of devices

performance

25% of people receive
a poorer experience

4g is widely available

https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022

86.8%

https://macklin.me

Network Budgets

https://www.speedtest.net/global-index/united-states

~1 second

~2.3 seconds

4 second budget

https://macklin.me

less than 1 second

Median Mobile Network Speed

46.26 Mb/s
Reno, NV

181.74 Mb/s
Glendale, AZ

390%

https://www.speedtest.net/global-index

https://macklin.me

Median Mobile Network Latency

https://macklin.me

https://www.speedtest.net/global-index

101 ms
Anchorage, AK

39 ms
Plano, TX

35%

Performance is Situational

Alex Russel - Progressive Performance (Chrome Dev Summit 2016)
https://www.youtube.com/watch?v=4bZvq3nodf4

https://macklin.me

Real User Monitoring (RUM)

https://macklin.me

Real User Monitoring (RUM)

Capturing performance metrics directly from devices in the real world to observe differences in functionality, reliability, and responsiveness.

https://macklin.me

Chrome User Experience (CRUX) Report

https://developers.google.com/web/tools/chrome-user-experience-report

https://macklin.me

👍 Free, publicly available data

👎 Frustrating setup process

👎 Delayed, monthly aggregation

👎 Google Chrome devices only

Chrome User Experience (CRUX) Report

https://macklin.me

Core Web Vitals Checker

https://calibreapp.com/tools/core-web-vitals-checker

https://macklin.me

https://calibreapp.com/tools/core-web-vitals-checker

https://macklin.me

👍 On-demand access

👍 Zero configuration

👎 Same upsides and downsides as CrUX Report

Core Web Vitals Checker

https://macklin.me

DDD MELBOURNE Sponsor Leaderboard

Sponsor	TTFB	FCP	LCP ↑	FID	INP	CLS
🥇 Liberty	🟢 542ms	🟢 1.18s	🟢 1.53s	🟢 14ms	🟢 180ms	🟡 0.14
🥈 Umbraco	🟢 450ms	🟢 948ms	🟢 1.58s	🟢 5ms	🟢 111ms	🟢 0.02
🥉 Github	🟡 955ms	🟢 1.37s	🟢 1.69s	🟢 6ms	🟢 98ms	🟢 0.06
Luminary	🟢 789ms	🟢 1.29s	🟢 1.84s	🟢 8ms	🟢 82ms	🟢 0.03
Webjet	🟢 440ms	🟢 1.26s	🟢 1.86s	🟢 23ms	🟡 459ms	🟢 0.08
Qoria	🟢 579ms	🟢 1.48s	🟢 1.88s	🟢 5ms	🟢 44ms	🟢 0.00
Kodez	🟡 1.15s	🟢 1.69s	🟢 1.96s	⚪	🟢 49ms	🟢 0.01
DevExpress	🟢 686ms	🟢 1.62s	🟢 2.15s	🟢 3ms	🟢 47ms	🟢 0.00
Octopus Deploy	🟡 1.11s	🟡 2.43s	🟡 2.5s	🟢 5ms	🟢 62ms	🟢 0.03
SSW	🟡 1.4s	🟡 2.32s	🟡 2.77s	🟢 10ms	🟢 78ms	🟢 0.02
DDD Melbourne	🔴 2.35s	🟡 2.51s	🟡 2.94s	🟢 8ms	🟢 79ms	🟢 0.01
Kaleida	🟡 1.56s	🔴 3.35s	🟡 3.53s	⚪	⚪	🟢 0.00
Netwealth	🔴 2.63s	🔴 3.81s	🔴 4.15s	🟢 2ms	🟢 55ms	🟢 0.01
Insight	🟡 1.6s	🔴 5.18s	🔴 5.71s	🟢 8ms	🟢 128ms	🟡 0.21
JustDigitalPeople	⚪	⚪	⚪	⚪	⚪	⚪
The Sizzle	⚪	⚪	⚪	⚪	⚪	⚪

Sponsor	TTFB	FCP	LCP ↑	FID	INP	CLS
🥇 Liberty	🟢 542ms	🟢 1.18s	🟢 1.53s	🟢 14ms	🟢 180ms	🟡 0.14
🥈 Umbraco	🟢 450ms	🟢 948ms	🟢 1.58s	🟢 5ms	🟢 111ms	🟢 0.02
🥉 Github	🟡 955ms	🟢 1.37s	🟢 1.69s	🟢 6ms	🟢 98ms	🟢 0.06
Luminary	🟢 789ms	🟢 1.29s	🟢 1.84s	🟢 8ms	🟢 82ms	🟢 0.03
Webjet	🟢 440ms	🟢 1.26s	🟢 1.86s	🟢 23ms	🟡 459ms	🟢 0.08
Qoria	🟢 579ms	🟢 1.48s	🟢 1.88s	🟢 5ms	🟢 44ms	🟢 0.00
Kodez	🟡 1.15s	🟢 1.69s	🟢 1.96s	⚪	🟢 49ms	🟢 0.01
DevExpress	🟢 686ms	🟢 1.62s	🟢 2.15s	🟢 3ms	🟢 47ms	🟢 0.00
Octopus Deploy	🟡 1.11s	🟡 2.43s	🟡 2.5s	🟢 5ms	🟢 62ms	🟢 0.03
SSW	🟡 1.4s	🟡 2.32s	🟡 2.77s	🟢 10ms	🟢 78ms	🟢 0.02
DDD Melbourne	🔴 2.35s	🟡 2.51s	🟡 2.94s	🟢 8ms	🟢 79ms	🟢 0.01
Kaleida	🟡 1.56s	🔴 3.35s	🟡 3.53s	⚪	⚪	🟢 0.00
Netwealth	🔴 2.63s	🔴 3.81s	🔴 4.15s	🟢 2ms	🟢 55ms	🟢 0.01
Insight	🟡 1.6s	🔴 5.18s	🔴 5.71s	🟢 8ms	🟢 128ms	🟡 0.21
JustDigitalPeople	⚪	⚪	⚪	⚪	⚪	⚪
The Sizzle	⚪	⚪	⚪	⚪	⚪	⚪

Sponsor	TTFB	FCP	LCP ↑	FID	INP	CLS
🥇 Liberty	🟢 542ms	🟢 1.18s	🟢 1.53s	🟢 14ms	🟢 180ms	🟡 0.14
🥈 Umbraco	🟢 450ms	🟢 948ms	🟢 1.58s	🟢 5ms	🟢 111ms	🟢 0.02
🥉 Github	🟡 955ms	🟢 1.37s	🟢 1.69s	🟢 6ms	🟢 98ms	🟢 0.06
Luminary	🟢 789ms	🟢 1.29s	🟢 1.84s	🟢 8ms	🟢 82ms	🟢 0.03
Webjet	🟢 440ms	🟢 1.26s	🟢 1.86s	🟢 23ms	🟡 459ms	🟢 0.08
Qoria	🟢 579ms	🟢 1.48s	🟢 1.88s	🟢 5ms	🟢 44ms	🟢 0.00
Kodez	🟡 1.15s	🟢 1.69s	🟢 1.96s	⚪	🟢 49ms	🟢 0.01
DevExpress	🟢 686ms	🟢 1.62s	🟢 2.15s	🟢 3ms	🟢 47ms	🟢 0.00
Octopus Deploy	🟡 1.11s	🟡 2.43s	🟡 2.5s	🟢 5ms	🟢 62ms	🟢 0.03
SSW	🟡 1.4s	🟡 2.32s	🟡 2.77s	🟢 10ms	🟢 78ms	🟢 0.02
DDD Melbourne	🔴 2.35s	🟡 2.51s	🟡 2.94s	🟢 8ms	🟢 79ms	🟢 0.01
Kaleida	🟡 1.56s	🔴 3.35s	🟡 3.53s	⚪	⚪	🟢 0.00
Netwealth	🔴 2.63s	🔴 3.81s	🔴 4.15s	🟢 2ms	🟢 55ms	🟢 0.01
Insight	🟡 1.6s	🔴 5.18s	🔴 5.71s	🟢 8ms	🟢 128ms	🟡 0.21
JustDigitalPeople	⚪	⚪	⚪	⚪	⚪	⚪
The Sizzle	⚪	⚪	⚪	⚪	⚪	⚪

Goals

✅ User-Centric Performance

✅ Capture Metrics from End User Devices

⬛ Continuous Monitoring

https://macklin.me

	User Centric Performance	Capture Metrics from Real Users	Continuous Monitoring
window.onload()	⬛	⬛	⬛
Google Lighthouse	✅	⬛	⬛
Calibre	✅	⬛	⬛
CrUX Report	✅	✅	⬛
Web Vitals Checker	✅	✅	⬛
???	✅	✅	✅

https://macklin.me

Continuous Monitoring

Request Metrics

https://requestmetrics.com

https://macklin.me

👍 Near real-time continuous monitoring

👍 Detailed reporting with zero sampling

👎 Can be expensive ($200/mo for 1 million sessions)

Request Metrics

https://macklin.me

Could we
Build it ourselves?

Prometheus + Grafana

Grafana

Prometheus

GET /metrics

POST /analytics

Analytics Service

https://macklin.me

web-vitals

https://github.com/GoogleChrome/web-vitals

https://macklin.me

import webVitals from 'web-vitals';

webVitals.getTTFB(sendToAnalytics);
webVitals.getFCP(sendToAnalytics);
webVitals.getLCP(sendToAnalytics);
webVitals.getFID(sendToAnalytics);
webVitals.getINP(sendToAnalytics);
webVitals.getCLS(sendToAnalytics);

export const sendToAnalytics = 
  data => navigator.sendBeacon('/analytics', JSON.stringify(data));

FrontEnd

https://macklin.me

import { Summary } from 'prom-client';

const ttfb = new Summary({ name: `ttfb`, labelNames: [`path`] });
const fcp =  new Summary({ name: `fcp`, labelNames: [`path`] });
const lcp =  new Summary({ name: `lcp`, labelNames: [`path`] });
const fid =  new Summary({ name: `fid`, labelNames: [`path`] });
const inp =  new Summary({ name: `inp`, labelNames: [`path`] });
const cls =  new Summary({ name: `cls`, labelNames: [`path`] });

BackEnd

https://macklin.me

express()
  .post(`/analytics`, (req, res) => {
    const { path, body: { metric, value } } = req;
    switch (metric) {
      case `TTFB`: ttfb.labels(path).observe(value); break;
      case `FCP`:  fcp.labels(path).observe(value);  break;
      case `LCP`:  lcp.labels(path).observe(value);  break;
      case `FID`:  fid.labels(path).observe(value);  break;
      case `INP`:  inp.labels(path).observe(value);  break;
      case `CLS`:  cls.labels(path).observe(value);  break;
    }
    res.status(200).send({});
  })
  .listen(8000);