Lead UI Developer
at Field Intelligence
Anna Migas
Google Developer Expert

Anna Migas
@szynszyliszys

Anna Migas
@szynszyliszys
The secret web
performance metric
no one is talking about

“Web performance refers to the
speed in which web pages are
downloaded and displayed
on the user's web browser“
wikipedia.org/wiki/Web_performance

web performance

User experience connected to the
web performance

User experience connected to the
web performance
from a perspec
ti
ve of an average
user in Africa

Why should you care?
Africa is far.

It is a problem for anyone:
1. Using an old device
2. Located in a rural area
3. Using an enterprise app that is
hard to op
ti
mise

Most web performance
metrics and resources
are developed with a
privileged user in mind.

h
tt
ps://web.dev/tbt/

h
tt
ps://wpostats.com/2020/11/05/revelry-bounce-rate-conversion.html

For some users, the
good web performance
is not achievable at all.

“At a high level, there are two primary
performance bo
tt
lenecks on the web:
1. Networking - the round-trip
ti
me to acquire
an asset or data payload from a remote server
2. End-user Device Compute - the amount of
computa
ti
onal overhead required on the
end-user's device”
h
tt
ps://www.webperf.
ti
ps/
ti
p/cached-js-misconcep
ti
ons/

“At a high level, there are two primary
performance bo
tt
lenecks on the web:
1. Networking - the round-trip
ti
me to acquire
an asset or data payload from a remote server
2. End-user Device Compute - the amount of
computa
ti
onal overhead required on the
end-user's device”
h
tt
ps://www.webperf.
ti
ps/
ti
p/cached-js-misconcep
ti
ons/

“At a high level, there are two primary
performance bo
tt
lenecks on the web:
1. Networking - the round-trip
ti
me to acquire
an asset or data payload from a remote server
2. End-user Device Compute - the amount of
computa
ti
onal overhead required on the
end-user's device”
h
tt
ps://www.webperf.
ti
ps/
ti
p/cached-js-misconcep
ti
ons/

“At a high level, there are two primary
performance bo
tt
lenecks on the web:
1. Networking - the round-trip
ti
me to acquire
an asset or data payload from a remote server
2. End-user Device Compute - the amount of
computa
ti
onal overhead required on the
end-user's device”
h
tt
ps://www.webperf.
ti
ps/
ti
p/cached-js-misconcep
ti
ons/

Latency
Latency is generally considered to be the
amount of
ti
me it takes from when a request is
made by the user to the
ti
me it takes for the
response to get back to that user.
h
tt
ps://developer.mozilla.org/en-US/docs/Web/Performance/

Latency in most parts of
Africa is really high.
High latency means long
Time To First Byte
(TTFB).

Latency in most parts of
Africa is really high.
High latency means long
Time To First Byte
(TTFB).

“While a good TTFB doesn’t
necessarily mean you will have a
fast website, a bad TTFB almost
certainly guarantees a slow one.”
— Harry Roberts
h
tt
ps://csswizardry.com/2019/08/
ti
me-to-
fi
rst-byte-what-it-is-and-why-it-ma
tt
ers/

“At a high level, there are two primary
performance bo
tt
lenecks on the web:
1. Networking - the round-trip
ti
me to acquire
an asset or data payload from a remote server
2. End-user Device Compute - the amount of
computa
ti
onal overhead required on the
end-user's device”

Devices used
“The country [Nigeria] is considered a mobile-
fi
rst market where infrastructure and online
usage development skipped wide-ranging
desktop PC adop
ti
on and went straight to
mobile internet usage via inexpensive
smartphones instead.”
h
tt
ps://www.sta
ti
sta.com/sta
ti
s
ti
cs/183849/internet-users-nigeria/

“Time spent in Parse/Compile can
often be 2–5x as long on phones
as on desktop.”
— Addy Osmani
h
tt
ps://medium.com/reloading/javascript-start-up-performance-69200f43b201

h
tt
ps://medium.com/reloading/javascript-start-up-performance-69200f43b201

Secret web
performance metric:
Pa
ti
ence

How long are you willing
to wait for the website to
load, before you decide
it is broken?
Pa
ti
ence metric:

If everything is slow,
what can we do?

1. Visibility of system
status
“The design should always keep users
informed about what is going on, through
appropriate feedback within a reasonable
amount of
ti
me.”
h
tt
ps://www.nngroup.com/ar
ti
cles/ten-usability-heuris
ti
cs/

1. Visibility of system
status
“The design should always keep users
informed about what is going on, through
appropriate feedback within a reasonable
amount of
ti
me.”
h
tt
ps://www.nngroup.com/ar
ti
cles/ten-usability-heuris
ti
cs/

Make sure to give user informa
ti
on
as fast as possible:
• What is going on
• How long it can take
• Once error occurs (and what can be done)

Take into account digital literacy
• Use simple language
• Discourage damaging ac
ti
ons (“Do you
really want to navigate out and stop the
ongoing download?”)
• Explain consequences of ac
ti
ons (for
example “pull to refresh”)

2. Render ini
ti
al
informa
ti
on ASAP
Make sure there is some ini
ti
al content visible
le
tti
ng user know what is going on quick.

3. Leverage Progressive
Enhancement
Make it possible to achieve the most crucial
ac
ti
on
fi
rst, add extra features and
fi
reworks
on top of that.

4. Avoid request
chaining and roundtrips
Consider using browser hints.

A. Preconnect
Eliminate many costly roundtrips from your
request path (for example establish
connec
ti
on with CDN used later)
<link href="https://cdn.domain.com" rel="preconnect"
crossorigin>

B. Prefetch
Fetch resources and store them in cache.
Use for resources that might be needed for
next naviga
ti
on.
<link rel="prefetch" href="/images/big.jpeg">

C. Preload
Load late-discovered resources early.
<link rel="preload" href="font.woff2" as="font"
type="font/woff2" crossorigin>

5. Lazy load resources
that are not cri
ti
cal
Don’t force user to download resources they
might never discover.
<img src="image.png" loading="lazy" alt=“alt text”
width="200" height="200">

6. Op
ti
mise images you
ship
Images are usually the heaviest resources on
the web.

Op
ti
mise image loading
• Use correct and modern formats
• Use tools to op
ti
mise size:
• h
tt
ps://jakearchibald.github.io/svgomg/
• h
tt
ps://squoosh.app/
• h
tt
ps://imageop
ti
m.com

Op
ti
mise image loading
• Add size / aspect ra
ti
o to avoid layout
shifts
.img-class { aspect-ratio: 16 / 9; }
.img-class {
width: 100px;
height: 20px;
}

7. Learn about network
resource hints
Network Informa
ti
on API helps web
applica
ti
ons to access informa
ti
on about the
user's network.
navigator.connection.saveData
h
tt
ps://developer.mozilla.org/en-US/docs/Web/API/Network_Informa
ti
on_API

8. Limit third party
resources
Third party resources can delay ini
ti
al load of
the page.
<script async src="external.js"></script>
<script defer src="external.js"></script>

8. Limit third party
resources
h
tt
ps://partytown.builder.io/

9. Test for back/forward
cache
If a user clicks on a naviga
ti
on item by
mistake, it can minimise the
ti
me to navigate
back.

h
tt
ps://developer.chrome.com/docs/devtools/applica
ti
on/back-forward-cache/
h
tt
ps://web.dev/bfcache/

10. Consider using
Service Worker
If you expect your page to be visited on regular
basis, you can cache resources be
tt
er.
h
tt
ps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

11. Avoid crea
ti
ng too
many layers
Each layer created by the browser takes
device’s resources.

h
tt
ps://blog.logrocket.com/eliminate-content-repaints-with-the-new-layers-panel-in-
chrome-e2c306d4d752/

12. Minimise website
repaints
While interac
ti
ng with the page, a lot of
interac
ti
ve resources can force browser to
repaint content.

h
tt
ps://web.dev/simplify-paint-complexity-and-reduce-paint-areas/

Summary
★ Let user know what is going on
★ Load ini
ti
al informa
ti
on early
★ Progressively enhance your website
★ Avoid request chaining and use resource
hints
★ Lazy load content below the fold
★ Op
ti
mise images
★ Leverage Network Informa
ti
on API

Summary
★ Limit third party resources (and if you need
them use async loading)
★ Op
ti
mise for back/forward cache
★ Consider using Service Worker if applicable
★ Avoid using too many layers and repain
ti
ng
content

Resources
• MDN: Understanding latency
h
tt
ps://developer.mozilla.org/en-US/docs/Web/Performance/
Understanding_latency
• Interac
ti
ve map of network speed worldwide
h
tt
ps://www.cable.co.uk/broadband/speed/worldwide-speed-
league/
• The African web ecosystem - a paper
h
tt
ps://www.caida.org/catalog/papers/
2018_exploring_analysing_african_web/
exploring_analysing_african_web.pdf

Resources
• web.dev: Establishing early connec
ti
ons with resource hints
h
tt
ps://web.dev/preconnect-and-dns-prefetch/
• web.dev: Preloading cri
ti
cal assets
h
tt
ps://web.dev/preload-cri
ti
cal-assets/
• web.dev: Loading third party assets
h
tt
ps://web.dev/e
ffi
ciently-load-third-party-javascript/

Resources
• The psychology of web performance
h
tt
ps://blog.uptrends.com/web-performance/the-psychology-of-
web-performance/
• Designer's guide to perceived web performance
h
tt
ps://marvelapp.com/blog/a-designers-guide-to-perceived-
performance/

Thank you!

Vote for your fav session