Suggest an edit

Improve this article

Refine the answer for “Metrics for evaluating performance”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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 `performance` API

---

## 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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts627 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.