Counters
Client-Side Monitoring (Browser / User Experience)
Client-side monitoring focuses on what the end user actually experiences in the browser. Even if the server is fast, the user may still feel slow due to network latency, large assets, render delays or inefficient JavaScript execution.
| Counter | What It Means | How to Check | Bottleneck Cause | Fix / Action |
|---|---|---|---|---|
Page Load Time |
Total time taken to fully load the page (all resources). | Chrome DevTools → Network → Load time | Heavy resources, slow APIs, render blocking | Optimize images, lazy load, use CDN, minify files |
TTFB (Time to First Byte) |
Time from request to first byte received from server. | DevTools → Network → Timing tab (TTFB) | Backend slow, DB slow, network latency | Optimize backend, DB queries, enable caching, use CDN |
LCP (Largest Contentful Paint) |
Time to render the largest visible content on screen. | Lighthouse / DevTools → Performance | Large images, render blocking CSS/JS | Compress images, preload critical assets, inline CSS |
FID / INP (Interaction to Next Paint) |
Time taken by the browser to respond to user action. | Lighthouse → Performance | Heavy JS execution, long tasks on main thread | Reduce JS, split code, use async/defer |
CLS (Cumulative Layout Shift) |
Measures visual stability of the page. | Lighthouse → Performance | Images without size, ads, dynamic content | Set width/height, avoid layout shifts, use stable UI |
DOM Content Loaded |
Time when HTML is parsed and DOM is ready. | DevTools → Performance / Timing | Large HTML, blocking scripts | Minify HTML, defer JS, remove unused scripts |
JS Execution Time |
Time spent by browser executing JavaScript. | DevTools → Performance → Main | Large JS bundles, complex scripts | Code splitting, remove unused JS, optimize loops |
API Response Time |
Time taken for backend API calls to respond. | DevTools → Network → XHR / Fetch | Slow backend, complex DB queries | Optimize SQL, add caching, reduce API payload |
Resource Load Time (CSS / JS / Images) |
Time to download static resources. | DevTools → Network → Waterfall | Large files, no compression, too many files | Minify, compress, bundle, use CDN & caching |
Throughput (Browser Requests) |
Number of requests handled per second. | DevTools → Network → Overview | Too many requests, inefficient calls | Combine files, reduce requests, use HTTP/2 |
Error Rate (JS / API) |
Percentage of failed JS or API requests. | DevTools → Console + Network | API failures, scripts errors | Fix API endpoints, handle errors, add retries |
Network Latency |
Delay between client and server. | DevTools → Network → Timing (Latency) | Geographic distance, network issues | Use CDN, reduce hops, optimize routes |