Що робить вкладка Performance?

Вкладка Performance у Chrome DevTools записує і показує, що відбувається в браузері на рівні рушія, коли сторінка завантажується і працює.

---

#Що робить:

1. Записує таймлайн активності сторінки

• парсинг, рендер, виконання JS, мережеві запити, GC, події тощо
• дозволяє побачити, коли і чому виникають гальмування

2. Показує завантаження і виконання JavaScript

• які скрипти запускалися, скільки займали, чи блокували головний потік

3. Профілює відмальовування (rendering)

• Layout, Paint, Composite, які елементи викликали перерахунки або перемальовування

4. Виявляє блокування

• long tasks (> 50 мс), main thread blocking
• допомагає зрозуміти, де і чому інтерфейс «не реагував»

5. Показує ключові Web Vitals (LCP, FCP, TTI)

• їх можна знайти прямо на таймлайні

---

#Як використовувати:

1. Відкрий вкладку Performance
2. Натисни кнопку ● Record
3. Перезавантаж сторінку або виконай дії
4. Натисни ■ Stop
5. Вивчи таймлайн:

• зверху кадри (FPS)
• нижче: час виконання скриптів, рендерингу, layout, paint
• клікай на ділянки, щоб бачити деталі (що саме виконувалося і чому)

---

#Що дає:

• точне розуміння, де сайт гальмує
• які завдання блокують потік
• які події викликають зайвий layout/paint
• допомагає оптимізувати час завантаження і відзивчивість

---

Висновок: Вкладка Performance - це як рентген для браузера: вона показує, як саме твій сайт живе всередині і де просідає у швидкості.