Skip to main content

Які метрики продуктивності ви знаєте?

VueJunior~2 хв читання
Запропонувати правку

Ключові 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 - важливі для плавності

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку