Сбор и обработка метрик frontend с продакшна

Описание

В докладе нужно рассказать, зачем нужны метрики, какие бывают, какие есть инструменты для их сбора, как оптимально собирать, храниуть полученные данные и работать с ними. Возможны 2 варианта доклада - описание успешного кейса или гайд по организации системы сбора метрик с нуля.

Структура доклада, вариант 1 “Success story, или как мы это сделали”

• Введение
  • Приветствие и представление
  • Введение в тему сбора и обработки frontend-метрик с продакшена
  • Цель и значимость доклада
• Значение frontend-метрик в продакшене
  • Обзор метрик
    • Метрики сети, загрузки страницы и ресурсов, время ответа сервера
    • Метрики рендеринга: FCP, LCP, длительность первого рендера, ререндеры, FPS
    • Метрики, связанные с JavaScript: TTI, TBT, INP, FID
    • Свои кастомные метрики
  • Польза от сбора frontend-метрик в продакшене
    • Идентификация узких мест и проблем производительности
    • Оценка влияния изменений кода на пользовательский опыт
    • Оптимизация и улучшение производительности в реальных условиях
• Сбор frontend-метрик в продакшене
  • Инструменты сбора метрик
    • Обзор популярных инструментов: Google Analytics, New Relic, Yandex.Metrica
    • Функциональность и особенности каждого инструмента
    • Примеры использования инструментов для сбора метрик frontend
  • Реализация сбора метрик на frontend
    • Встраивание кода для сбора метрик в приложение
    • Определение и отправка нужных метрик
    • Практические советы по реализации сбора метрик
• Обработка и анализ метрик frontend
  • Хранение и агрегация метрик
    • Выбор и настройка системы хранения метрик
    • Агрегация данных для удобного анализа и отчётности
    • Практики и инструменты для обработки и хранения метрик
  • Визуализация и мониторинг метрик
    • Использование дашбордов и графиков для визуализации метрик
    • Автоматический мониторинг и оповещения при превышении пороговых значений
    • Примеры инструментов для визуализации и мониторинга метрик
• Практические примеры и советы
  • Демонстрация примеров сбора, обработки и анализа метрик с продакшна
  • Обзор реальных сценариев использования и преимуществ
  • Практические советы по оптимальному использованию и конфигурации инструментов
• Заключение
  • Подведение итогов и основные выводы
  • Возможности для будущего развития и применения метрик
  • Заключительное слово и благодарности

Структура доклада, вариант 2 “DIY, или как сделать такую систему с нуля”

• Введение
  • Приветствие и представление
  • Введение в тему сбора и обработки frontend-метрик в продакшене
  • Цель и значимость доклада
• Значение frontend-метрик в продакшене
  • Обзор метрик
    • Метрики сети, загрузки страницы и ресурсов, время ответа сервера
    • Метрики рендеринга: FCP, LCP, FPS
    • Метрики, связанные с JavaScript: TTI, TBT, INP, FID
    • Метрики, связанные с React: длительность первого рендера, ререндеры, длительность гидрации
  • Польза от сбора frontend-метрик в продакшене
    • Идентификация узких мест и проблем производительности
    • Оценка влияния изменений кода на пользовательский опыт
    • Оптимизация и улучшение производительности в реальных условиях
• Сбор frontend-метрик в продакшене
  • Как и чем собирать метрики
    • Метрики, которые браузер собирает автоматически, и как их получить
    • Как измерять свои нестандартные метрики
    • Как отправлять метрики
  • Реализация сбора frontend-метрик в продакшене
    • Встраивание кода для сбора метрик в приложение
    • Определение и отправка нужных метрик
    • Практические советы по реализации сбора метрик
• Обработка и анализ frontend-метрик
  • Хранение и агрегация метрик
    • Выбор и настройка системы хранения метрик
    • Агрегация данных для удобного анализа и отчетности
    • Практики и инструменты для обработки и хранения метрик
  • Визуализация и мониторинг метрик
    • Использование дашбордов и графиков для визуализации метрик
    • Автоматический мониторинг и оповещения при превышении пороговых значений
    • Примеры инструментов для визуализации и мониторинга метрик
• Практические примеры и советы
  • Демонстрация примеров сбора, обработки и анализа метрик
  • Обзор реальных сценариев использования и преимуществ
  • Практические советы по оптимальному использованию и конфигурации инструментов
• Заключение
  • Подведение итогов и основные выводы
  • Возможности для будущего развития и применения метрик
  • Заключительное слово и благодарности

Докладчик/Докладчица

Хорошо ориентируется в инструментах и практиках сбора метрик, понимает, с какими трудностями можно столкнуться в процессе и как с ними справляться.

Сложность

В зависимости от выбранного формата доклад может быть либо описанием успешного кейса организации сбора метрик, либо руководством по организации сбора с нуля.