際際滷

際際滷Share a Scribd company logo
If you cannot measure it.
You cannot optimize it.
Browser is giving you hints Are
you listening?
Saurabh Badhwar
Software Engineer, LinkedIn
 Website Performance and Why It Matters?
 Common Causes of Performance Bottlenecks in Website?
 User Implication of Performance Bottlenecks
 Taking Cues From The Browser
 Taking Measurable Actions
 Web Page Size
 The Page Loading Time
 Fluidity of Interactions
 Prompt Feedback
 Page Abandonment Rate
 40% user session loss if page takes more than 3 seconds to load
 Returning User Sessions
 Drastic decrease in returning user sessions if interactions are not fluid
 User Trust
 Pages frequently throwing errors reduce user trust
 Slow or High Latency Connections  2G/3G
 Inefficient Caching
 Deep Nesting in DOM
 Unnecessary CSS / JavaScript
 Unnecessary use of bells and whistles
 Increased Browser Memory Use / Frequent Page Suspends
(Mobile)
 Downgraded battery life for mobile devices
 Frequent Browser / Tab Crashes
 Jittery experience while interacting with Website
 There could be multiple places requiring improvement
 Metrics help to narrow down and prioritize
 Need to be user focused and not synthetic
Time to
FCP
Time to
FMP
Time to
Interactive
Heap
Memory
Growth
Style / Layout
Recalculations
Script
Evaluations
 A number of in-browser tools for developers
 Allows for simulation of device variants
 Mechanisms for doing performance audits inside Browser
 Lets take a look at some of the Chrome provided tools
Chrome  Lighthouse Integration for running Audits
Heap Memory Profiler
Performance Viewer
 JavaScript provides PerformanceObserver API
 Available in all the latest browsers
 Can be used to monitor and report number of
Performance related events
THANKYOU
E-mail: contact@saurabhbadhwar.xyz
Website: www.saurabhbadhwar.xyz/blog
Twitter: @MYNET55
Ad

Recommended

Web usability MKS
Web usability MKS
Mikisingh10
Seam
Seam
Vostrikov Arkady
Responsive web designing
Responsive web designing
Mohammed Fawzan
How to take a webinar
How to take a webinar
Phillip Lund
5 SIGNS WHEN YOU NEED TO GIVE A NEW LOOK TO YOUR WEBSITE \ 2020 | Visit Now.
5 SIGNS WHEN YOU NEED TO GIVE A NEW LOOK TO YOUR WEBSITE \ 2020 | Visit Now.
JacobDennis15
SearchEngineOptimization-TheFullProcess.pdf
SearchEngineOptimization-TheFullProcess.pdf
wellshop shopping
Secret performance metric - Modern Frontends
Secret performance metric - Modern Frontends
Anna Migas
Web performance optimisations for the harsh conditions - Anna Migas
Web performance optimisations for the harsh conditions - Anna Migas
Wey Wey Web
Web performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdf
Anna Migas
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
Measuring web performance with user-centric metrics
Measuring web performance with user-centric metrics
Giorgos Bamparopoulos
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Nirvana Canada
Why Performance Matters
Why Performance Matters
Ben Daniel
Secret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBe
Anna Migas
Secret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdf
Anna Migas
2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101
Tammy Everts
The secret web performance metric no one is talking about
The secret web performance metric no one is talking about
Anna Migas
Measuring User Experience in the Browser
Measuring User Experience in the Browser
Alois Reitbauer
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
Robert Flournoy
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
strommen
Thinking Beyond Core Web Vitals - Web performance optimisations for the harsh...
Thinking Beyond Core Web Vitals - Web performance optimisations for the harsh...
Anna Migas
2020 Chrome Dev Summit: Web Performance 101
2020 Chrome Dev Summit: Web Performance 101
Tammy Everts
Applying a Methodical Approach to Website Performance
Applying a Methodical Approach to Website Performance
PostSharp Technologies
Optimizing Website Performance Tips for Faster Load Times in 2024
Optimizing Website Performance Tips for Faster Load Times in 2024
Concept Infoway Pvt. Ltd
The Science of Website Performance What You Need to Know
The Science of Website Performance What You Need to Know
Pixlogix Infotech
Web performance and measurement - UKCMG Conference 2011 - steve thair
Web performance and measurement - UKCMG Conference 2011 - steve thair
Stephen Thair
Web performance e-book
Web performance e-book
Cristiano Caetano
Designers Guide to Web Performance Yotta 2013
Designers Guide to Web Performance Yotta 2013
Luis Alejandro Ram鱈rez Gallardo
Performance Aware Development
Performance Aware Development
Saurabh Badhwar
Scaling Up Red hat Satellite to 50K Hosts
Scaling Up Red hat Satellite to 50K Hosts
Saurabh Badhwar

More Related Content

Similar to Browser is giving you hints (20)

Web performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdf
Anna Migas
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
Measuring web performance with user-centric metrics
Measuring web performance with user-centric metrics
Giorgos Bamparopoulos
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Nirvana Canada
Why Performance Matters
Why Performance Matters
Ben Daniel
Secret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBe
Anna Migas
Secret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdf
Anna Migas
2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101
Tammy Everts
The secret web performance metric no one is talking about
The secret web performance metric no one is talking about
Anna Migas
Measuring User Experience in the Browser
Measuring User Experience in the Browser
Alois Reitbauer
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
Robert Flournoy
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
strommen
Thinking Beyond Core Web Vitals - Web performance optimisations for the harsh...
Thinking Beyond Core Web Vitals - Web performance optimisations for the harsh...
Anna Migas
2020 Chrome Dev Summit: Web Performance 101
2020 Chrome Dev Summit: Web Performance 101
Tammy Everts
Applying a Methodical Approach to Website Performance
Applying a Methodical Approach to Website Performance
PostSharp Technologies
Optimizing Website Performance Tips for Faster Load Times in 2024
Optimizing Website Performance Tips for Faster Load Times in 2024
Concept Infoway Pvt. Ltd
The Science of Website Performance What You Need to Know
The Science of Website Performance What You Need to Know
Pixlogix Infotech
Web performance and measurement - UKCMG Conference 2011 - steve thair
Web performance and measurement - UKCMG Conference 2011 - steve thair
Stephen Thair
Web performance e-book
Web performance e-book
Cristiano Caetano
Designers Guide to Web Performance Yotta 2013
Designers Guide to Web Performance Yotta 2013
Luis Alejandro Ram鱈rez Gallardo
Web performance optimisations for the harsh conditions.pdf
Web performance optimisations for the harsh conditions.pdf
Anna Migas
Measuring web performance with user-centric metrics
Measuring web performance with user-centric metrics
Giorgos Bamparopoulos
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Nirvana Canada
Why Performance Matters
Why Performance Matters
Ben Daniel
Secret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBe
Anna Migas
Secret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdf
Anna Migas
2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101
Tammy Everts
The secret web performance metric no one is talking about
The secret web performance metric no one is talking about
Anna Migas
Measuring User Experience in the Browser
Measuring User Experience in the Browser
Alois Reitbauer
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
Robert Flournoy
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
strommen
Thinking Beyond Core Web Vitals - Web performance optimisations for the harsh...
Thinking Beyond Core Web Vitals - Web performance optimisations for the harsh...
Anna Migas
2020 Chrome Dev Summit: Web Performance 101
2020 Chrome Dev Summit: Web Performance 101
Tammy Everts
Applying a Methodical Approach to Website Performance
Applying a Methodical Approach to Website Performance
PostSharp Technologies
Optimizing Website Performance Tips for Faster Load Times in 2024
Optimizing Website Performance Tips for Faster Load Times in 2024
Concept Infoway Pvt. Ltd
The Science of Website Performance What You Need to Know
The Science of Website Performance What You Need to Know
Pixlogix Infotech
Web performance and measurement - UKCMG Conference 2011 - steve thair
Web performance and measurement - UKCMG Conference 2011 - steve thair
Stephen Thair

More from Saurabh Badhwar (6)

Performance Aware Development
Performance Aware Development
Saurabh Badhwar
Scaling Up Red hat Satellite to 50K Hosts
Scaling Up Red hat Satellite to 50K Hosts
Saurabh Badhwar
Utilizing Containers for Performance and Scale Engineering
Utilizing Containers for Performance and Scale Engineering
Saurabh Badhwar
Building Scalable API Gateways for Microservices
Building Scalable API Gateways for Microservices
Saurabh Badhwar
Getting Started with Web VR
Getting Started with Web VR
Saurabh Badhwar
FOSS and Fedora
FOSS and Fedora
Saurabh Badhwar
Performance Aware Development
Performance Aware Development
Saurabh Badhwar
Scaling Up Red hat Satellite to 50K Hosts
Scaling Up Red hat Satellite to 50K Hosts
Saurabh Badhwar
Utilizing Containers for Performance and Scale Engineering
Utilizing Containers for Performance and Scale Engineering
Saurabh Badhwar
Building Scalable API Gateways for Microservices
Building Scalable API Gateways for Microservices
Saurabh Badhwar
Getting Started with Web VR
Getting Started with Web VR
Saurabh Badhwar
Ad

Recently uploaded (20)

60 Years and Beyond eBook 1234567891.pdf
60 Years and Beyond eBook 1234567891.pdf
waseemalazzeh
Complete guidance book of Asp.Net Web API
Complete guidance book of Asp.Net Web API
Shabista Imam
Modern multi-proposer consensus implementations
Modern multi-proposer consensus implementations
Fran巽ois Garillot
special_edition_using_visual_foxpro_6.pdf
special_edition_using_visual_foxpro_6.pdf
Shabista Imam
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
KhadijaKhadijaAouadi
Microwatt: Open Tiny Core, Big Possibilities
Microwatt: Open Tiny Core, Big Possibilities
IBM
machine learning is a advance technology
machine learning is a advance technology
ynancy893
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
How to Un-Obsolete Your Legacy Keypad Design
How to Un-Obsolete Your Legacy Keypad Design
Epec Engineered Technologies
Abraham Silberschatz-Operating System Concepts (9th,2012.12).pdf
Abraham Silberschatz-Operating System Concepts (9th,2012.12).pdf
Shabista Imam
Rapid Prototyping for XR: Lecture 6 - AI for Prototyping and Research Directi...
Rapid Prototyping for XR: Lecture 6 - AI for Prototyping and Research Directi...
Mark Billinghurst
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
DESIGN OF REINFORCED CONCRETE ELEMENTS S
DESIGN OF REINFORCED CONCRETE ELEMENTS S
prabhusp8
Learning Types of Machine Learning Supervised Learning Unsupervised UNI...
Learning Types of Machine Learning Supervised Learning Unsupervised UNI...
23Q95A6706
Tesla-Stock-Analysis-and-Forecast.pptx (1).pptx
Tesla-Stock-Analysis-and-Forecast.pptx (1).pptx
moonsony54
Unit III_One Dimensional Consolidation theory
Unit III_One Dimensional Consolidation theory
saravananr808639
Machine Learning - Classification Algorithms
Machine Learning - Classification Algorithms
resming1
Proposal for folders structure division in projects.pdf
Proposal for folders structure division in projects.pdf
Mohamed Ahmed
Mechanical Vibration_MIC 202_iit roorkee.pdf
Mechanical Vibration_MIC 202_iit roorkee.pdf
isahiliitr
60 Years and Beyond eBook 1234567891.pdf
60 Years and Beyond eBook 1234567891.pdf
waseemalazzeh
Complete guidance book of Asp.Net Web API
Complete guidance book of Asp.Net Web API
Shabista Imam
Modern multi-proposer consensus implementations
Modern multi-proposer consensus implementations
Fran巽ois Garillot
special_edition_using_visual_foxpro_6.pdf
special_edition_using_visual_foxpro_6.pdf
Shabista Imam
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
IPL_Logic_Flow.pdf Mainframe IPLMainframe IPL
KhadijaKhadijaAouadi
Microwatt: Open Tiny Core, Big Possibilities
Microwatt: Open Tiny Core, Big Possibilities
IBM
machine learning is a advance technology
machine learning is a advance technology
ynancy893
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
Abraham Silberschatz-Operating System Concepts (9th,2012.12).pdf
Abraham Silberschatz-Operating System Concepts (9th,2012.12).pdf
Shabista Imam
Rapid Prototyping for XR: Lecture 6 - AI for Prototyping and Research Directi...
Rapid Prototyping for XR: Lecture 6 - AI for Prototyping and Research Directi...
Mark Billinghurst
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
DESIGN OF REINFORCED CONCRETE ELEMENTS S
DESIGN OF REINFORCED CONCRETE ELEMENTS S
prabhusp8
Learning Types of Machine Learning Supervised Learning Unsupervised UNI...
Learning Types of Machine Learning Supervised Learning Unsupervised UNI...
23Q95A6706
Tesla-Stock-Analysis-and-Forecast.pptx (1).pptx
Tesla-Stock-Analysis-and-Forecast.pptx (1).pptx
moonsony54
Unit III_One Dimensional Consolidation theory
Unit III_One Dimensional Consolidation theory
saravananr808639
Machine Learning - Classification Algorithms
Machine Learning - Classification Algorithms
resming1
Proposal for folders structure division in projects.pdf
Proposal for folders structure division in projects.pdf
Mohamed Ahmed
Mechanical Vibration_MIC 202_iit roorkee.pdf
Mechanical Vibration_MIC 202_iit roorkee.pdf
isahiliitr
Ad

Browser is giving you hints

  • 1. If you cannot measure it. You cannot optimize it.
  • 2. Browser is giving you hints Are you listening? Saurabh Badhwar Software Engineer, LinkedIn
  • 3. Website Performance and Why It Matters? Common Causes of Performance Bottlenecks in Website? User Implication of Performance Bottlenecks Taking Cues From The Browser Taking Measurable Actions
  • 4. Web Page Size The Page Loading Time Fluidity of Interactions Prompt Feedback
  • 5. Page Abandonment Rate 40% user session loss if page takes more than 3 seconds to load Returning User Sessions Drastic decrease in returning user sessions if interactions are not fluid User Trust Pages frequently throwing errors reduce user trust
  • 6. Slow or High Latency Connections 2G/3G Inefficient Caching Deep Nesting in DOM Unnecessary CSS / JavaScript Unnecessary use of bells and whistles
  • 7. Increased Browser Memory Use / Frequent Page Suspends (Mobile) Downgraded battery life for mobile devices Frequent Browser / Tab Crashes Jittery experience while interacting with Website
  • 8. There could be multiple places requiring improvement Metrics help to narrow down and prioritize Need to be user focused and not synthetic
  • 9. Time to FCP Time to FMP Time to Interactive Heap Memory Growth Style / Layout Recalculations Script Evaluations
  • 10. A number of in-browser tools for developers Allows for simulation of device variants Mechanisms for doing performance audits inside Browser Lets take a look at some of the Chrome provided tools
  • 11. Chrome Lighthouse Integration for running Audits
  • 14. JavaScript provides PerformanceObserver API Available in all the latest browsers Can be used to monitor and report number of Performance related events

Editor's Notes

  • #2: Add a takeaway Improve text to image ratio Make note about Web page sizes Give a brief about how we do the RUM monitoring related to LinkedIn
  • #3: Add a takeaway Improve text to image ratio Make note about Web page sizes Give a brief about how we do the RUM monitoring related to LinkedIn
  • #10: FCP First Contentful Paint FMP First Meaningful Paint
  • #15: Code example taken from MDN
  • #16: Code example taken from MDN