Metrics for evaluating performance
1. Frontend (browser) performance metrics
These metrics evaluate how fast and smoothly a page loads and responds:
| Metric | What it measures | Good value |
|---|---|---|
| FCP (First Contentful Paint) | Time until the first content is rendered (text, image) | < 1.8 sec |
| LCP (Largest Contentful Paint) | Time until the largest content element is displayed (for example, a banner, an image) | < 2.5 sec |
| FID (First Input Delay) | Delay between the user's first action (click, scroll) and the page's response | < 100 ms |
| INP (Interaction to Next Paint) | How fast the interface responds to user actions (a newer metric that replaces FID) | < 200 ms |
| CLS (Cumulative Layout Shift) | How much the content shifts during loading | < 0.1 |
| TTFB (Time To First Byte) | Time until the first byte of the server's response is received | < 0.6 sec |
| TBT (Total Blocking Time) | Total time the main thread is blocked and cannot respond | < 200 ms |
These metrics are collected via:
- Lighthouse, PageSpeed Insights
- the Performance API (
performance.getEntriesByType('navigation')) - the Web Vitals SDK
2. JavaScript performance metrics
To evaluate the speed and efficiency of JS code execution:
| Metric | What it evaluates |
|---|---|
| Execution time | Time taken by a piece of code (for example, using console.time() / performance.now()) |
| Memory usage | Memory consumption (performance.memory.usedJSHeapSize) |
| Garbage collection time | Frequency and duration of GC pauses |
| Event loop lag / latency | How much the main thread is blocked |
| FPS (Frames per second) | The interface's refresh rate (should be 60 FPS) |
| Recalculate Style / Layout / Paint time | Time spent painting and rebuilding the DOM |
| Script parse/compile time | Time spent parsing and compiling JS files |
Tools used:
- Chrome DevTools -> Performance
- React Profiler / Vue DevTools
- Lighthouse -> the "Diagnostics" tab
3. Backend performance metrics
If we're talking about Node.js, NestJS, Express, or an API service:
| Metric | What it shows |
|---|---|
| Response Time / Latency | The server's average response time |
| Throughput (RPS) | Requests per second |
| Error rate | The share of failed requests (4xx/5xx) |
| CPU usage | Processor load |
| Memory usage (RSS, heap) | Memory usage |
| Event loop delay | How much the event loop is blocked |
| DB query time | Average SQL query execution time |
| Cache hit ratio | Caching efficiency |
For measurement:
- Prometheus + Grafana
- New Relic, Datadog, Sentry Performance
- Node.js's built-in
performanceAPI
4. User experience metrics (UX Perf Metrics)
| Metric | What it reflects |
|---|---|
| TTI (Time To Interactive) | When the page becomes fully interactive |
| TBT + INP | How comfortable interacting with the page is |
| User timing marks | Custom points via performance.mark() and measure() |
| Perceived performance | The subjective feeling of "speed" via skeletons, lazy loading, prefetching |
5. Integrated indices
| Metric | What it composes |
|---|---|
| Speed Index | How fast all content visually loads |
| Performance Score (Lighthouse) | A composite score on a 0-100 scale |
| Core Web Vitals Score | Google's metric for SEO and UX |
Summary
For the browser - FCP, LCP, INP, CLS, TBT For JS code - Execution time, memory, FPS, GC For the server - Latency, RPS, CPU, DB time For UX - TTI, Speed Index, User timings
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.