Животные меняются при загрузке страницы
Lighthouse, PageSpeed Insights и WebPageTest: сравнение мобильной производительности
Карточки, чек-листы, таблицы и примеры помогают быстро найти нужный ответ.
Мобильная производительность стала критическим фактором как для пользовательского опыта, так и для ранжирования в поисковых системах. Три ведущих инструмента – Lighthouse, PageSpeed Insights и WebPageTest – предоставляют разные подходы к измерению и анализу Core Web Vitals, сетевых запросов и поведения JavaScript. Ниже – практическое сравнение, которое поможет выбрать подходящий инструмент для конкретных задач.
Каждый из трёх инструментов имеет свои сильные стороны: Lighthouse – быстрый и интегрированный в Chrome DevTools, PageSpeed Insights – удобный для анализа в рамках Search Console, WebPageTest – гибкий с возможностью настройки сценариев. Выбор зависит от того, какие метрики важнее, насколько детально требуется анализ и как планируется интеграция результатов в SEO‑рабочий процесс.
Обзор инструментов
Лайтхаус появился в 2017 как часть Chrome DevTools. Он ориентирован на разработчиков, QA‑специалистов и SEO‑аналитиков, предлагая комплексный аудит: производительность, доступность, лучшие практики, SEO‑оценка и проверка PWA. Сбор данных осуществляется в симулированном окружении, где Lighthouse запускает страницу в Chrome, измеряет First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift и другие Core Web Vitals, а также анализирует структуру кода и сервис‑воркеры.
PageSpeed Insights был запущен в 2015 как инструмент для владельцев сайтов и маркетологов. Он использует тот же ядро Lighthouse, но добавляет реальные данные из Chrome User Experience Report (CrUX). В результате пользователь видит lab‑оценку и field‑оценку, где отображаются фактические метрики, собранные от реальных пользователей, а также рекомендации по улучшению.
WebPageTest, созданный в 2011, рассчитан на инженеров по производительности. Он запускает тесты на реальных браузерах и серверах в разных локациях, позволяет задать скрипты, повторять запросы и получать подробный waterfall‑диаграмму, тайминги первого байта, размеры ресурсов, повторяемость и даже видео‑снимки. Это самый детальный инструмент среди трёх, но требует ручной настройки и больше времени на анализ.
| Инструмент | Целевая аудитория | Тип данных | Особенности сбора |
|---|---|---|---|
| Lighthouse | Разработчики, QA, SEO‑аналитики | Core Web Vitals, доступность, лучшие практики, SEO, PWA | Симуляция в Chrome, один запуск |
| PageSpeed Insights | Владельцы сайтов, маркетологи | Lab‑метрики + field‑метрики (CrUX) | Автоматический сбор реальных пользовательских данных |
| WebPageTest | Инженеры по производительности | Waterfall, тайминги, размер ресурсов, видео, многократные запросы | Настраиваемый скрипт, реальные браузеры, различные локации |
Критерии оценки мобильной производительности
- LCP ≤ 2.5 s – проверяем точку, где загружается основной контент.
- FID
- CLS
- First Contentful Paint (FCP) ≤ 1.8 s – время появления первого контента.
- Time to First Byte (TTFB)
- Speed Index
- Уровень оптимизации изображений – современные форматы (WebP, AVIF) и lazy‑load.
- Минимизация критического CSS – только стили, необходимые для первого рендера.
- Уменьшение количества запросов – объединение файлов, HTTP/2.
- Использование кеширования – заголовки Cache‑Control, ETag.
- Поддержка PWA‑сервис‑воркера – precaching главных ресурсов.
- HTTPS и HSTS – защита и ускорение TLS‑handshake.
- Отсутствие блокирующего JavaScript – defer или async.
- Размер первого пакета
- Регулярный мониторинг в реальном времени – Lighthouse CI, PageSpeed API.
Сравнение метрик и возможностей
| Метрика / Возможность | Lighthouse | PageSpeed Insights | WebPageTest |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Симулирует мобильный Chrome с 3G‑периодом; измеряет время от начала загрузки до первого рендеринга крупнейшего элемента. Точность хорошая, но может отклоняться от реального поведения из‑за предзагрузки ресурсов. | То же, что и Lighthouse, но добавляет «Field Data» (если доступно) и агрегирует результаты по региону. | Использует реальный браузер и сеть; измерения выполняются в реальном времени, включая задержки DNS, TCP, TLS. Точнее в условиях реального пользователя, особенно при сложных сетевых сценариях. |
| CLS (Cumulative Layout Shift) | Считает суммарный сдвиг в течение всей загрузки, основываясь на событиях layout‑shift из Chrome DevTools. Ограничен только одним «запуском» страницы. | Аналогично Lighthouse, но иногда округляет значения до 0.1. | Потенциально более точный, так как может захватывать несколько «сессий» (например, после клика) и учитывать динамическую загрузку контента. |
| First Contentful Paint (FCP) | Показывает момент первого рендеринга любого контента. Использует виртуальный поток. | Тот же алгоритм, но с добавлением «Field Data». | Точное измерение в реальном браузере; может показать различия при разных типах подключений. |
| First Input Delay (FID) | Считает задержку первого взаимодействия пользователя в виртуальной среде. | Аналогично Lighthouse. | Может измерять реальный FID, если включён «Real User Monitoring» (RUM) через скрипт. |
| Настройка пользовательских сценариев | Ограничена настройкой «Simulated Mobile» и «Desktop» в UI. | Не поддерживает кастомные сценарии; только стандартный профиль. | Полностью настраиваемый: выбираем устройство, сеть, браузер, скрипты, multi‑step, прокси, пользовательские заголовки, а также возможность запуска «Real User»‑пакетов. |
| Поддержка PWA‑метрик | Показывает «Installability», «Service Worker» и «Caching» через отдельные отчёты. | Включает базовый чек‑лист PWA в отчёте. | Может запускать пользовательские скрипты для проверки offline‑fallback и manifest.json, а также собирать данные о Service Worker через trace. |
Выбор инструмента зависит от того, что именно требуется измерить. Для быстрых итераций и общего представления о Core Web Vitals Lighthouse и PageSpeed Insights предоставляют удобные отчёты, но WebPageTest даёт более точные данные, особенно при сложных пользовательских сценариях и реальных сетевых условиях.
Как проводить тесты на практике
- Откройте Chrome DevTools (Ctrl+Shift+I) → вкладка Lighthouse. Выберите «Mobile», включите «Performance» и «Best Practices», затем нажмите «Generate report». Сохраните HTML‑отчёт.
- Запустите Lighthouse из CLI:
Получите файлnpx lighthouse https://example.com --output html --output-path ./lighthouse-report.html --only-categories=performance --quietlighthouse-report.htmlдля дальнейшего анализа. - Перейдите на WebPageTest. Введите URL, выберите браузер (Chrome/Firefox), геопозицию (например, «New York»), сеть (4G или Wi‑Fi) и нажмите «Start Test». После завершения скачайте ZIP‑архив с отчётом.
- Откройте отчёт WebPageTest: в разделе Metrics найдите LCP, FCP, TBT, CLS и другие Core Web Vitals. Сравните их с порогами Google (LCP
- В Lighthouse‑отчёте перейдите к вкладке Performance. Обратите внимание на «Largest Contentful Paint», «First Contentful Paint», «Cumulative Layout Shift» и «Total Blocking Time». Запишите значения и сравните с WebPageTest.
- Сравните результаты: если показатели Lighthouse и WebPageTest совпадают, это подтверждает стабильность теста. Различия указывают на влияние сети, кэша или геолокации.
- Сохраните отчёты в репозиторий проекта (например, в папку
reports/) и отметьте дату запуска. Это позволит отслеживать прогресс после оптимизаций.
- Largest Contentful Paint (LCP)
- First Contentful Paint (FCP)
- Cumulative Layout Shift (CLS)
- Total Blocking Time (TBT)
- Speed Index
- Показатель «First Meaningful Paint» (если доступен)
- Количество критических ошибок JavaScript
- Показатель «Largest Contentful Paint» в Lighthouse ≥ 90 %
План аудита в рамках проекта
| Этап | Время | Действия |
|---|---|---|
| Подготовка CI/CD | 1 неделя | Добавить Lighthouse CI в репозиторий, настроить скрипты запуска в CI, подключить PageSpeed Insights API и WebPageTest API, задать пороги Core Web Vitals. |
| Периодический аудит до релиза | Месяц до релиза | Запустить Lighthouse CI, собрать отчёты, сравнить с базой, устранить критические проблемы, пересобрать при необходимости. |
| Релиз | Промежуток | После успешного прохождения CI продвинуть сборку в продакшн. |
| Периодический аудит после релиза | 1 неделя после релиза | Автоматический запуск тестов в CI, проверка метрик, сравнение с предрелизными данными, обновление порогов при необходимости. |
| Непрерывный мониторинг | Непрерывно | Сбор данных из Lighthouse CI, WebPageTest и Google Search Console Core Web Vitals, анализ отклонений, оперативное реагирование на падения. |
Мониторинг и повторный аудит
Мониторинг мобильной производительности – это постоянный контроль ключевых метрик и выявление трендов. Встроенные отчёты PageSpeed Insights в Search Console позволяют видеть средние значения Core Web Vitals за выбранный период, сравнивать их с предыдущими версиями страниц и получать уведомления о критических падениях. Для более детального анализа удобно подключить эти данные к дашборду Google Data Studio, где можно строить графики LCP, FID, CLS и отмечать пороги, при которых требуется вмешательство.
- Периодичность: ежедневные/недельные отчёты PageSpeed Insights.
- Ключевые метрики: LCP ≤ 2.5 с, FID ≤ 100 мс, CLS ≤ 0.1.
- Исторический контекст: сравнение с предыдущими релизами.
- Пороговые оповещения: настройка в Search Console или через Data Studio.
- Хранение: экспорт CSV/JSON для собственного BI‑сервиса.
- Получить API‑ключ WebPageTest (страница Settings → API).
- Создать скрипт, отправляющий запрос:
https://www.webpagetest.org/runtest.php?url=URL&k=API_KEY&f=json. - Парсить JSON, извлекать LCP, FID, CLS, Time to Interactive.
- Сохранять результаты в базу (SQLite/BigQuery) и обновлять графики.
- Запланировать cron‑задачу: 2‑3 раза в неделю, чтобы отследить влияние изменений.
Потенциальные риски и ловушки
Случайные флуктуации сети и кэширование – главные причины «плохих» результатов аудитов. Если в момент запуска Lighthouse, PageSpeed Insights или WebPageTest сервер отвечает медленно, метрика LCP может вырасти, а FCP упасть, создавая ложные сигналы о проблемах. То же самое случается, когда браузер вынужден запрашивать ресурсы из сети, а не из кэша. В WebPageTest кэш может быть «заполнен» устаревшими файлами, что приводит к «плохой» загрузке, тогда как Lighthouse, запускаемый в чистом профиле, покажет «хорошую» загрузку. Такие несогласованности делают сравнение результатов сомнительным и могут привести к ошибочным решениям при оптимизации.
- Запускайте тесты в стабильной сети (LAN, 5G, Wi‑Fi без перегрузки).
- Используйте режим инкогнито или «чистый» профиль браузера, чтобы исключить влияние кэша.
- Очищайте кэш и куки перед каждым запуском, особенно в WebPageTest.
- Проводите несколько итераций (минимум 3) и берите медиану.
- Сравнивайте результаты, полученные на одинаковом устройстве и ОС.
- Включайте одинаковую политику throttling (например, 3G) во всех инструментах.
- Отслеживайте статусы сети в реальном времени (Chrome DevTools → Network → Throttling).
- Записывайте время ответа сервера (TTFB) и сравнивайте с метриками LCP/FCP.
- Проверяйте, не включён ли Service Worker, который может отдавать кэшированные ресурсы.
- Сохраняйте результаты в формате CSV/JSON для последующего анализа.
корректные аудиты возможны только при контролируемом сетевом окружении и чистой кэш‑среде. Следуя простым шагам, можно свести к минимуму искажения и принимать решения, основанные на реальных данных.
Вопросы и ответы
Какие из инструментов лучше подходит для оценки мобильной производительности?
Lighthouse, PageSpeed Insights и WebPageTest дают разный взгляд на мобильную производительность. Lighthouse подходит для быстрых чек‑листов и рекомендаций, PageSpeed Insights интегрируется с Search Console, а WebPageTest позволяет детально анализировать TTFB, сетевые задержки и рендеринг. Выбор зависит от ваших целей: быстрый чек‑лист, глубокий анализ или интеграция с SEO‑инструментами.
Можно ли использовать Lighthouse и WebPageTest одновременно?
Да, можно. Lighthouse удобно запускать в Chrome DevTools или CI, а WebPageTest даёт более точные данные о сети и времени до первого байта. Запускайте оба инструмента, сравнивайте общие метрики (FCP, LCP, CLS), а затем используйте детали WebPageTest для оптимизации.
Как интегрировать результаты аудита в SEO‑стратегию?
Сначала выделите критичные проблемы (CLS, LCP, TTFB). Затем создайте дорожную карту: исправьте код, оптимизируйте изображения, внедрите lazy‑loading. После изменений повторите аудит, сравните метрики и обновите контент‑стратегию, чтобы удержать скорость как фактор ранжирования.
Какие метрики предоставляет каждый инструмент?
Lighthouse выдаёт Core Web Vitals, First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift, Time to Interactive и рекомендации по коду. PageSpeed Insights показывает аналогичные Core Web Vitals, но только для мобильных устройств, плюс общий балл. WebPageTest даёт TTFB, First Byte, Time to First Paint, Speed Index и подробный сетевой график.
Какой инструмент лучше для анализа времени до первого байта (TTFB)?
WebPageTest. Он позволяет выбрать конкретный регион, браузер и тип соединения, а также показывает точное время до первого байта и детали заголовков. Lighthouse и PageSpeed Insights дают только оценку, но не столь детальную.
Какой инструмент лучше для оценки критического пути загрузки (critical rendering path)?
Lighthouse. Он анализирует порядок загрузки ресурсов, синхронные и асинхронные скрипты, а также предлагает рекомендации по оптимизации критического пути, такие как deferring и async.
Какой инструмент позволяет тестировать различные устройства и сети?
WebPageTest. Вы можете выбрать iPhone X, Pixel 2, Android 5G, 4G, LTE, Wi‑Fi, а также задать пользовательский User‑Agent и прокси. PageSpeed Insights ограничен Chrome на мобильном устройстве, а Lighthouse работает только в DevTools.
Как часто стоит проводить аудит мобильной производительности?
После крупных обновлений сайта, релиза новых страниц, изменений в CDN или при появлении новых конкурентов. Обычно раз в квартал достаточно, но при активной работе над UX можно проводить ежемесячно.
Как сравнивать результаты между инструментами?
Сравните общие Core Web Vitals: FCP, LCP, CLS. Для TTFB и Speed Index используйте WebPageTest как эталон. Если показатели различаются, проверьте сетевые условия и браузер, так как Lighthouse использует Chrome, а WebPageTest может использовать Firefox.
Какие ограничения у PageSpeed Insights?
PageSpeed Insights работает только в Chrome, не учитывает пользовательские прокси и реальные сети, а также не показывает подробный сетевой график. Он ограничен 100 000 запросов в сутки, что может помешать регулярным тестам больших сайтов.
Важно
Материал носит информационный характер. Перед внедрением рекомендаций учитывайте нишу, регион, конкурентов, текущее состояние сайта и бизнес-цели проекта.
Материал подготовлен и проверен редакцией AX.SEO
Редакция AX.SEO готовит материалы о SEO, разработке, AI, аналитике, маркетинге и росте digital-проектов.
Проверяет практическую применимость рекомендаций, корректность терминов и соответствие материала digital-тематике.