Як використовувати Performance Insights у Chrome?

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

---

#Як відкрити:

1. Відкрий DevTools: Ctrl+Shift+I / Cmd+Opt+I
2. Перейди на вкладку Performance Insights (якщо не видно, натисни >> справа і обери зі списку)
3. Натисни кнопку Record (або перезавантаж сторінку)
4. Зачекай 5-10 секунд, запис зупиниться автоматично

---

#Що показує:

• Ключові метрики завантаження
• FCP, LCP, CLS, TTI, TBT
• Події і вузькі місця
• блокувальні скрипти, Layout Shifts, затримки в main thread
• Рекомендації щодо покращення
• що конкретно уповільнює рендер (наприклад: "довгі завдання", "анімації", "повільні стилі")

---

#Блоки в інтерфейсі:

• Main Thread Activity: візуальна шкала, де видно важкі операції
• Details: клікаєш по події, отримуєш деталі: яка функція, скільки займала, де перебуває в коді
• Web Vitals Timeline: вертикальні мітки з моментами FCP, LCP тощо
• Recommendations: автоматичні підказки щодо оптимізації

---

#Для чого зручно:

• швидке виявлення проблем без занурення в профайлер
• аналіз впливу конкретного скрипта/компонента на рендер
• діагностика на етапі верстки або до повноцінного профайлінгу

---

Висновок: Performance Insights - це швидкий сканер продуктивності сторінки, який за хвилину показує, де саме гальмує інтерфейс, і дає напрямки для оптимізації. Підходить для швидких перевірок і регулярного моніторингу.