How fast is your website really?

@macklin_hartley

Spoiler Alert

@macklin_hartley

⬛ User-Centric Performance

⬛ Capture Metrics from End User Devices

⬛ Continuous Observability

@macklin_hartley

Page Load event

const start = Date.now();

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

@macklin_hartley

Performance Inspector

@macklin_hartley

Navigation Timing API

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

window.performance.timing

@macklin_hartley

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

User Centric PerformancE

Perceived Load Speed
Load Responsiveness
Runtime Responsiveness
Visual stability
Smoothness

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

User-Centric PerformancE

@macklin_hartley

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

TTFB

Time to First Byte

@macklin_hartley

FCP

First Contentful Paint

LCP

Last Contentful Paint

FID

First Input Delay

INP

Interaction to Next Paint

CLS

Cumulative Layout Shift

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.

@macklin_hartley

TTFB

Time to First Byte

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

@macklin_hartley

TTFB

Time to First Byte

GOOD

POOR

NEEDS
IMPROVEMENT

800ms

1.8s

https://web.dev/ttfb/

@macklin_hartley

TTFB

Time to First Byte

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

@macklin_hartley

FCP

First Contentful Paint

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

@macklin_hartley

FCP

First Contentful Paint

GOOD

POOR

NEEDS
IMPROVEMENT

1.8 sec

3.0 sec

https://web.dev/fcp/

@macklin_hartley

FCP

First Contentful Paint

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.

@macklin_hartley

LCP

Largest Contentful Paint

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

@macklin_hartley

LCP

Largest Contentful Paint

GOOD

POOR

NEEDS
IMPROVEMENT

2.5 sec

4.0 sec

https://web.dev/lcp/

@macklin_hartley

LCP

Largest Contentful Paint

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

@macklin_hartley

FID

First Input Delay

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

@macklin_hartley

FID

First Input Delay

GOOD

POOR

NEEDS
IMPROVEMENT

100ms

300ms

https://web.dev/fid/

@macklin_hartley

FID

First Input Delay

https://web.dev/inp/

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

@macklin_hartley

INP

Interaction to Next Paint

https://web.dev/inp/

@macklin_hartley

INP

Interaction to Next Paint

GOOD

POOR

NEEDS
IMPROVEMENT

200ms

500ms

https://web.dev/inp/

@macklin_hartley

INP

Interaction to Next Paint

https://web.dev/cls/

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

@macklin_hartley

CLS

Cumulative Layout Shift

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

@macklin_hartley

CLS

Cumulative Layout Shift

@macklin_hartley

CLS

Cumulative Layout Shift

GOOD

POOR

NEEDS
IMPROVEMENT

0.1

0.25

https://web.dev/cls/

@macklin_hartley

CLS

Cumulative Layout Shift

Core Web Vitals

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

@macklin_hartley

Atomicity

TTFB ≈ 50ms

FCP ≈ 500ms

LCP ≈ 1.625 sec

@macklin_hartley

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

https://web.dev/vodafone/

Case Studies

@macklin_hartley

Goals

@macklin_hartley

✅ User-Centric Performance

⬛ Capture Metrics from End User Devices

⬛ Continuous Observability

Ad-hoc Testing

Synthetic Monitoring

Real User Monitoring (RUM)

Capture Methods

@macklin_hartley

Ad-hoc Testing

Lighthouse for
Google Chrome

@macklin_hartley

Ad-hoc Testing

web.dev/measure

@macklin_hartley

Ad-hoc Testing

👍 Free

👍 No setup required

👎 Once-off, manual tests only

👎 Unlikely to represent real world traffic

@macklin_hartley

Synthetic Monitoring

Calibre

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

@macklin_hartley

Synthetic Monitoring

👍 CI/CD + scheduled automation

👍 Monitor change over time

👎 Not free

👎 Still not representative of real world traffic

@macklin_hartley

Browser Engine

Blink

75%

Webkit

21%

@macklin_hartley

Form Factor

Mobile

77%

Desktop

20%

@macklin_hartley

https://infrequently.org/2021/03/the-performance-inequality-gap/#mind-the-gap

GEEKBENCH 4 Single-Core

@macklin_hartley

The Performance INequality Gap

Moto E
710

iPhone 12
6940

~10x

https://infrequently.org/2021/03/the-performance-inequality-gap/#mind-the-gap

@macklin_hartley

Environment Changes Performance

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

@macklin_hartley

4g is widely available

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

@macklin_hartley

86.8%

4g is Pulling us forward

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

<1 second

~2.3 seconds

4 second budget

@macklin_hartley

4g Median Network Speed

18.0 Mb/s

177.0 Mb/s

~9.8x

https://www.speedtest.net/performance/australia/western-australia

@macklin_hartley

4g Median Network Latency

144 ms

10 ms

~14.4x

https://www.speedtest.net/performance/australia/western-australia

@macklin_hartley

Real User Monitoring (RUM)

@macklin_hartley

Real User Monitoring (RUM)

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

@macklin_hartley

Chrome User Experience Report

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

@macklin_hartley

👍 Free, publicly available data

👍 Real user monitoring

👎 Delayed, monthly aggregation

👎 Google Chrome devices only

Chrome User Experience Report

@macklin_hartley

Core Web Vitals Checker

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

@macklin_hartley

DDD Perth 2022
Sponsor Leaderboard

@macklin_hartley

Pos	Origin	TTFB	FCP	LCP ⇩	FID	INP	CLS






-	MakerX	-	-	-	-	-	-
-	Valrose	-	-	-	-	-	-
-	Sentient Computing	-	-	-	-	-	-

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

@macklin_hartley

Pos	Origin	TTFB	FCP	LCP ⇩	FID	INP	CLS
16	Mantel Group	1.1s	2.5s	3.71s	10ms	135ms	0.03
17	MOQdigital	2.02s	2.79s	3.76s	12ms	125ms	0.31
18	Microsoft	1.65s	3.46s	3.88s	14ms	202ms	0.06
19	Family Zone	2.05s	3.99s	4.08s	13ms	141ms	0 ⭐️
20	VGW 😳	1.73s	2.85s	4.12s	69ms	523ms	0.09
21	Insight	1.87s	7.87s‼️	7.45s‼️	13ms	232ms	0.06
-	MakerX	-	-	-	-	-	-
-	Valrose	-	-	-	-	-	-
-	Sentient Computing	-	-	-	-	-	-

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

@macklin_hartley

Pos	Origin	TTFB	FCP	LCP ⇩	FID	INP	CLS
7	CyberCX	902ms	1.33s	2.13s	12ms	130ms	0.03
8	Elastic	933ms	2.03s	2.19s	7ms	71ms	0.11
9	AWS	867ms	1.97s	2.83s	23ms	258ms	0.05
10	Bankwest	577ms⭐️	2.26s	2.9s	10ms	146ms	0.05
11	Auth0	1.11s	1.89s	3s	15ms	205ms	0.02
12	Telstra Purple	1.41s	2.76s	3.22s	5ms⭐️	84ms	0.05
13	Bunnings	2.26s‼️	2.94s	3.57s	127ms‼️	992ms‼️	0.13
14	Planit	2.06s	3.04s	3.66s	14ms	117ms	1‼️
15	Twilio	1.41s	2.92s	3.68s	16ms	222ms	0.04

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

@macklin_hartley

Pos	Origin	TTFB	FCP	LCP ⇩	FID	INP	CLS
🥇	Github	995ms	1.43s	1.73s⭐️	8ms	83ms	0.03
🥈	DDD Perth	1.15s	1.28s⭐️	1.81s	12ms	144ms	0.05
🥉	First Mode	994ms	1.63ms	1.93s	11ms	82ms	0.08
4	Keystart	1.11s	1.46s	1.97s	12ms	193ms	0.02
5	Versent⭐️	737ms	1.32s	2.07s	7ms	62ms⭐️	0⭐️
6	CyberCX	902ms	1.33s	2.13s	12ms	130ms	0.03

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

@macklin_hartley

Goals

@macklin_hartley

✅ User-Centric Performance

✅ Capture Metrics from End User Devices

⬛ Continuous Observability

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

@macklin_hartley

Can we Build It Ourselves?

web-vitals

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

@macklin_hartley

import { sendToAnalytics } from './';
import { getTTFB, getFCP, getLCP, getFID, getINP, getCLS } from 'web-vitals';

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

window.addEventListener(`securitypolicyviolation`, sendToAnalytics);
window.addEventListener(`error`, sendToAnalytics);

web-vitals

@macklin_hartley

export const sendToAnalytics = data => {

  const body = JSON.stringify(data);

  // Use navigator.sendBeacon() if available, fall back to fetch().
  (navigator.sendBeacon 
  	&& navigator.sendBeacon('/analytics', body)) 
  	|| fetch('/analytics', { 
      method: 'POST', keepalive: true, body,
    });
}

web-vitals

@macklin_hartley

import express from 'express';
import { Summary } from 'prom-client';

const ttfb = new Summary({ name: `ttfb_summary`, help: `summary for ttfb web vital`, labelNames: [`path`] });
const fcp =  new Summary({ name: `fcp_summary`,  help: `summary for fcp web vital`, labelNames: [`path`] });
const lcp =  new Summary({ name: `lcp_summary`,  help: `summary for lcp web vital`, labelNames: [`path`] });
const fid =  new Summary({ name: `fid_summary`,  help: `summary for fid web vital`, labelNames: [`path`] });
const inp =  new Summary({ name: `inp_summary`,  help: `summary for inp web vital`, labelNames: [`path`] });
const cls =  new Summary({ name: `cls_summary`,  help: `summary for cls web vital`, labelNames: [`path`] });

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