If You Can’t Measure It, You Can’t Improve It
First step in improving the performance is to measure it. They are various way you may measure performance. Chrome DevTools or Lighthouse gives you enough data. However, You lighthouse score varies across environments.
This article assume you already know what are web vitals and using lighthouse to measure performance. If you're getting started with web performance, The "why" of web performance is great place to start
Your localhost is way faster than your production, Measuring performance on local sure helps during development but it does not give your the real picture. How your app will perform in the real world, you never know.
You may hit deploy and test your app in production-like environment. That's also not a correct answer. Results would be slightly closer to real world. It still doesn't answer what users actually experience while using the app. We tested the app in a regulated environment probably with some high-end development hardware and high speed network.
Best way to measure performance of your webapp is on your user systems when your users are using the app and you get the actual performance feedback. Which page took longer to load, which action was sluggish, when your app was not interactive. Were there dead-clicks due to layout shifts. This is called Real User Monitoring or RUM.
There are terms for 3 types of data discussed above
- Lab Data - What you measure on your localhost
- Synthetic Data - When you measure data in a simulated production-like environment
- Field Data - When data is measured via Real user monitoring (RUM)
Note: There are tools available to measure field data such as CrUX API or PageSpeed Insights
Assume that some of the user will have high-end devices and really fast network, most of them will have mid performance devices, such as old generation windows/mac laptops and few of them use potato pcs and budget low memory android phones. Not every one is going to have the same experience. These combinations of different devices and various network conditions your app is being used in, gives your the real picture what your user are experiencing
Let's say 100 users visited the website, you get the performance score from each user.
Common practice is to get the best 50% user's score and find the median. That's your performance score for best 50% users denoted as p50 or 50th Percentile.
75th Percentile (p75) is the result for the most users and p95 includes potato pc users. Other 5% worst score could be due to issues at user end such as network or memory issues. This helps us prioritize most common performance issue which impacts largest and best set of customers.
Provide the best UX to best 75th percentile and best possible UX to 95th percentile with some graceful degradation.
Good luck speeding up your app. Thankyou for reading.
Further readings: