Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як використовувати Chrome DevTools для вимірювань?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Chrome DevTools** - це вбудований інструмент розробника в Google Chrome, який можна використовувати для вимірювання продуктивності сайту за ключовими метриками. **Ключове:** вкладка Performance дає глибоку трасировку, Lighthouse - швидку оцінку і звіт, а Network - замір завантаження ресурсів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Chrome DevTools** - це вбудований інструмент розробника в Google Chrome. Його можна використовувати для вимірювання продуктивності сайту за ключовими метриками. --- ### Як відкрити DevTools: - ПК: `Ctrl + Shift + I` або `F12` - Mac: `Cmd + Option + I` - Або правий клік → «Переглянути код» --- ### Вкладка **Performance** **Для аналізу рендера, блокувань, верстки (layout) і JS:** 1. Перейди на вкладку **Performance** 2. Натисни **Record** 3. Перезавантаж сторінку або виконай потрібні дії 4. Зупини запис Що покаже: - таймлайни завантаження (FCP, LCP, TTI) - які завдання блокують потік - скільки часу витрачає рендер, JS, GC тощо - Paint, Layout, Composite і все, що пов'язано з рендерингом --- ### Вкладка **Lighthouse** **Для отримання звіту з Web Vitals:** 1. Вкладка **Lighthouse** 2. Обери тип пристрою (мобільний/десктоп) 3. Запусти аналіз 4. Отримаєш оцінку за метриками: - LCP, FID, CLS, TTI, TBT, SEO, доступність та ін. - рекомендації щодо покращення --- ### Вкладка **Web Vitals (через розширення)** - Встанови розширення **Web Vitals** із Chrome Web Store - Показує в реальному часі: LCP, FID, CLS для поточної сторінки - Базується на реальних даних браузера --- ### Вкладка **Network** **Корисно для:** - аналізу завантаження ресурсів - виміру TTFB, розміру, часу відповіді - відстеження блокувальних ресурсів (CSS, JS) --- ### Вкладка **Performance Insights (у нових версіях)** - Більш дружній візуальний інтерфейс - Робить акцент на Web Vitals і проблемних зонах - Можна запускати аналіз однією кнопкою: показує, де вузькі місця --- **Висновок:** Використовуй вкладку **Performance**: для глибокої трасировки. **Lighthouse**: для швидкої оцінки і звіту. **Network**: для замірів завантаження ресурсів. Все це допомагає побачити, де сайт реально гальмує і чому.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.