Як використовувати Chrome DevTools для вимірювань?

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: для замірів завантаження ресурсів. Все це допомагає побачити, де сайт реально гальмує і чому.