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

Інструменти для аналізу продуктивності сайту поділяються на 2 типи: онлайн-сервіси та інтеграції в devtools / CI. Ось основні:

---

#Браузерні інструменти

• Chrome DevTools → вкладка Performance Записує і візуалізує поведінку сторінки (таймлайни, блокування, layout, paint, GC тощо)
• Chrome DevTools → Lighthouse Оцінює сайт за метриками (LCP, FID, CLS, TBT та ін.), дає рекомендації.
• Web Vitals Extension Показує реальні показники (LCP, CLS, FID) у реальному часі прямо в браузері.

---

#Онлайн-сервіси

• PageSpeed Insights Від Google. Аналізує як реальні користувацькі дані (CrUX), так і симульовану продуктивність.
• WebPageTest Дає дуже деталізовану картину: waterfall, filmstrip, блокування потоків, TTI, візуальний прогрес тощо.
• GTmetrix Більш візуальний інтерфейс для аналізу швидкості завантаження і рекомендацій.

---

#Інструменти для автоматизації та CI

• Lighthouse CI Автоматичний аудит сайту в CI/CD. Дозволяє встановлювати performance budget і зупиняти білд при порушеннях.
• Web Vitals Reporters Підключаються до реального трафіку (через JS) і надсилають показники (LCP, FID, CLS) в аналітику (наприклад, GA, BigQuery).
• Sitespeed.io Open source інструмент для інтеграції Lighthouse, WebPageTest і аналізу на великому обсязі сторінок.

---

#Сторонні профайлери / доповнення

• Perfume.js JS-бібліотека для збору web vitals прямо в браузері у користувачів.
• Calibre, SpeedCurve, Treo Платні інструменти моніторингу продуктивності в динаміці, з порівнянням версій, алертами і метриками в реальному часі.

---

Висновок: Якщо тестуєш локально → DevTools + Lighthouse. Якщо перевіряєш прод → PageSpeed Insights + Web Vitals. Якщо автоматизуєш → Lighthouse CI + Web Vitals Reporter.