Метрики для оцінки продуктивності
1. Метрики продуктивності фронтенду (браузера)
Ці метрики оцінюють, наскільки швидко і плавно сторінка завантажується і реагує:
| Метрика | Що вимірює | Хороше значення |
|---|---|---|
| FCP (First Contentful Paint) | Час до першого відображеного контенту (текст, картинка) | < 1,8 сек |
| LCP (Largest Contentful Paint) | Час до відображення найбільшого елемента контенту (наприклад, банера, картинки) | < 2,5 сек |
| FID (First Input Delay) | Затримка між першою дією користувача (клік, скрол) і реакцією сторінки | < 100 мс |
| INP (Interaction to Next Paint) | Наскільки швидко інтерфейс реагує на дії користувача (нова метрика, замінює FID) | < 200 мс |
| CLS (Cumulative Layout Shift) | Наскільки сильно зміщується контент під час завантаження | < 0,1 |
| TTFB (Time To First Byte) | Час до отримання першого байта відповіді від сервера | < 0,6 сек |
| TBT (Total Blocking Time) | Загальний час, коли основний потік (main thread) заблокований і не може реагувати | < 200 мс |
Ці метрики збираються через:
- Lighthouse, PageSpeed Insights
- Performance API (
performance.getEntriesByType('navigation')) - Web Vitals SDK
2. Метрики продуктивності JavaScript
Для оцінки швидкості виконання JS-коду та ефективності:
| Метрика | Що оцінює |
|---|---|
| Execution time | Час виконання ділянки коду (наприклад, з console.time() / performance.now()) |
| Memory usage | Споживання пам'яті (performance.memory.usedJSHeapSize) |
| Garbage collection time | Частота і тривалість GC-пауз |
| Event loop lag / latency | Наскільки сильно блокується головний потік |
| FPS (Frames per second) | Частота оновлення інтерфейсу (повинно бути 60 FPS) |
| Recalculate Style / Layout / Paint time | Час, витрачений на відмальовування і перебудову DOM |
| Script parse/compile time | Час парсингу і компіляції JS-файлів |
Використовують інструменти:
- Chrome DevTools -> Performance
- React Profiler / Vue DevTools
- Lighthouse -> вкладка "Diagnostics"
3. Метрики продуктивності бекенда
Якщо йдеться про Node.js, NestJS, Express або API-сервіс:
| Метрика | Що показує |
|---|---|
| Response Time / Latency | Середній час відповіді сервера |
| Throughput (RPS) | Кількість запитів на секунду |
| Error rate | Частка неуспішних запитів (4xx/5xx) |
| CPU usage | Завантаженість процесора |
| Memory usage (RSS, heap) | Використання пам'яті |
| Event loop delay | Наскільки блокується event loop |
| DB query time | Середній час виконання SQL-запитів |
| Cache hit ratio | Ефективність кешування |
Для вимірювання:
- Prometheus + Grafana
- New Relic, Datadog, Sentry Performance
- Вбудований
performanceAPI Node.js
4. Метрики користувацького досвіду (UX Perf Metrics)
| Метрика | Що відображає |
|---|---|
| TTI (Time To Interactive) | Коли сторінка стає повністю інтерактивною |
| TBT + INP | Наскільки комфортно взаємодіяти |
| User timing marks | Власні точки в performance.mark() і measure() |
| Perceived performance | Суб'єктивне відчуття "швидкості" через skeletons, lazy load, prefetch |
5. Інтегровані індекси
| Метрика | Складова характеристика |
|---|---|
| Speed Index | Наскільки швидко весь контент візуально завантажується |
| Performance Score (Lighthouse) | Комплексна оцінка за шкалою 0-100 |
| Core Web Vitals Score | Метрика Google для SEO і UX |
Резюме
Для браузера - FCP, LCP, INP, CLS, TBT Для JS-коду - Execution time, memory, FPS, GC Для сервера - Latency, RPS, CPU, DB time Для UX - TTI, Speed Index, User timings
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.