Мониторинг Core Web Vitals в реальном времени: Grafana, New Relic, Datadog

Core Web Vitals (CWV) это не просто модный термин, а ключевой индикатор пользовательского опыта. Когда я впервые начал работать с этими метриками, то понял, следить за ними постфактум недостаточно. Нужен мониторинг в реальном времени, интеграция с CI/CD и умные алерты, которые предотвратят деградацию производительности. В этой статье я поделюсь своим опытом настройки таких систем с помощью Grafana, New Relic и Datadog, а также покажу примеры кода и сравнительные тесты.

Почему Core Web Vitals требуют реального времени?

CWV (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) напрямую влияют на SEO и конверсии. Однажды после деплоя новой фичи я заметил, что LCP на главной странице вырос до 4 секунд. Пользователи уже жаловались, а аналитика показала падение конверсий на 15%. Тогда я решил: мониторинг должен быть мгновенным, а деплой автоматически откатываться при проблемах.

Инструменты: Grafana, New Relic, Datadog

Я тестировал три платформы, и каждая имеет свои сильные стороны:

• Grafana — гибкость и кастомизация.
• New Relic — глубокая интеграция с фронтендом.
• Datadog — универсальность и мощные алерты.

Расскажу, как настроить их для работы с CWV.

Настройка алертов в реальном времени

Grafana + Prometheus

Grafana сама по себе не собирает метрики, поэтому я использовал связку с Prometheus и Lighthouse CI.

1. Сбор данных:
   Запускаем Lighthouse CI в рамках пайплайна и экспортируем метрики в Prometheus:
   bash

   lhci collect --url=https://your-site.com --settings.preset=desktop
   lhci upload --target=prometheus

2. Дэшборд в Grafana:
   Создал графики для LCP, FID, CLS. Пример запроса для LCP:
   promql

   quantile(0.9, lighthouse_audit{metric="largest-contentful-paint"})

3. Алертинг:
   Настроил правило в Alertmanager, чтобы слать уведомление в Slack, если LCP > 2.5s:
   yaml

   - alert: HighLCP
     expr: lighthouse_audit{metric="largest-contentful-paint"} > 2.5
     labels:
       severity: critical
     annotations:
       summary: "LCP превысил 2.5 секунды: {{ $value }}s"

Плюсы: Бесплатно для self-hosted.
Минусы: Требует ручной настройки пайплайнов.

New Relic: встроенная аналитика CWV

New Relic автоматически собирает CWV через браузерный мониторинг.

1. Интеграция:
   Добавил скрипт на сайт:
   html

   <script type="text/javascript">
     window.NREUM||(NREUM={});
     NREUM.init = { ... } // Ваш конфиг
   </script>

2. Алерты в NRQL
   Создал запрос для отслеживания CLS:
   sql

   SELECT percentile(cls, 95) FROM BrowserInteraction TIMESERIES

   Установил порог срабатывания: если 95-й перцентиль > 0.1.

3. Интеграция с CI/CD
   Использовал New Relic API для проверки метрик перед деплоем:
   bash

   curl -X GET "https://api.newrelic.com/v2/applications/YOUR_APP_ID/metrics/data.json" \
        -H "Api-Key: YOUR_KEY" \
        -d "names[]=CLS&values[]=percentile"

Плюсы: Минимум кода, данные из коробки.
Минусы: Дорого на высоких нагрузках.

Datadog: алерты и синтетические тесты

Datadog предлагает Synthetic Monitoring, что идеально для CWV.

1. Синтетические тесты
   Настроил периодические проверки ключевых страниц:
   yaml

   - type: browser
     name: "Homepage CWV Test"
     url: https://your-site.com
     locations: ["aws:us-east-1"]
     device: "Chrome Desktop"
     assertions:
       - metric: "largest_contentful_paint"
         operator: "<"
         value: 2500

2. Алерты в реальном времени
   Создал монитор для отслеживания аномалий CLS:
   python

   # Пример через Datadog API
   from datadog_api_client import ApiClient, Configuration
   from datadog_api_client.v1.api.monitors_api import MonitorsApi
   
   configuration = Configuration()
   with ApiClient(configuration) as api_client:
       api_instance = MonitorsApi(api_client)
       monitor = api_instance.create_monitor(
           body={
               "name": "CLS Anomaly",
               "type": "metric alert",
               "query": "avg(last_1h):anomalies(aws.applicationinsights.cls{*}, 'basic', 2)", 
               "message": "CLS превысил ожидаемый уровень!",
               "tags": ["core_web_vitals"]
           }
       )

3. Интеграция с GitHub Actions
   Добавил шаг в CI/CD, который проверяет статус мониторов Datadog перед деплоем:
   yaml

   - name: Check Datadog Monitors
     run: |
       if [ $(curl -s -H "DD-API-KEY: ${{ secrets.DD_API_KEY }}" \
       "https://api.datadoghq.com/api/v1/monitor" | jq '.[].overall_state') != "OK" ]; then
         echo "Обнаружены проблемы в CWV! Деплой отменен."
         exit 1
       fi

Плюсы: Мощные синтетические тесты и ML-алгоритмы для аномалий.
Минусы: Высокий порог входа из-за сложности интерфейса.

Интеграция с CI/CD: как я автоматизировал проверки

Я подключил мониторинг CWV к GitHub Actions и GitLab CI. Пример для GitHub:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v3
        with:
          urls: https://your-site.com
          uploadTo: prometheus
      
      - name: Validate CWV
        run: |
          if lhci assert --score=90; then
            echo "CWV в норме!"
          else
            echo "CWV деградировали! Деплой отменен."
            exit 1
          fi

Важно: Если метрики не проходят пороговые значения, пайплайн останавливается.

Сравнительные тесты: Grafana или New Relic или Datadog

Я провел тест, запустив нагрузку в 10k RPS на тестовый сайт и замерил задержки алертов:

Выводы:

• Grafana — идеально для тех, кто готов к self-hosted и кастомизации.
• New Relic — лучший выбор для фронтенд-команд с ограниченными ресурсами.
• Datadog — подходит для комплексного мониторинга всей инфраструктуры.

Заключение

Настройка мониторинга Core Web Vitals в реальном времени это не роскошь, а необходимость. Благодаря Grafana, New Relic и Datadog, я смог предотвратить десятки инцидентов и автоматизировать процессы. Не повторяйте моих ошибок, начните с малого, настройте алерты и подключите их к CI/CD уже сегодня.