The secret web performance metric no one is talking about

A
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!
1 of 51

Recommended

NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive by
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep DiveNY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep DivePaul Calvano
623 views43 slides
Real-World Performance Budgets [PerfNow 2022] by
Real-World Performance Budgets [PerfNow 2022]Real-World Performance Budgets [PerfNow 2022]
Real-World Performance Budgets [PerfNow 2022]Tammy Everts
963 views103 slides
Performance culture through the looking-glass - performance.now() 2022 by
Performance culture through the looking-glass - performance.now() 2022Performance culture through the looking-glass - performance.now() 2022
Performance culture through the looking-glass - performance.now() 2022Dora Militaru
634 views57 slides
Core Web Vitals and SEO: Don't Panic. Improve. by
Core Web Vitals and SEO: Don't Panic. Improve.Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.Ian Lurie
2K views49 slides
Staying Sane: How To Prioritise and Manage Your Mental Health As An SEO by
Staying Sane: How To Prioritise and Manage Your Mental Health As An SEOStaying Sane: How To Prioritise and Manage Your Mental Health As An SEO
Staying Sane: How To Prioritise and Manage Your Mental Health As An SEOCharlotteMcIntyre5
1.6K views22 slides
How to Use Search Intent to Dominate Google Discover by
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
2K views44 slides

More Related Content

What's hot

Core Web Vitals and Your Search Rankings by
Core Web Vitals and Your Search Rankings Core Web Vitals and Your Search Rankings
Core Web Vitals and Your Search Rankings Michael King
377 views93 slides
Core web Vitals: Web Performance and Usability by
Core web Vitals: Web Performance and UsabilityCore web Vitals: Web Performance and Usability
Core web Vitals: Web Performance and UsabilityIngo Steinke
206 views34 slides
Hreflang tags: everything you need to know to start implementing them by
Hreflang tags: everything you need to know to start implementing themHreflang tags: everything you need to know to start implementing them
Hreflang tags: everything you need to know to start implementing themSara Moccand-Sayegh
1.9K views49 slides
Search Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEO by
Search Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEOSearch Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEO
Search Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEOKoray Tugberk GUBUR
2.6K views41 slides
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites by
BrightonSEO - Master Crawl Budget Optimization for Enterprise WebsitesBrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
BrightonSEO - Master Crawl Budget Optimization for Enterprise WebsitesManick Bhan
2.2K views52 slides
The Full Scoop on Google's Title Rewrites by
The Full Scoop on Google's Title RewritesThe Full Scoop on Google's Title Rewrites
The Full Scoop on Google's Title RewritesMordy Oberstein
4.1K views66 slides

What's hot(20)

Core Web Vitals and Your Search Rankings by Michael King
Core Web Vitals and Your Search Rankings Core Web Vitals and Your Search Rankings
Core Web Vitals and Your Search Rankings
Michael King377 views
Core web Vitals: Web Performance and Usability by Ingo Steinke
Core web Vitals: Web Performance and UsabilityCore web Vitals: Web Performance and Usability
Core web Vitals: Web Performance and Usability
Ingo Steinke206 views
Hreflang tags: everything you need to know to start implementing them by Sara Moccand-Sayegh
Hreflang tags: everything you need to know to start implementing themHreflang tags: everything you need to know to start implementing them
Hreflang tags: everything you need to know to start implementing them
Sara Moccand-Sayegh1.9K views
Search Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEO by Koray Tugberk GUBUR
Search Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEOSearch Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEO
Search Query Processing: The Secret Life of Queries, Parsing, Rewriting & SEO
Koray Tugberk GUBUR2.6K views
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites by Manick Bhan
BrightonSEO - Master Crawl Budget Optimization for Enterprise WebsitesBrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
Manick Bhan2.2K views
The Full Scoop on Google's Title Rewrites by Mordy Oberstein
The Full Scoop on Google's Title RewritesThe Full Scoop on Google's Title Rewrites
The Full Scoop on Google's Title Rewrites
Mordy Oberstein4.1K views
How to Incorporate ML in your SERP Analysis, Lazarina Stoy -BrightonSEO Oct, ... by LazarinaStoyanova
How to Incorporate ML in your SERP Analysis, Lazarina Stoy -BrightonSEO Oct, ...How to Incorporate ML in your SERP Analysis, Lazarina Stoy -BrightonSEO Oct, ...
How to Incorporate ML in your SERP Analysis, Lazarina Stoy -BrightonSEO Oct, ...
Migrating wise.com to server-side GA4 by Tom Bennet
Migrating wise.com to server-side GA4Migrating wise.com to server-side GA4
Migrating wise.com to server-side GA4
Tom Bennet127 views
SEO at Scale - BrightonSEO April 2022 by Nitin Manchanda
SEO at Scale - BrightonSEO April 2022SEO at Scale - BrightonSEO April 2022
SEO at Scale - BrightonSEO April 2022
Nitin Manchanda1.8K views
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021 by Chris Green
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021
Chris Green2.5K views
Beyond the Basics – 5 Google Business Profile elements you might not know abo... by Claire Carlile Marketing
Beyond the Basics – 5 Google Business Profile elements you might not know abo...Beyond the Basics – 5 Google Business Profile elements you might not know abo...
Beyond the Basics – 5 Google Business Profile elements you might not know abo...
Google Core Web Vitals - Webinar by Spike
Google Core Web Vitals - WebinarGoogle Core Web Vitals - Webinar
Google Core Web Vitals - Webinar
Spike302 views
Google Discover Optimisation with Google Web Stories by Felipe Bazon
Google Discover Optimisation with Google Web StoriesGoogle Discover Optimisation with Google Web Stories
Google Discover Optimisation with Google Web Stories
Felipe Bazon983 views
Freddy Krueger's Guide to Scary Good Reporting by Greg Gifford
Freddy Krueger's Guide to Scary Good ReportingFreddy Krueger's Guide to Scary Good Reporting
Freddy Krueger's Guide to Scary Good Reporting
Greg Gifford4K views
Brighton SEO April 2022 - Automate the technical SEO stuff by Michael Van Den Reym
Brighton SEO April 2022 - Automate the technical SEO stuffBrighton SEO April 2022 - Automate the technical SEO stuff
Brighton SEO April 2022 - Automate the technical SEO stuff
7 E-Commerce SEO Mistakes & How to Fix Them #DeepSEOCon by Aleyda Solís
7 E-Commerce SEO Mistakes & How to Fix Them #DeepSEOCon7 E-Commerce SEO Mistakes & How to Fix Them #DeepSEOCon
7 E-Commerce SEO Mistakes & How to Fix Them #DeepSEOCon
Aleyda Solís2.4K views
Product, service and category page links (and how to get them) - Rebecca Moss... by Rebecca Moss
Product, service and category page links (and how to get them) - Rebecca Moss...Product, service and category page links (and how to get them) - Rebecca Moss...
Product, service and category page links (and how to get them) - Rebecca Moss...
Rebecca Moss1.3K views
Martin McGarry - SEO strategy c/o England manager Gareth Southgate by Martin McGarry
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
Martin McGarry2.9K views

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

Secret Performance Metric - Armada JS.pdf by
Secret Performance Metric - Armada JS.pdfSecret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdfAnna Migas
47 views60 slides
Secret Web Performance Metric - DevDayBe by
Secret Web Performance Metric - DevDayBeSecret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBeAnna Migas
80 views65 slides
Secret performance metric - Modern Frontends by
Secret performance metric - Modern FrontendsSecret performance metric - Modern Frontends
Secret performance metric - Modern FrontendsAnna Migas
10 views49 slides
Web performance optimisations for the harsh conditions.pdf by
Web performance optimisations for the harsh conditions.pdfWeb performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdfAnna Migas
91 views53 slides
Web performance optimisations for the harsh conditions - Anna Migas by
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
14 views53 slides
Progressive Web Apps by Millicent Convento by
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoDEVCON
634 views35 slides

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

Secret Performance Metric - Armada JS.pdf by Anna Migas
Secret Performance Metric - Armada JS.pdfSecret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdf
Anna Migas47 views
Secret Web Performance Metric - DevDayBe by Anna Migas
Secret Web Performance Metric - DevDayBeSecret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBe
Anna Migas80 views
Secret performance metric - Modern Frontends by Anna Migas
Secret performance metric - Modern FrontendsSecret performance metric - Modern Frontends
Secret performance metric - Modern Frontends
Anna Migas10 views
Web performance optimisations for the harsh conditions.pdf by Anna Migas
Web performance optimisations for the harsh conditions.pdfWeb performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdf
Anna Migas91 views
Web performance optimisations for the harsh conditions - Anna Migas by Wey Wey Web
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
Wey Wey Web14 views
Progressive Web Apps by Millicent Convento by DEVCON
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent Convento
DEVCON 634 views
Velocity_Conference by Anne Cypcar
Velocity_ConferenceVelocity_Conference
Velocity_Conference
Anne Cypcar291 views
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam by Andreas Grabner
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
Andreas Grabner2.3K views
Business of Front-end Web Development by Rachel Andrew
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew1.4K views
What is Nginx and Why You Should to Use it with Wordpress Hosting by WPSFO Meetup Group
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
WPSFO Meetup Group882 views
Edge 2014: A Modern Approach to Performance Monitoring by Akamai Technologies
Edge 2014: A Modern Approach to Performance MonitoringEdge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance Monitoring
Akamai Technologies2.5K views
Architecting and Tuning IIB/eXtreme Scale for Maximum Performance and Reliabi... by Prolifics
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...
Prolifics1.7K views
Browser Bloat & Service Workers - 4x3 draft 6 by msz
Browser Bloat & Service Workers - 4x3 draft 6Browser Bloat & Service Workers - 4x3 draft 6
Browser Bloat & Service Workers - 4x3 draft 6
msz163 views
Progressive Web Apps - Up & Running by Suraj Kumar
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
Suraj Kumar218 views
A Modern Approach to Performance Monitoring by Cliff Crocker
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance Monitoring
Cliff Crocker4.6K views

More from Anna Migas

Demystifying web performance tooling and metrics by
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metricsAnna Migas
107 views70 slides
HalfStack fast but not furious by
HalfStack fast but not furiousHalfStack fast but not furious
HalfStack fast but not furiousAnna Migas
623 views68 slides
Performance.now() fast but not furious by
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furiousAnna Migas
1.2K views93 slides
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues by
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
358 views77 slides
Fullstack 2018 - Fast but not furious: debugging user interaction performanc... by
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
327 views90 slides
Fast but not furious: debugging user interaction performance issues by
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
923 views77 slides

More from Anna Migas(11)

Demystifying web performance tooling and metrics by Anna Migas
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
Anna Migas107 views
HalfStack fast but not furious by Anna Migas
HalfStack fast but not furiousHalfStack fast but not furious
HalfStack fast but not furious
Anna Migas623 views
Performance.now() fast but not furious by Anna Migas
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
Anna Migas1.2K views
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues by Anna Migas
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
Anna Migas358 views
Fullstack 2018 - Fast but not furious: debugging user interaction performanc... by Anna 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...
Anna Migas327 views
Fast but not furious: debugging user interaction performance issues by Anna Migas
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
Anna Migas923 views
Web Zurich - Make your animations perform well by Anna Migas
Web Zurich - Make your animations perform wellWeb Zurich - Make your animations perform well
Web Zurich - Make your animations perform well
Anna Migas195 views
HalfStack London - Make Your Animations Perform Well by Anna Migas
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
Anna Migas356 views
Make Your Animations Perform Well - JS Conf Budapest 2017 by 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
Anna Migas736 views
Make your animations perform well by Anna Migas
Make your animations perform wellMake your animations perform well
Make your animations perform well
Anna Migas131 views
Be brave and Open Source by Anna Migas
Be brave and Open SourceBe brave and Open Source
Be brave and Open Source
Anna Migas440 views

Recently uploaded

iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...Bernd Ruecker
50 views69 slides
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlueShapeBlue
50 views23 slides
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Safe Software
344 views86 slides
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueShapeBlue
46 views13 slides
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...ShapeBlue
82 views62 slides
Data Integrity for Banking and Financial Services by
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial ServicesPrecisely
56 views26 slides

Recently uploaded(20)

iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker50 views
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
ShapeBlue50 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software344 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue46 views
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by ShapeBlue
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
ShapeBlue82 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely56 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue57 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue62 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue111 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi141 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue54 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue83 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue77 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10369 views
State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue145 views
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue56 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院

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