Web Performance is an important aspect when you want to make sure that your web application reaches out to the intended audience in an efficient manner. But, what metrics you should monitor to make sure your web application performs healthy. In this presentation, we will take a look at some of the common performance problems that happen in the web platforms and what user metrics can help you understand how well your application is performing for the user.

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
 Let’s take a look at some of the Chrome provided tools

11. Chrome – Lighthouse Integration for running Audits

12. Heap Memory Profiler

13. Performance Viewer

14.  JavaScript provides PerformanceObserver API
 Available in all the latest browsers
 Can be used to monitor and report number of
Performance related events

15. THANKYOU
E-mail: contact@saurabhbadhwar.xyz
Website: www.saurabhbadhwar.xyz/blog
Twitter: @MYNET55