Beyond the bubble

Beyond the bubble Ben Schwarz @benschwarz !

calibreapp.com

<!doctype html> …  <link href=“main.css" rel=“stylesheet” /> …  <img src=“hero-header.jpg”
/> …  <script src=“common-vendor.js”> </script> <script src=“app.js” async> </script> ✅ HTML ✅ main.css ✅ webfont.woﬀ2 ✅ hero-header.jpg ✅ webfont-semibold.woﬀ2 ✅ common-vendor.js ✅ app.js

Project timeline Performance happens here

Project timeline “Hey, is the website fast?” “ohhhh fuck”

Project timeline “Let’s make this really great!” When performance should
happen

State of Global Connectivity

53.9% no internet access 46.1% internet access 7.4 Billion People

108 million 65% of the 1.2 Billion population no access
to the internet. new first time internet users in 2016.

Number of hours worked for 500mb of data $ Brazil
13 h % Indonesia 6 h & India 4 h ' Germany 1 h

1hr of work for: • 8 songs on Spotify •
6 minutes of Youtube • Less than 1 hour playing online games

1hr of work for: • Reading an article on theverge.com
with an empty cache (38 times)

Average ‘LTE’ speed ( Denmark 30.6 Mbps ' Germany 20.3
Mbps $ Brazil 19.68 Mbps ) Sweden 15.2 Mbps % Indonesia 8.79 Mbps & India 6.39 Mbps

0 Mbps 400 Mbps 7.2 Mbps Global Average Global Average
Connection Speed

60% of mobile connections are 2G.* *Global connectivity

Even if LTE is ‘available’, do not assume it will
be fast.

51.3% 48.7% Hand held is majority

OPPO Huawei vivo Apple Xaiomi China Samsung ¯\(°_o)/¯ Xaiomi Micromax
Lenovo India Samsung Apple Huawei Sony Ericsson LG Germany

Vendor Number of units Samsung 78.6 Million Apple 51.9 Million
Huawei 34.1 Million Oppo 30.9 Million Vivo 25.8 Million Others 158.3 Million Total 379.9 Million Global smartphone sales Q1 2017

Is there a single device that best represents “average”?

Moto G4 Quad-core CPU 2GB Ram 16 or 32Gb of
storage 1080x1920 13MP Camera

Enabling CPU Throttling in Chrome

Two versions of the internet The one we use daily
Cable Fibre Large corporates University Airplanes  AirBnBs  Coffee shop wifi  Conference wifi Lie-fi The one we don’t

We must stop optimising for $3000 computers with fast connections.

We must feel what our customers are feeling, train ourselves
how to diagnose common performance issues then fix them.

As an industry we need to stop putting our desires
and needs in front of the people we say we’re building for.

The Critical Request

A critical request is one that contains an asset that
is essential to the content within the user’s viewport.

Hey read this it’s really interesting

Making people wait for text to render The Web in
2017:

The fold is the user’s viewport. Yes, it’s real.

When did the fonts load?

Fonts load when: • The stylesheet targets an element with
a font declaration • The stylesheet has a corresponding @font-face declaration • Fonts are not requested until there is text to render

HTML request Fonts! CSS

3-5 seconds delay caused by webfonts 68% of sites use
web fonts Impact

✅ Use <link rel=“preload” /> ✅ Use font-display: swap; ✅
Have fallbacks that look similar ✅ Use woff2, woff where possible Webfont performance checklist

Looking beyond delivery

Delivery Parse Runtime + + Asset lifetime

We ignore the fact that we’re often blocking the main
thread. This matters.

Average size script on sites 453 KB

453 KB " 1,500 KB Compression rate of 2–3 times

560 Kb Compressed 2208 Kb Uncompressed

Desktop Moto G4 Parse / Compile in the wild 2
seconds!

http://bit.ly/your-site-without-js

Half the amount of data Half the number of requests
1.59Mb vs 3.41Mb 61 Requests vs 115 Requests

http://bit.ly/delete-js

Webpack Code splitting import(/* webpackChunkName: “MyComponent" */ ‘./MyComponent’) Deﬁne split
points using Dynamic Imports Webpack “magic comment”

Webpack Code splitting new webpack.optimize.CommonsChunkPlugin() Split dependencies & cache those
forever.

✅ Use code splitting ✅ Serve only what people need
✅ Test using ‘Real world’ conditions ✅ Monitor Parse & Compile time JS Runtime checklist

Improve

The metrics that we’re using to talk about performance tell
us nothing about user experience.

onLoad Speed Index onDomContentLoaded Metrics that don’t even

First Paint First Meaningful Paint Visual Complete Time to Interactive
Good metrics

User navigates First Paint Visually Complete First Contentful Paint First
Meaningful Paint

Human-centric metrics

Lighthouse npm install -g lighthouse

Run Lighthouse in Chrome

User navigates First Paint Visually Complete Short Javascript task Long
Javascript task (>50ms) 5 seconds without long tasks Calculating Time to Interactive

Time to Interactive in less than 5 seconds (on every
device)

“Time to first tweet”

Performance monitoring checklist ✅ Use metrics that describe user-experience ✅
Test using ‘Real world’ conditions ✅ Monitor continuously

Don’t try to keep people on your site for as
long as possible.

Help people achieve their goals and move on with their
lives.

Service worker cache PRPL Pattern Code splitting Modern image formats
HTTP/2 Reducing JS startup time with Prepack, Rollup, etc Use a CDN! Use SVG Set Cache headers

Wealthy Western Web

World Wide Web

Make the web fast for everyone

calibreapp.com

@benschwarz Cheers calibreapp.com

Beyond the bubble

Beyond the bubble

More Decks by Ben Schwarz

Featured

Transcript