Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як використовувати Performance Insights у Chrome?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Performance Insights** - це спрощена і більш візуальна версія вкладки Performance у Chrome DevTools, яка допомагає швидко зрозуміти, що гальмує сторінку, без глибокого аналізу таймлайнів. **Ключове:** Performance Insights - це швидкий сканер продуктивності сторінки, який за хвилину показує, де саме гальмує інтерфейс, і дає напрямки для оптимізації.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 - це швидкий сканер продуктивності сторінки, який за хвилину показує, де саме гальмує інтерфейс, і дає напрямки для оптимізації. Підходить для швидких перевірок і регулярного моніторингу.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.