Core/Dash Разбор панелей Metric Breakdown Dashboard

Разбор панели Metric Breakdown Dashboard

Составные метрики, такие как LCP и INP, объединяют множество различных временных событий. Оптимизация общего балла требует изоляции этих базовых компонентов. Панель Metric Breakdown Dashboard разбивает производительность на гранулярные фазы для выявления конкретного узкого места.

Этот инструмент заменяет общую оптимизацию точными инженерными целями. Он атрибутирует задержку серверу, сети или выполнению на клиенте.

Анатомия панели Breakdown Dashboard

Панель предоставляет три синхронизированных представления для изоляции первопричины задержки:

• Кольцевая диаграмма вклада (Contribution Donut): Визуализирует относительный вес каждой подчасти. Она отвечает на вопрос: «Какой фактор является основным?». Если Time to First Byte занимает 70% графика, вы знаете, что проблема связана с бэкендом.
• Историческая временная шкала (Historical Timeline): Показывает тренды абсолютных значений каждого компонента во времени. Используйте это для корреляции изменений производительности с конкретными событиями, такими как деплои.
• Сегментированная таблица данных: Разбивает метрику по измерениям (URL, устройство и т.д.). Каждая строка включает полосу распределения, раскрывающую уникальный профиль этого сегмента, что помогает обнаружить выбросы.

Компоненты LCP (Largest Contentful Paint)

LCP измеряет производительность загрузки. Мы разделяем эту метрику на четыре фазы:

• TTFB (Time to First Byte): Время ответа сервера. Высокий TTFB указывает на медленные запросы к базе данных или отсутствие кэширования на edge-серверах.
• Load Delay: Промежуток между начальным ответом HTML и началом загрузки ресурса LCP. Это измеряет задержку обнаружения ресурса.
• Load Time: Время, необходимое для загрузки актива LCP (изображения или шрифта) по сети. Это коррелирует с размером файла и пропускной способностью.
• Render Delay: Время между завершением загрузки ресурса и отрисовкой на экране. Высокий Render Delay часто указывает на блокировку основного потока через JavaScript.

Компоненты TTFB (Time to First Byte)

TTFB служит прокси-метрикой отзывчивости сервера. Эта детализация изолирует фазы сетевого соединения:

• Waiting: Время, которое браузер тратит на ожидание генерации ответа сервером (обработка на бэкенде).
• Cache: Время, затраченное на проверку локальных или промежуточных кэшей.
• DNS: Длительность поиска в Domain Name System.
• Connection: Время, затраченное на установление соединения TCP.
• Request: Время, затраченное на отправку заголовков запроса HTTP.

Компоненты INP (Interaction to Next Paint)

INP измеряет интерактивность. Мы сегментируем жизненный цикл взаимодействия, чтобы точно определить блокировку основного потока:

• Input Delay: Время между взаимодействием пользователя и выполнением обработчика событий. Высокий Input Delay означает, что основной поток был занят.
• Processing: Время, затраченное на выполнение колбэков событий. Это отражает эффективность вашей логики JavaScript.
• Presentation: Время, затраченное браузером на расчет макета и отрисовку следующего кадра.

Рабочий процесс диагностики

Следуйте этой последовательности для диагностики регрессии:

• Количественная оценка узкого места: Посмотрите на диаграмму Donut, чтобы найти доминирующую подчасть. Если TTFB высокий, проверьте ваш сервер. Если Resource Load Delay высокий, проверьте приоритет активов.
• Установление причинно-следственной связи: Проверьте Timeline, чтобы соотнести всплеск с конкретным деплоем или обновлением контента.
• Изоляция контекста: Используйте Data Table, чтобы увидеть, сохраняется ли этот паттерн на всех страницах или он специфичен для определенного шаблона. Поиск паттерна — ключ к развертыванию масштабируемого исправления.

Оптимизация Core Web Vitals

Используйте эти данные для маршрутизации тикетов соответствующей инженерной команде. Назначайте проблемы TTFB на Бэкенд. Назначайте Load Delay и Render Delay на Фронтенд. Назначайте задержки DNS/Connection на Инфраструктуру. Этот оптимизированный процесс сортировки сокращает время расследования и ускоряет решение проблем.