Skip to main content

Що таке performance budget?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Performance budget - це заздалегідь встановлений ліміт на «вагу» і час завантаження ключових ресурсів сайту, щоб не допустити деградації продуктивності.

Що можна обмежувати в performance budget

  • загальну вагу сторінки (наприклад, ≤ 170 KB для mobile)
  • розмір JS/CSS (наприклад, JS ≤ 150 KB, CSS ≤ 50 KB)
  • кількість HTTP-запитів
  • час завантаження (наприклад, TTI ≤ 3 с, LCP ≤ 2.5 с)
  • Web Vitals (LCP, FID, CLS)
  • кількість шрифтів, зображень, сторонніх скриптів

Приклад

Команді кажуть:

  • не більше 100 KB JS
  • LCP не довше 2.5 секунди
  • FID < 100 мс

Якщо вийти за ці рамки, білд не проходить або збирається з попередженням.

Навіщо це потрібно

  • не дати сайту «розпухнути» у міру розвитку
  • контролювати продуктивність як частину CI/CD
  • зберігати швидкий UX за будь-яких правок
  • спростити комунікацію між дизайнерами, фронтом і менеджерами: у всіх одні цифри

Висновок

Performance budget - це як дієта для сайту: жорсткі, вимірювані ліміти, які не дають йому стати повільним, важким і лінивим.

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

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

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

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