2010

a decade.
aea front-end focus.
performance.
iphone 6 plus.
retina screen.
https://en.wikipedia.org/wiki/Retina_display
what?
retina images.
velocity.
https://www.youtube.com/results?search_query=o%27reilly+velocity+conference&sp=CAI%253D
performance conference.
user experience.
dealers of ux.
delivery of ux.
A Decade Of

DisciplinedDelivery
A Retrospective Of Performance Practices.
henri.
henri.
@henrihelvetica.
torontocanada.
#aeafef.
📖
once upon a time…
web performance tuning:
speeding up the web.

https://www.amazon.ca/Web-Performance-Tuning-Speeding/dp/059600172X
is your modem on?
is your modem on?
is your modern connected?
is your modem on?
is your modern connected?
is the browser hanging?
is your modem on?
is your modern connected?
is the browser hanging?
are you using a slow browser?
is your modem on?
is your modern connected?
is the browser hanging?
are you using a slow browser?
buy a better connection.
steve souders.

http://stevesouders.com
back-end.
yes. the back-end.
5% of time was spent
in the back-end.
🤔
95% of wait time
was spent in the
front-end.
golden rule:
80-90% of
performance is in
the front-end.
YSlow.

http://yslow.org
http://yslow.org
https://www.amazon.ca/High-Performance- https://www.amazon.ca/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=sr_1_1?
Web-Sites-Essential/dp/0596529309 dchild=1&keywords=even+faster+websites&qid=1597615357&sr=8-1
the rules.
let’s start:
1. make fewer http requests.
“the most secure
server is the one that
doesn’t exist.”
- phil hawksworth.
https://youtu.be/JBEn6tMMHqQ
“the quickest request
in the one that’s never
made.”
designers need to heed.
designers need to heed.
content begets requests.
 total http reqs 📲
180
2011 2019

135

90

45

0
p10 p25 p50 p75 p90

https://httparchive.org/reports/state-of-the-web#pctHttps
1. make fewer http requests.
image sprites, inlining images.
combining scripts.

today: ✅
2. use a CDN.
2. use a CDN.
help with the issue of latency.
caching static resources at the edge world wide.
Out of 468 million requests in
the HTTP Archive, 48% were
not served from a CDN.


@paulcalvano.
https://twitter.com/paulcalvano/status/1167143641124675586
2. use a CDN.
help with the issue of latency.
caching static resources at the edge world wide.
more important than ever.

today: ✅
3. add expires headers
3. add expires headers
cache-control.
3. add expires headers
all about caching static content.
also a check on resource freshness.
cache is king
cache is king & queen.
cache is king & queen.
L1. 0.5 nanoseconds.
L3. x60 slower.
ram. x200 slower.
ssd. x300 000 slower.
📶 x300 000 000 slower (150 ms).
https://vimeo.com/238596080
- @yoavweiss
 lighthouse caching score
40

30
% sites

20

10

0
<10% 10%-39% 40%-79% 80%-99% 100%

score
 byte savings
60

45
% sites

30

15

0
<1 MB 1-2 MB 2-3 MB 3-4 MB >4 MB

https://httparchive.org/reports/state-of-images#optimizedImages
3. add expires headers
all about caching static content.
also a check on resource freshness.
caching is ca-ching! 💰

today: ✅
4. gzip components

https://en.wikipedia.org/wiki/Gzip
the foundation of the whole
internet is compression.

- colt mcanlis

https://www.amazon.ca/Understanding-Compression-Data-Modern-Developers/dp/1491961538
4. gzip components
resource size.
4. gzip components
resource size.
transfer size.
4. gzip components
resource size.
transfer size.
Netflix saw a 43% decrease in
their bandwidth bill after
turning on gzip.

https://wpostats.com/2015/11/04/netflix-bandwidth.html
4. gzip components
essential to tranfser resources.
welcomed where available.
 lighthouse compression score
70

60

50
% sites

40

30

20

10

0
<10% 10%-39% 40%-79% 80%-99% 100%

score
4. gzip components
essential to tranfser resources.
welcomed where available.
massive savings when well tuned.

today: ✅
5. put style sheets at the top
5. put style sheets at the top
once believed order mattered little.
IE was leading browser at the time.
non progressive loading, fouc.
user experience > *
what we needed:

know nothing has crashed.

how long the load will take.
some content to consume.
5. put style sheets at the top
once believed order mattered little.
IE was leading browser at the time.
non progressive loading, fouc.
critical css, async loading came into play.

today: ✅
6. put scripts at the bottom
6. put scripts at the bottom
👀

synchronous script blocked DOM construction.
async, defer all came later.
scripts became/are complicated.
 total js payload 📲
1200
2011 2019

900

600

300

0
p10 p25 p50 p75 p90

https://httparchive.org/reports/state-of-javascript#bytesJs
6. put scripts at the bottom
👀

synchronous script blocked DOM construction.
async, defer all came later.
scripts became/are complicated.
today: ❌
7. avoid css expressions
7. avoid css expressions
we complain about css-in-js: js-in-css.
this was a IE hack. 

deprecated.

today: ❌
8. make js and css external.
8. make js and css external.
rule 2, 3, 4 (cdn + caching, compression)

proven to be fast, still.

today: ✅
9. reduce dns lookups.

https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings
9. reduce dns lookups.
less requests, less lookups.
they don’t come free: expensive.
cost is result of many variables.
9. reduce dns lookups.
less requests, less lookups.
they don’t come free: expensive.
cost is result of many variables.

today: ✅
10. minification
“The best way to
compress redundant or
unnecessary data is to
eliminate it altogether.”
https://developers.google.com/web/fundamentals/performance/
optimizing-content-efficiency/optimize-encoding-and-transfer
- ilya gregorik
10. minification
like chroma sub sampling, but for text files.
reducing the amount of text.

today: ✅
11. avoid redirects

https://www.matthewedgar.net/do-redirects-add-to-website-speed/
11. avoid redirects
loosely connected to rule 1, 9.
redirects are also expensive, esp on mobile.

today: ✅
12. remove duplicate scripts

today: ✅
13. optimize images.
13. optimize images.
connected to rule 1, 2 and 3.
format codecs had room to improve.
more media, more weight, more costs.
13. optimize images.
recent trends according to HTTP Archive.
 image bytes 📲 https://httparchive.org/reports/state-of-images

2016 2020

5000

3750

2500

1250

0
p10 p25 p50 p75 p90
 image requests 📲 https://httparchive.org/reports/state-of-images

2016 2020

110

82.5

55

27.5

0
p10 p25 p50 p75 p90
 possible image optim savings 📲
2017 2020

1000

750

500

250

https://httparchive.org/reports/state-of-images

0
p10 p25 p50 p75 p90
13. optimize images.

today: ✅
14. splitting payloads.
“nobody likes waiting.”
- houssien djirdeh

https://web.dev/reduce-javascript-payloads-with-code-splitting/
3… 2… 1… gone.
 javascript payload 📲
2016 2020

1400

1050

700

350

0
p10 p25 p50 p75 p90
14. splitting payloads.

today: ✅
brief summary.
keeping reqs low.
using CDNs
caching.
gzipping.

https://en.wikipedia.org/wiki/Brotli
reducing dns lookups.
image compression.
splitting javascript payloads.
the tipping point.
 how little things can
make a big difference.
2007
https://www.youtube.com/watch?v=MnrJzXM7a6o
 another
tipping point.
2016
“mobile and tablet internet
usage exceeds desktop for first
time worldwide.”
- stat counter, nov. 1 2016

https://gs.statcounter.com/press/mobile-and-tablet-internet-
usage-exceeds-desktop-for-first-time-worldwide
device share 2019:

mobile: 52.48%

desktop: 44.59%

https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
77% of pages load in 10 seconds
or more, with the avg page
loading in 19 seconds.
– DoubleClick by Google

bc22e_The_Need_for_Mobile_Speed_-_FINAL_1.pdf
https://www.youtube.com/watch?v=S57VkPQ9ZjI
2020
3rd significant
tipping point.
p🦠ndemic.
https://www.bloomberg.com/news/articles/2 020-03-19/netflix-to-cut-streaming-traffic-in-europe-to-relieve-networks
 internet traffic during covid—19
% traffic Δ % dl speed Δ
120

90

60

30

-30

-60

* + , - . / / /
https://www.fastly.com/blog/how-covid-19-is-affecting-internet-performance
www//: essential service.
gov.uk.
“we know that if a government
service performs badly, users get
frustrated and abandon the
service. usually, this means the
service will fail.”
Matt Hobbs. 

Head of FED at Government Digital Service, UK.
https://technology.blog.gov.uk/2020/07/24/why-you-should-hire-a-frontend-developer/
covid19.ca.gov.
https://news.alpha.ca.gov/prioritizing-users-in-a-crisis-building-covid19-ca-gov/
“our goal is to make
COVID19.CA.gov fast and easy to
use on any kind of hardware or
with any level of bandwidth.”

Aaron Hans. 

Tech lead @CAdotgov, project lead @openoakland
https://news.alpha.ca.gov/prioritizing-users-in-a-crisis-building-covid19-ca-gov/
youtube discovered that 10%
of their mobile clients were
12 yrs old +.

Steven Robertson, Engineer, YouTube

https://engineering.fb.com/video-engineering/video-scale-2019/
facebook eng. has a lib called
year-class. reason? many new
model cellphones use old
hardware.

https://engineering.fb.com/android/year-class-a-classification-system-for-android/
“a site with bad performance is
exponentially worse on a low
end device.”

Aaron Hans. 

Tech lead @CAdotgov, project lead @openoakland
https://news.alpha.ca.gov/prioritizing-users-in-a-crisis-building-covid19-ca-gov/
google lighthouse.

https://github.com/GoogleChrome/lighthouse
modern metrics.
first contentful paint. https://web.dev/first-contentful-paint/

time to interactive. https://web.dev/interactive/

speed index. https://web.dev/speed-index/

total blocking time. https://web.dev/lighthouse-total-blocking-time/

largest contentful paint. https://web.dev/lighthouse-largest-contentful-paint/

cumulative layout shift.
 https://web.dev/cls/

first input delay. https://web.dev/fid/

first contentful paint.
time to interactive.

100
speed index.
total blocking time.
largest contentful paint.
cumulative layout shift.

first input delay.
web vitals.

https://web.dev/vitals/
first contentful paint.
time to interactive.
speed index.
total blocking time.
largest contentful paint.
cumulative layout shift.

first input delay.
first contentful paint.
time to interactive.
speed index.
total blocking time.
largest contentful paint.
cumulative layout shift.

first input delay.
first contentful paint.
time to interactive.
speed index.
total blocking time.
largest contentful paint.
cumulative layout shift.

first input delay.
first contentful paint.
time to interactive.
speed index.
total blocking time.
largest contentful paint.
cumulative layout shift.

first input delay.
https://web.dev/lighthouse-largest-contentful-paint/
largest contentful paint.


metric reports the render time of
the largest image or text block
visible within the viewport.
https://web.dev/cls/
cumulative layout shift.


the sum total of all individual layout
shift scores for every unexpected
layout shift that occurs during the
entire lifespan of the page.
https://web.dev/fid/
first input delay.



measures the time from when a
user first interacts with a page,
to the time when the browser is
actually able response to that
interaction.
web vitals.
💨
“resource loading is a delicate
dance that can be delightful, but
also destructive due to device
damper and limitations.”
“resource loading is a delicate
dance that can be delightful, but
also destructive due to device
damper and limitations.”
- henri helvetica 

olimpik medalist, hteeML spek rider, auth-or.
performance is complicated.
the performance is a process
that is now one part proof, one
part perception.
performers of magic, and
providers of metrics.
tooling.
firebug.
Yslow.
google lighthouse.
webpagetest.

https://www.webpagetest.org
browser devtools.
2020
coda
the web started as an
academic platform. just
plain text.
javascript was then
introduced later that
same year: december
1995.
the web of 2010 isn’t
the web of 2020.
the web of 2030?
merci.