Які знаєте метрики вебсайту?

Повне пояснення

Що це і навіщо

• Метрики – це вимірювані дані, що відображають стан веб‑сайту.
• Вони використовуються для моніторингу продуктивності, аналізу поведінки користувачів і прийняття рішень щодо оптимізації.

Ключові принципи/терміни

• Load time / LCP (Largest Contentful Paint) – час, коли головний контент стає видимим.
• First Contentful Paint (FCP) – перший момент, коли браузер рендерить щось.
• Time to Interactive (TTI) – коли сторінка стає повністю взаємодійною.
• Bounce rate – відсоток користувачів, що покидають сайт після однієї сторінки.
• Conversion rate – відсоток користувачів, що виконали цільову дію (покупка, підписка тощо).
• Page Views / Sessions – кількість переглядів і сесій.

Як це працює

• Метрики збираються за допомогою інструментів (Google Analytics, Web Vitals API, Lighthouse) або власних скриптів.
• Дані зберігаються у базах (BigQuery, ClickHouse) і аналізуються через дашборди.

Практика та реалізація

• Для збору Web Vitals можна вставити скрипт:

<script>
  import { getCLS, getFID, getLCP } from 'web-vitals';
  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

• У Google Analytics можна налаштувати події для відстеження конверсій.

Тестування

• Використовують Lighthouse (CLI або Chrome DevTools) для автоматизованого тесту швидкості.
• В Jest можна перевірити, що API повертає очікувані метрики:

import { getMetrics } from './metrics';
it('returns load time', () => {
  expect(getMetrics().loadTime).toBeGreaterThan(0);
});

Безпека та приватність

• Метрики не повинні містити персональних даних; використовують анонімізацію IP.
• Дотримання GDPR: користувачі мають можливість відмовитися від збору.

Оптимізація

• Зменшення LCP: оптимізувати зображення, використовувати lazy‑loading.
• Зменшити FID: мінімізувати JavaScript, розділити код.
• Підвищення конверсії: A/B‑тестування UI, поліпшення CTA.

Часті помилки

1. Не вимірювати LCP → не розуміємо, коли користувач бачить контент.
2. Відсутність TTI → сторінка здається «замороженою».
3. Не відстежувати bounce rate → не знаємо, чому користувачі йдуть.
4. Перевантаження даних → великі запити до API збільшують load time.
5. Не анонімізувати IP → порушення GDPR.
6. Відсутність метрик у мобільних пристроях → не розуміємо UX на смартфонах.
7. Не використовувати кешування → збільшує серверний час.
8. Неправильна конфігурація CDN → збільшує RTT.

Cheatsheet

• LCP < 2.5s – хороша.
• FID < 100ms – швидка реакція.
• TTI < 5s – повноцінна взаємодія.
• Bounce rate < 40% – хороша залученість.
• Conversion rate > 2% – ефективна маркетингова кампанія.