WebPageTest

WebPageTest — профессиональный инструмент для детального анализа производительности веб-страниц с настраиваемыми условиями (устройство, браузер, регион, throttling), waterfall-диаграммами и видеозаписью загрузки.

Зачем нужно

PageSpeed Insights/Lighthouse дают хороший обзор, но WebPageTest предоставляет уровень детализации, которого не хватает для глубокой диагностики: точный waterfall, ресурсы блокирующие рендер, время соединения по каждому домену, filmstrip видео загрузки. Профессиональный инструмент для performance engineering.

Где используется

  • Детальная диагностика LCP: что именно задерживает — сеть, сервер, скрипты?
  • Анализ третьесторонних скриптов и их влияния
  • Сравнение производительности из разных регионов (реальные серверы, не эмуляция)
  • Проверка эффекта оптимизаций с видеосравнением

Основной контент

Ключевые возможности WebPageTest

Тестирование из реальных машин в 40+ регионах мира
Настройка сети: Dial-Up, 3G, LTE, Cable, FIOS, Custom
Устройства: реальные Android через Moto G4, Pixel, iPhone (через browserstack)
Filmstrip: покадровое видео загрузки (что пользователь видит в момент X?)
Waterfall: ресурсы в хронологическом порядке с timing breakdown
Repeat view: тест с кешем (имитация повторного посещения)

Интерпретация Waterfall диаграммы

Цвета запроса:
  DNS lookup      (зелёный)   → Разрешение домена
  TCP Connect     (оранжевый) → Установка соединения
  TLS Negotiate   (фиолетовый)→ SSL handshake
  Time to First Byte (TTFB)  → Сервер отвечает
  Content Download (синий)    → Загрузка контента

Ключевые индикаторы проблем:
  Длинный TTFB  → Медленный сервер или CDN
  Много DNS      → Слишком много доменов (шрифты, аналитика, реклама)
  Render-blocking → Скрипты/CSS блокируют рендер
  Waterfall "лестница" → Последовательные зависимые запросы

WebPageTest API (автоматизация)

const WebPageTest = require('webpagetest');
const wpt = new WebPageTest('www.webpagetest.org', process.env.WPT_API_KEY);

async function runTest(url) {
  return new Promise((resolve, reject) => {
    wpt.runTest(url, {
      location: 'Dulles:Chrome',
      connectivity: 'Cable',
      runs: 3,
      firstViewOnly: false,
      video: true,
    }, (err, result) => {
      if (err) return reject(err);

      const summary = result.data.median.firstView;
      console.log({
        TTFB:       summary.TTFB,
        LCP:        summary.chromeUserTiming?.LargestContentfulPaint,
        CLS:        summary.chromeUserTiming?.CumulativeLayoutShift,
        SpeedIndex: summary.SpeedIndex,
        filmstrip:  result.data.runs[1].firstView.videoFrames,
      });

      resolve(result);
    });
  });
}

Анализ third-party impact

WebPageTest → "Domains" вкладка показывает:
  - Сколько миллисекунд добавляет каждый домен
  - Количество запросов по домену
  - Является ли домен render-blocking

Типичные виновники:
  Google Tag Manager  → Загружает дополнительные скрипты
  Facebook Pixel      → Блокирует main thread
  Google Fonts        → Render-blocking без preconnect
  Chat widgets        → Тяжёлые третьесторонние скрипты

Filmstrip сравнение (A/B визуально)

# Через UI: "Visual Comparison" → вставить 2 URL
# Показывает по кадрам, что видит пользователь в каждый момент

# API сравнение:
wpt.createVideoComparison(
  [test1Id, test2Id],
  { type: 'median' },
  callback
);

Частые ошибки

  • Тестирование только из одного региона — TTFB радикально отличается по регионам
  • Анализ только First View без Repeat View — кеш критичен для повторных посещений
  • Один запуск вместо 3-5 — результаты варьируются, нужна медиана
  • Игнорирование filmstrip — числа не показывают, что реально видит пользователь

Связанные темы

Ресурсы