An Inclusive Web is Fast by Default

Simon Hearne

Web Performance Architect


We treat connectivity as a utility

65% of people in the developing world do not have access to fast internet

it's 20% in the developed world

Connecting for Inclusion: Broadband Access for All. The World Bank.

Performance is key to inclusion

Player page was 1,200kB

Feather was under 100kB

Page Weight Matters - Chris Zacharias

Feather was slower...

LCP data from CRUX for m.youtube.com, July 2021

Connection data from CRUX for m.youtube.com, July 2021

Performance is a distribution

LCP data from CRUX for m.youtube.com, July 2021

Even within the US

Understanding Where the Internet Isn't Good Enough Yet - Cloudflare

So was Feather a success?

What we can learn from Feather

  • Being faster by default is more inclusive
  • Performance data can be misleading

Reasons for low quality internet

  • 1 in 2 US households have no broadband
  • 15% of the UK has no 4G coverage
  • Natural disasters
  • Travel (connection & roaming charges)
  • Low power / battery saver mode
  • No access to modern devices

How many of these do you experience while designing / developing an app?

But our data shows...

  • What about 'ghost bounces'?
  • 88% of Firefox users block GA(1)
  • 40% of Safari users block GA(1)
  • 40% more blocking in developing world(2)
  • CRUX only has data for Chrome

There are many reasons why not all users are represented in your data.

1. 58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics 2. Ad Blocker Usage and Demographic Statistics in 2021

Building fast, inclusive experiences

  1. Understanding the problem
  2. Designing for speed
  3. Adapting to the user
  4. Convincing the boss

Understanding the Problem

Users are not averages

@RyanTownsend on Twitter

Modern Metrics Help!

  • Score from Lab data
  • CWV* are UX proxies
  • Field data from real users
  • 75th %ile for Field data
  • Lab is emulated MotoG4

PSI - m.youtube.com * Core Web Vitals

Estimated Cost in WPT


Estimated Cost in WPT

Test Result

Estimated Cost in WPT

What Does My Site Cost? m.youtube.com

Compare Speed with Treo

Treo Comparison

Use the Tools!

Understand the benefits and drawbacks,
then use regularly to track speed

Designing for Speed

Tweet by NPR

Lite sites for quick loading

Fast by default?

awesome-lite-sites on GitHub

Performance must be baked in

Project Timeline

The Path to Performance - Katie Kovalcin

Project Timeline

The Path to Performance - Katie Kovalcin

Project Timeline

The Path to Performance - Katie Kovalcin

The Exponential Cost of Fixing Bugs

Progressive Enhancement FTW

Breaking News at 1000ms - Patrick Hamann


  • Lazy-load hidden images
  • Low-quality placeholders
  • Use modern formats (WEBP / AVIF)
  • Send the right sized image


  • Minimal client-side JS
  • Use native browser features
  • Measure impact on real devices

Painting Fast

  • Don't depend on video
  • Identify & inline critical CSS
  • No blocking assets (JS / CSS)
  • Prioritize key assets
  • preload known critical assets

Tools can Help

PSI - m.youtube.com

Adapting to the User

Data Saver

Delivering Fast and Light Applications with Save-Data

Network Info API

Network Information API

// navigator.connection
NetworkInformation {
	downlink: 5.4
	effectiveType: "4g"
	onchange: null
	rtt: 150
	saveData: false

Client Hints

GET /index.html

accept-ch: Downlink,RTT,Device-Memory,Save-Data,DPR,Width

GET /image.jpg

downlink: 6.75
rtt: 100
dpr: 2
width: 1025
device-memory: 8

Adapting to Users with Client Hints

Responsive Images

  • Use a service to resize & for modern formats
  • Use markup to deliver the right image
  • Limit resolution to 2x DPI

Responsive Images

<img src="/image.jpg" alt=".." loading="eager" decoding="async"
width="1920" height="1080" srcset="
/image_600.jpg 600w, ... /image.jpg 1920w" sizes="
(min-width: 1920px) 500px,
(min-width: 1280px) 33.333vw,
(max-width: 895px) 83.333vw,

Performance Budgets

The Path to Performance - Katie Kovalcin

A/B Testing

  • Use server-side tooling if possible
  • Separate production and pre-production tests
  • Remove 0% tests

Understand Speed @ Design

Convincing the Boss

WPO Stats

Buy-In Methods

Say pleeeease
10% chance of success
Use global stats
20% chance of success
Use your own data
30% chance of success
Say "SEO" repeatedly
50% chance of success
Competitive benchmarking
60% chance of success

* numbers may vary

But seriously...

Getting buy-in is difficult,
especially after a project starts.

Include speed & performance budgets in proposals,
early designs and success criteria.

Tips to Build Empathy in Design

1. Use Chrome's throttling features

2. 2G Tuesdays

Building for emerging markets: The story behind 2G Tuesdays

3. Use a low-spec device for testing

Amazon UK Best Sellers, updated hourly.

4. Browse with JavaScript disabled

5. Test with third-parties

Performance is all about empathy

The future is already here,
it's just not evenly distributed

William Gibson

Speed = Opportunities

Tweet by Akhil Jayaprakash


Thank you 🙏