Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Метрики для оцінки продуктивності». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Продуктивність** оцінюють за метриками фронтенду (FCP, LCP, INP, CLS, TBT), метриками самого JS-коду (час виконання, пам'ять, FPS, GC), метриками бекенда (latency, RPS, CPU, час запитів до БД) і метриками UX (TTI, Speed Index). **Ключове:** для браузера головні - FCP, LCP, INP, CLS, TBT; для сервера - Latency, RPS, CPU, DB time.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 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 - Вбудований `performance` API 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Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.