An Inclusive Web is Fast by Default

🤔

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

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?

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⁽¹⁾
• 40% of Safari users block GA⁽¹⁾
• 40% more blocking in developing world⁽²⁾
• 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

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

Images

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

JavaScript

• 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,
    500px">
						

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

• GTM & Google Analytics without JavaScript
• Remove third-parties with high JS cost
• Defer third-parties until after page load
• Have a third-party budget

Performance is all about empathy

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

William Gibson

Speed = Opportunities

Tweet by Akhil Jayaprakash

Resources