SlideShare a Scribd company logo
1 of 51
Download to read offline
Lead UI Developer

at Field Intelligence
Anna Migas
Google Developer Expert
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 perspective 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 optimise
Most web performance
metrics and resources
are developed with a
privileged user in mind.
For some users, the
good web performance
is not achievable at all.
“At a high level, there are two primary
performance bottlenecks on the web:

1. Networking - the round-trip time to acquire
an asset or data payload from a remote server

2. End-user Device Compute - the amount of
computational overhead required on the
end-user's device”
https://www.webperf.tips/tip/cached-js-misconceptions/
“At a high level, there are two primary
performance bottlenecks on the web:

1. Networking - the round-trip time to acquire
an asset or data payload from a remote server

2. End-user Device Compute - the amount of
computational overhead required on the
end-user's device”
https://www.webperf.tips/tip/cached-js-misconceptions/
“At a high level, there are two primary
performance bottlenecks on the web:

1. Networking - the round-trip time to acquire
an asset or data payload from a remote server

2. End-user Device Compute - the amount of
computational overhead required on the
end-user's device”
https://www.webperf.tips/tip/cached-js-misconceptions/
“At a high level, there are two primary
performance bottlenecks on the web:

1. Networking - the round-trip time to acquire
an asset or data payload from a remote server

2. End-user Device Compute - the amount of
computational overhead required on the
end-user's device”
https://www.webperf.tips/tip/cached-js-misconceptions/
Latency
Latency is generally considered to be the
amount of time it takes from when a request is
made by the user to the time it takes for the
response to get back to that user.
https://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
https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/
“At a high level, there are two primary
performance bottlenecks on the web:

1. Networking - the round-trip time to acquire
an asset or data payload from a remote server

2. End-user Device Compute - the amount of
computational overhead required on the
end-user's device”
Devices used
“The country [Nigeria] is considered a mobile-
first market where infrastructure and online
usage development skipped wide-ranging
desktop PC adoption and went straight to
mobile internet usage via inexpensive
smartphones instead.”
https://www.statista.com/statistics/183849/internet-users-nigeria/
“Time spent in Parse/Compile can
often be 2–5x as long on phones
as on desktop.”

— Addy Osmani
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
Secret web
performance metric:

Patience
How long are you willing
to wait for the website to
load, before you decide
it is broken?
Patience 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 time.”
https://www.nngroup.com/articles/ten-usability-heuristics/
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 time.”
https://www.nngroup.com/articles/ten-usability-heuristics/
Make sure to give user information
as fast as possible:

• What is going on

• How long it can take

• Once error occurs (and what can be done)
The secret web performance metric no one is talking about
The secret web performance metric no one is talking about
Take into account digital literacy

• Use simple language

• Discourage damaging actions (“Do you
really want to navigate out and stop the
ongoing download?”)

• Explain consequences of actions (for
example “pull to refresh”)
2. Render initial
information ASAP

Make sure there is some initial content visible
letting user know what is going on quick.
The secret web performance metric no one is talking about
The secret web performance metric no one is talking about
3. Avoid request
chaining and roundtrips 

Consider using browser hints.
A. Preconnect

Eliminate many costly roundtrips from your
request path (for example establish
connection 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 navigation.

<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>
4. Lazy load resources
that are not critical

Don’t force user to download resources they
might never discover.
<img src="image.png" loading="lazy" alt=“alt text”
width="200" height="200">
5. Learn about network
resource hints

Network Information API helps web
applications to access information about the
user's network.
navigator.connection.saveData
https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
6. Limit third party
resources

Third party resources can delay initial load of
the page. Load them asynchronously using
async/defer whenever possible.
<script async src="external.js"></script>
<script defer src="external.js"></script>
7. Test for back/forward
cache

If a user clicks on a navigation item by
mistake, it can minimise the time to navigate
back.
https://developer.chrome.com/docs/devtools/application/back-forward-cache/
https://web.dev/bfcache/
8. Avoid creating too
many layers

Each layer created by the browser takes
device’s resources.
https://blog.logrocket.com/eliminate-content-repaints-with-the-new-layers-panel-in-
chrome-e2c306d4d752/
9. Minimise website
repaints

While interacting with the page, a lot of
interactive resources can force browser to
repaint content.
https://web.dev/simplify-paint-complexity-and-reduce-paint-areas/
Summary

★ Let user know what is going on

★ Load initial information early

★ Avoid request chaining and use resource
hints

★ Lazy load content below the fold

★ Leverage Network Information API

★ Limit third party resources (and if you need
them use async loading)
Summary

★ Optimise for back/forward cache

★ Avoid using too many layers and repainting
content
Resources

• MDN: Understanding latency

• Interactive map of network speed worldwide

• web.dev: Establishing early connections with
resource hints

• web.dev: Preloading critical assets

• web.dev: Loading third party assets

• The psychology of web performance

• Designer's guide to perceived web performance

• The African web ecosystem - a paper
Anna Migas

@szynszyliszys
Thank you!

More Related Content

What's hot

EAT: Have We Been Looking At It Backwards
EAT: Have We Been Looking At It BackwardsEAT: Have We Been Looking At It Backwards
EAT: Have We Been Looking At It BackwardsEdwardZiubrzynski1
 
Brighton SEO April 2022 - Talk by Nicole Osborne - Explode Your Agency Growth
Brighton SEO April 2022 - Talk by Nicole Osborne  - Explode Your Agency Growth Brighton SEO April 2022 - Talk by Nicole Osborne  - Explode Your Agency Growth
Brighton SEO April 2022 - Talk by Nicole Osborne - Explode Your Agency Growth Nicole Osborne
 
Crawling, indexation & the impact on performance | Brighton SEO
Crawling, indexation & the impact on performance | Brighton SEOCrawling, indexation & the impact on performance | Brighton SEO
Crawling, indexation & the impact on performance | Brighton SEOMartin Sean Fennon
 
How to improve Core Web Vitals on a WordPress website
How to improve Core Web Vitals on a WordPress websiteHow to improve Core Web Vitals on a WordPress website
How to improve Core Web Vitals on a WordPress websiteIndigo Tree Digital
 
Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023Nitin Manchanda
 
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...LazarinaStoyanova
 
Internal Linking - The Topic Clustering Way edited.pptx
Internal Linking - The Topic Clustering Way edited.pptxInternal Linking - The Topic Clustering Way edited.pptx
Internal Linking - The Topic Clustering Way edited.pptxDixon Jones
 
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)Kristina Azarenko
 
How to Use Search Intent to Dominate Google Discover
How to Use Search Intent to Dominate Google DiscoverHow to Use Search Intent to Dominate Google Discover
How to Use Search Intent to Dominate Google DiscoverFelipe Bazon
 
Expediente Xpath #SEOnderground 2021
Expediente Xpath  #SEOnderground 2021Expediente Xpath  #SEOnderground 2021
Expediente Xpath #SEOnderground 2021MJ Cachón Yáñez
 
Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...
Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...
Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...CroudLocal
 
Is your site accessible? No? Why the F*CK not?!
Is your site accessible? No? Why the F*CK not?!Is your site accessible? No? Why the F*CK not?!
Is your site accessible? No? Why the F*CK not?!BillieHyde
 
Crawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to KnowCrawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to KnowSallyR7
 
How to go after the long tail keywords (and why it matters!)
How to go after the long tail keywords (and why it matters!)How to go after the long tail keywords (and why it matters!)
How to go after the long tail keywords (and why it matters!)PaolaDidone
 
Using Search Intent in our Link Building Efforts
Using Search Intent in our Link Building EffortsUsing Search Intent in our Link Building Efforts
Using Search Intent in our Link Building EffortsChris Czermak
 
¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...
¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...
¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...Aleyda Solís
 
Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...
Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...
Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...BethBarnham1
 
Martin McGarry - SEO strategy c/o England manager Gareth Southgate
Martin McGarry - SEO strategy c/o England manager Gareth SouthgateMartin McGarry - SEO strategy c/o England manager Gareth Southgate
Martin McGarry - SEO strategy c/o England manager Gareth SouthgateMartin McGarry
 
The Hidden Gems of Low search volume
The Hidden Gems of Low search volumeThe Hidden Gems of Low search volume
The Hidden Gems of Low search volumeLiraz Postan
 
The Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right WayThe Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right WayMartin Hayman
 

What's hot (20)

EAT: Have We Been Looking At It Backwards
EAT: Have We Been Looking At It BackwardsEAT: Have We Been Looking At It Backwards
EAT: Have We Been Looking At It Backwards
 
Brighton SEO April 2022 - Talk by Nicole Osborne - Explode Your Agency Growth
Brighton SEO April 2022 - Talk by Nicole Osborne  - Explode Your Agency Growth Brighton SEO April 2022 - Talk by Nicole Osborne  - Explode Your Agency Growth
Brighton SEO April 2022 - Talk by Nicole Osborne - Explode Your Agency Growth
 
Crawling, indexation & the impact on performance | Brighton SEO
Crawling, indexation & the impact on performance | Brighton SEOCrawling, indexation & the impact on performance | Brighton SEO
Crawling, indexation & the impact on performance | Brighton SEO
 
How to improve Core Web Vitals on a WordPress website
How to improve Core Web Vitals on a WordPress websiteHow to improve Core Web Vitals on a WordPress website
How to improve Core Web Vitals on a WordPress website
 
Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023
 
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
 
Internal Linking - The Topic Clustering Way edited.pptx
Internal Linking - The Topic Clustering Way edited.pptxInternal Linking - The Topic Clustering Way edited.pptx
Internal Linking - The Topic Clustering Way edited.pptx
 
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
 
How to Use Search Intent to Dominate Google Discover
How to Use Search Intent to Dominate Google DiscoverHow to Use Search Intent to Dominate Google Discover
How to Use Search Intent to Dominate Google Discover
 
Expediente Xpath #SEOnderground 2021
Expediente Xpath  #SEOnderground 2021Expediente Xpath  #SEOnderground 2021
Expediente Xpath #SEOnderground 2021
 
Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...
Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...
Rachel Ellen - brightonSEO 2022 - ¡Livin’ la vida local! The Changing Landsca...
 
Is your site accessible? No? Why the F*CK not?!
Is your site accessible? No? Why the F*CK not?!Is your site accessible? No? Why the F*CK not?!
Is your site accessible? No? Why the F*CK not?!
 
Crawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to KnowCrawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to Know
 
How to go after the long tail keywords (and why it matters!)
How to go after the long tail keywords (and why it matters!)How to go after the long tail keywords (and why it matters!)
How to go after the long tail keywords (and why it matters!)
 
Using Search Intent in our Link Building Efforts
Using Search Intent in our Link Building EffortsUsing Search Intent in our Link Building Efforts
Using Search Intent in our Link Building Efforts
 
¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...
¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...
¡Adiós a las Historias de Horror SEO! 
Aprende a Establecer un Framework de C...
 
Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...
Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...
Accessibility, strategy and schema - do they go hand in hand? Beth Barnham Br...
 
Martin McGarry - SEO strategy c/o England manager Gareth Southgate
Martin McGarry - SEO strategy c/o England manager Gareth SouthgateMartin McGarry - SEO strategy c/o England manager Gareth Southgate
Martin McGarry - SEO strategy c/o England manager Gareth Southgate
 
The Hidden Gems of Low search volume
The Hidden Gems of Low search volumeThe Hidden Gems of Low search volume
The Hidden Gems of Low search volume
 
The Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right WayThe Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right Way
 

Similar to The secret web performance metric no one is talking about

Secret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdfSecret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdfAnna Migas
 
Secret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBeSecret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBeAnna Migas
 
Secret performance metric - Modern Frontends
Secret performance metric - Modern FrontendsSecret performance metric - Modern Frontends
Secret performance metric - Modern FrontendsAnna Migas
 
Web performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna MigasWeb performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna MigasWey Wey Web
 
Web performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdfWeb performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdfAnna Migas
 
Progressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoDEVCON
 
Velocity_Conference
Velocity_ConferenceVelocity_Conference
Velocity_ConferenceAnne Cypcar
 
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamFrom Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamAndreas Grabner
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web DevelopmentRachel Andrew
 
What is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress HostingWhat is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress HostingWPSFO Meetup Group
 
Edge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance MonitoringEdge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance MonitoringAkamai Technologies
 
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...Prolifics
 
Browser Bloat & Service Workers - 4x3 draft 6
Browser Bloat & Service Workers - 4x3 draft 6Browser Bloat & Service Workers - 4x3 draft 6
Browser Bloat & Service Workers - 4x3 draft 6msz
 
Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningSuraj Kumar
 
A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringCliff Crocker
 

Similar to The secret web performance metric no one is talking about (20)

Secret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdfSecret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdf
 
Secret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBeSecret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBe
 
Secret performance metric - Modern Frontends
Secret performance metric - Modern FrontendsSecret performance metric - Modern Frontends
Secret performance metric - Modern Frontends
 
Web performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna MigasWeb performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna Migas
 
Web performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdfWeb performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdf
 
Progressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent Convento
 
Browser Based Performance Testing and Tuning
Browser Based Performance Testing and TuningBrowser Based Performance Testing and Tuning
Browser Based Performance Testing and Tuning
 
20181023 progressive web_apps_are_here_sfcampua
20181023 progressive web_apps_are_here_sfcampua20181023 progressive web_apps_are_here_sfcampua
20181023 progressive web_apps_are_here_sfcampua
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Velocity_Conference
Velocity_ConferenceVelocity_Conference
Velocity_Conference
 
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamFrom Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
What is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress HostingWhat is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress Hosting
 
Edge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance MonitoringEdge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance Monitoring
 
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi...
 
Browser Bloat & Service Workers - 4x3 draft 6
Browser Bloat & Service Workers - 4x3 draft 6Browser Bloat & Service Workers - 4x3 draft 6
Browser Bloat & Service Workers - 4x3 draft 6
 
Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
 
GWT and PWA
GWT and PWAGWT and PWA
GWT and PWA
 
A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance Monitoring
 

More from Anna Migas

Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metricsAnna Migas
 
HalfStack fast but not furious
HalfStack fast but not furiousHalfStack fast but not furious
HalfStack fast but not furiousAnna Migas
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furiousAnna Migas
 
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS:  Fast but not Furious: Debugging User Interaction Performance IssuesNordicJS:  Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS: Fast but not Furious: Debugging User Interaction Performance IssuesAnna Migas
 
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...Anna Migas
 
Fast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issuesFast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issuesAnna Migas
 
Web Zurich - Make your animations perform well
Web Zurich - Make your animations perform wellWeb Zurich - Make your animations perform well
Web Zurich - Make your animations perform wellAnna Migas
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well Anna Migas
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Anna Migas
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform wellAnna Migas
 
Be brave and Open Source
Be brave and Open SourceBe brave and Open Source
Be brave and Open SourceAnna Migas
 

More from Anna Migas (11)

Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
 
HalfStack fast but not furious
HalfStack fast but not furiousHalfStack fast but not furious
HalfStack fast but not furious
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS:  Fast but not Furious: Debugging User Interaction Performance IssuesNordicJS:  Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
 
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
 
Fast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issuesFast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issues
 
Web Zurich - Make your animations perform well
Web Zurich - Make your animations perform wellWeb Zurich - Make your animations perform well
Web Zurich - Make your animations perform well
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform well
 
Be brave and Open Source
Be brave and Open SourceBe brave and Open Source
Be brave and Open Source
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

The secret web performance metric no one is talking about

  • 1. Lead UI Developer at Field Intelligence Anna Migas Google Developer Expert
  • 2. Anna Migas @szynszyliszys The secret web performance metric no one is talking about
  • 3. “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
  • 5. User experience connected to the web performance
  • 6. User experience connected to the web performance from a perspective of an average user in Africa
  • 7. Why should you care? Africa is far.
  • 8. 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 optimise
  • 9. Most web performance metrics and resources are developed with a privileged user in mind.
  • 10. For some users, the good web performance is not achievable at all.
  • 11. “At a high level, there are two primary performance bottlenecks on the web: 1. Networking - the round-trip time to acquire an asset or data payload from a remote server 2. End-user Device Compute - the amount of computational overhead required on the end-user's device” https://www.webperf.tips/tip/cached-js-misconceptions/
  • 12. “At a high level, there are two primary performance bottlenecks on the web: 1. Networking - the round-trip time to acquire an asset or data payload from a remote server 2. End-user Device Compute - the amount of computational overhead required on the end-user's device” https://www.webperf.tips/tip/cached-js-misconceptions/
  • 13. “At a high level, there are two primary performance bottlenecks on the web: 1. Networking - the round-trip time to acquire an asset or data payload from a remote server 2. End-user Device Compute - the amount of computational overhead required on the end-user's device” https://www.webperf.tips/tip/cached-js-misconceptions/
  • 14. “At a high level, there are two primary performance bottlenecks on the web: 1. Networking - the round-trip time to acquire an asset or data payload from a remote server 2. End-user Device Compute - the amount of computational overhead required on the end-user's device” https://www.webperf.tips/tip/cached-js-misconceptions/
  • 15. Latency Latency is generally considered to be the amount of time it takes from when a request is made by the user to the time it takes for the response to get back to that user. https://developer.mozilla.org/en-US/docs/Web/Performance/
  • 16. Latency in most parts of Africa is really high. High latency means long Time To First Byte (TTFB).
  • 17. Latency in most parts of Africa is really high. High latency means long Time To First Byte (TTFB).
  • 18. “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 https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/
  • 19. “At a high level, there are two primary performance bottlenecks on the web: 1. Networking - the round-trip time to acquire an asset or data payload from a remote server 2. End-user Device Compute - the amount of computational overhead required on the end-user's device”
  • 20. Devices used “The country [Nigeria] is considered a mobile- first market where infrastructure and online usage development skipped wide-ranging desktop PC adoption and went straight to mobile internet usage via inexpensive smartphones instead.” https://www.statista.com/statistics/183849/internet-users-nigeria/
  • 21. “Time spent in Parse/Compile can often be 2–5x as long on phones as on desktop.” — Addy Osmani https://medium.com/reloading/javascript-start-up-performance-69200f43b201
  • 24. How long are you willing to wait for the website to load, before you decide it is broken? Patience metric:
  • 25. If everything is slow, what can we do?
  • 26. 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 time.” https://www.nngroup.com/articles/ten-usability-heuristics/
  • 27. 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 time.” https://www.nngroup.com/articles/ten-usability-heuristics/
  • 28. Make sure to give user information as fast as possible: • What is going on • How long it can take • Once error occurs (and what can be done)
  • 31. Take into account digital literacy • Use simple language • Discourage damaging actions (“Do you really want to navigate out and stop the ongoing download?”) • Explain consequences of actions (for example “pull to refresh”)
  • 32. 2. Render initial information ASAP Make sure there is some initial content visible letting user know what is going on quick.
  • 35. 3. Avoid request chaining and roundtrips Consider using browser hints.
  • 36. A. Preconnect Eliminate many costly roundtrips from your request path (for example establish connection with CDN used later) <link href="https://cdn.domain.com" rel="preconnect" crossorigin>
  • 37. B. Prefetch Fetch resources and store them in cache. Use for resources that might be needed for next navigation.
 <link rel="prefetch" href="/images/big.jpeg">
  • 38. C. Preload Load late-discovered resources early. <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  • 39. 4. Lazy load resources that are not critical Don’t force user to download resources they might never discover. <img src="image.png" loading="lazy" alt=“alt text” width="200" height="200">
  • 40. 5. Learn about network resource hints Network Information API helps web applications to access information about the user's network. navigator.connection.saveData https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
  • 41. 6. Limit third party resources Third party resources can delay initial load of the page. Load them asynchronously using async/defer whenever possible. <script async src="external.js"></script> <script defer src="external.js"></script>
  • 42. 7. Test for back/forward cache If a user clicks on a navigation item by mistake, it can minimise the time to navigate back.
  • 44. 8. Avoid creating too many layers Each layer created by the browser takes device’s resources.
  • 46. 9. Minimise website repaints While interacting with the page, a lot of interactive resources can force browser to repaint content.
  • 48. Summary ★ Let user know what is going on ★ Load initial information early ★ Avoid request chaining and use resource hints ★ Lazy load content below the fold ★ Leverage Network Information API ★ Limit third party resources (and if you need them use async loading)
  • 49. Summary ★ Optimise for back/forward cache ★ Avoid using too many layers and repainting content
  • 50. Resources • MDN: Understanding latency • Interactive map of network speed worldwide • web.dev: Establishing early connections with resource hints • web.dev: Preloading critical assets • web.dev: Loading third party assets • The psychology of web performance • Designer's guide to perceived web performance • The African web ecosystem - a paper