Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які метрики продуктивності ви знаєте?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Ключові метрики продуктивності - це **Web Vitals**: LCP (швидкість завантаження основного контенту), INP (відгук інтерфейсу на дії користувача) і CLS (стабільність верстки), а також додаткові показники на кшталт TTFB, FCP, TTI, TBT. **Ключове:** для SPA (Vue, React) особливо важливі bundle size, hydration time, FPS і Long Tasks.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Ключові Web Vitals (основні веб-метрики) Це метрики, які Google використовує для оцінки продуктивності сайту. --- ### 1. LCP - Largest Contentful Paint **Коли з'являється найбільший видимий елемент** (картинка, заголовок тощо). Показує **швидкість завантаження основного контенту**. Хороший показник: **до 2.5 сек**. --- ### 2. FID -> замінений на INP (Interaction to Next Paint) **INP** - наскільки швидко інтерфейс реагує на дії користувача. Оцінює **інтерактивність**. --- ### 3. CLS - Cumulative Layout Shift Показує, наскільки **стрибає розмітка** під час завантаження. Великий CLS = поганий UX (кнопка "тікає"). --- ## Додаткові важливі метрики завантаження --- ### 4. TTFB - Time To First Byte Час від запиту до отримання першого байта. Залежить від сервера. --- ### 5. FCP - First Contentful Paint Коли з'являється *перший* візуальний елемент. --- ### 6. TTI - Time To Interactive Коли сторінка стає повністю інтерактивною. --- ### 7. TBT - Total Blocking Time Загальний час блокування головного потоку. Сильно залежить від JS-бандла. --- ## Метрики, актуальні для SPA (Vue, React) SPA навантажує JS, тому важливі специфічні показники. --- ### 8. Bundle size Розмір підсумкового JavaScript-бандла. Чим більший бандл, тим довший TTI. --- ### 9. Number of JS chunks / code splitting Кількість розбитих файлів після lazy loading. --- ### 10. Hydration Time (для SSR/CSR + SSR) Час, який потрібен, щоб оживити статичну розмітку. Актуально для: - Nuxt - Next - SSR-проєктів --- ### 11. Memory usage Використання пам'яті браузера. SPA може споживати багато RAM. --- ### 12. FPS (Frame rate) Наскільки плавно працює UI: - анімації - скрол - drag & drop --- ### 13. Long Tasks (>50ms) Довгі задачі блокують UI. Можна дивитися через Performance Tools. --- ### 14. Component render time (Vue Devtools) Час рендеру компонентів: - зміна reactive state - кількість перемальовок - повторний рендер при props-drilling --- ### №15: Час до першої взаємодії всередині SPA-маршруту Коли роутер завантажує компонент ліниво. --- ## Короткий список для співбесіди (обов'язковий мінімум) Якщо співбесіда коротка, достатньо знати: 1. **LCP** - швидкість завантаження основного контенту 2. **INP** - чуйність інтерфейсу 3. **CLS** - стабільність верстки 4. **TTFB** - швидкість відповіді сервера 5. **Bundle size**, **TTI**, **TBT** - важливі для SPA 6. **FPS** і **Long Tasks** - важливі для плавностіДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.