Introduction to Reactive Web Performance
User contexts are crucial for measuring Performance. i.e., the device, the network type, connection strength, etc.
“It’s not my fault; on my high-end device in a big city, it’s fast” — a deprecated thought.
We develop the app, measure performance, apply optimization techniques & start all over again. Since performance is based on the user’s context, one should always collect user metrics.
What are all the user metrics that we can get?
- DNS, TCP, HTTP request, and response
- Type of connection (2G/3G/4G/5G/other)
- Bandwidth latency (RTT)
- Device’s memory
- Custom metrics with some actions (Ex: adding to cart)
- Paint timings (first paint)
- CPU-intense operations
How can we collect user metrics?
Navigation Timing API is available on all browsers. This is the API for web performance and it works on the client-side. It provides performance information to the server. It does that via a fetch request or by adding data to HTTP headers. Note: Not all browsers have all APIs.
Three main functionalities
- performance.now() — faster and more accurate than DateTime.now()
2. Navigation type — helps to get navigation-related information(ex: redirectCount)
3. Get timings for current navigation
