WebPageTest.org: Рабочий инструмент для тестирования скорости сайта с открытым кодом

Core Web Vitals — один из факторов ранжирования в Google. Это означает, что запуск тестов производительности становится обязательным для всех владельцев сайтов, которые хотят улучшить поисковую оптимизацию (SEO).

Более десяти лет GTmetrix был стандартной рекомендацией для всех, кому нужно было быстро оценить скорость своего сайта. Он был быстрым, простым и, что важнее всего, щедрым — но мы говорим «был», потому что к концу 2023 и середине 2024 года эта щедрость испарилась.

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

К счастью, есть WebPageTest.org (WPT), платформа, которая существует с 2008 года, обеспечивая самые тщательные аудиты производительности в интернете.

Итак, мы протестировали WPT по основным параметрам производительности веб-сайтов, чтобы определить, может ли он заменить другие инструменты тестирования скорости, такие как GTmetrix, без каких-либо компромиссов.

Давайте разберемся.

Каковы истоки WebPageTest.org?

WebPageTest.org — это платформа для тестирования производительности с открытым исходным кодом, которая предоставляет глубокую диагностику веб-страниц. Она началась как проект внутри AOL, а позже была разработана Патриком Минаном в Google, чтобы помочь инженерам понять поведение браузера.

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

Фактически, инженеры по производительности создали этот инструмент специально для других инженеров по производительности, которым требуются высокоточные данные. Каждый тест запускается на реальном браузере, будь то Chrome, Firefox или Safari, а не на бесголовой симуляции, которая может пропустить ошибки отрисовки. Эта техническая основа гарантирует, что результаты отражают то, что реальный посетитель испытывает на своем устройстве.

В 2020 году проект перешел к Catchpoint, чтобы гарантировать наличие ресурсов для его бесплатного использования публикой. Теперь WPT финансируется не только подписками, но и материнской компанией-предприятием, которая использует данные для собственных исследований.

Как набор функций подходит для повседневного использования?

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

Мониторинг Core Web Vitals

WebPageTest не просто выставляет оценку «прошел/не прошел» — он детально разбивает Core Web Vitals (LCP, CLS, INP) с таким уровнем детализации, который часто скрыт в Insights.

Когда вы запускаете тест, WPT визуализирует эти метрики сайта на временной шкале. Вместо того чтобы просто сказать «Ваш Cumulative Layout Shift равен 0,25», он выделяет точный кадр в последовательности загрузки, где произошел сдвиг.

Это критически важно для отладки, потому что вы можете увидеть точную компоновку до скачка и после.

Он также представляет раздел «Возможности» (Opportunities), который зеркалирует «Рекомендации» из GTmetrix, к которым мы привыкли, но с лучшим приоритизированием.

Если у вас есть 10 проблем, WPT помогает определить, какие из них не важны для немедленного улучшения производительности, а на каких нужно сосредоточиться, чтобы реально улучшить SEO и скорость сайта.

Водопадные диаграммы и анализ запросов

Водопадная диаграмма — жемчужина WebPageTest: она плотная, красочная и поначалу пугающая. Но как только вы научитесь её читать, вы больше не захотите возвращаться к упрощенному списку.

Бесплатная версия GTmetrix показывала здесь только базовый список файлов. WebPageTest показывает каждый отдельный запрос, разбитый на пять-десять различных фаз, выделенных цветом для диагностики:​

• DNS и подключение: Показывает, сколько времени занял поиск сервера. Длинные полосы здесь означают, что ваш DNS-провайдер медленный.
• SSL-согласование: Показывает время, затраченное на установление безопасного соединения. Если оно огромное, конфигурация TLS вашего сервера может быть устаревшей.
• Время до первого байта: TTFB — это время, которое требуется браузеру для получения первого байта ответа сервера. Длинная полоса указывает на медленное время отклика сервера, что часто указывает на проблемы с запросами к базе данных или серверной обработкой (сигнализируя, что пора заняться оптимизацией базы данных).
• Загрузка контента: Браузер фактически получает данные.

Самая мощная функция здесь — это вид «Соединение» (Connection).

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

Рекомендации по производительности

Все предложения WPT учитывают контекст. Вместо общего чек-листа WebPageTest использует свой механизм «Возможностей» и «Экспериментов».

Вместо того чтобы предлагать «Отложить выполнение JavaScript», он определяет конкретные пакеты, блокирующие основной поток, и предлагает запустить тест без них.

Еще более впечатляет функция «Эксперименты без кода» (No-Code Experiments). Она позволяет «протестировать» исправление, фактически не меняя ваш код. Инструмент динамически переписывает HTML и дает вам результат. Это экономит часы времени на разработку. Вы можете доказать, что исправление работает, прежде чем попросить разработчика его внедрить.

✏️Примечание: Это платная функция, поэтому вам, возможно, придется оценить, оправданы ли затраты для вашего случая использования.

Места тестирования и устройства

Это ключевая особенность. Большинство бесплатных инструментов просто не могут позволить себе предложить несколько мест тестирования и устройств. WPT может. Откройте модальное окно мест, и вы увидите все доступные города и страны.

Вдобавок к этому, компания также предлагает тестирование на конкретных интернет-провайдерах (ISP) и узлах (Node), если вы хотите проверить работу в определенных сетях. Кроме того, WPT эмулирует сотни устройств и версий браузеров (а также использует несколько реальных устройств) для запуска ваших тестов.

Если ваша аудитория из Лондона и большинство пользователей имеют iPhone 14, вы можете создать именно эту комбинацию​ для запуска тестов и получения самых точных результатов.

Расширенные функции в WebPageTest.org

Есть две функции, которые выделяют WPT для разработчиков: «Скриптинг» и вид «Кинолента».

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

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

Вид «Кинолента» (Filmstrip) — еще одна расширенная функция, которая захватывает скриншот вашего сайта каждые 0,1–0,5 секунды по мере его загрузки. Вы можете пролистывать эти изображения кадр за кадром, чтобы увидеть именно то, что видит посетитель в своем браузере.

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

«Зеленый» бонус с контролем углеродного следа

WPT представил функцию, которая учитывает влияние нашей цифровой инфраструктуры на окружающую среду, под названием Carbon Control.

Она использует библиотеку CO2.js от Green Web Foundation для оценки выбросов углекислого газа, генерируемых при одной загрузке страницы.​

Расчёт опирается на два основных фактора для определения вашего результата.

• Объём передаваемых данных: Общее количество данных (в килобайтах или мегабайтах), которое должно быть передано с сервера на устройство пользователя. Более тяжёлые страницы требуют больше электроэнергии для передачи и обработки.
• Статус «зелёного» хостинга: Работает ли дата-центр, на котором размещён сайт, на возобновляемых источниках энергии (таких как ветер или солнце) или на ископаемом топливе.

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

Каковы ограничения WebPageTest?

WebPageTest не идеален. Бывают дни, когда вы будете его ненавидеть.

• Очереди: Поскольку он использует реальные устройства и является публичным ресурсом, вам приходится ждать в очереди. Если вы запустите тест в часы пик, вы можете увидеть «Позиция 100». Вы можете ждать 10 или 20 минут, пока выполнится один тест. GTmetrix (в прежние времена) давал результат мгновенно. WPT… скажем так, он учит вас терпению.
• Нет «Мониторинга» на бесплатном тарифе: Вы не можете настроить WPT на автоматическое тестирование вашего сайта каждое утро с отправкой результатов по электронной почте, если не оплатите API или тариф Pro. Это диагностический инструмент, а не система мониторинга. Если вам нужны ежедневные графики, вам придётся запускать тесты вручную.​
• Визуальная сложность: Вы не можете отправить ссылку на WebPageTest нетехническому клиенту и ожидать, что он поймёт её. Для неподготовленного взгляда это выглядит поломанным. Вам всегда придётся интерпретировать данные для них, в то время как другие инструменты создают PDF-отчёты, которые выглядят достаточно красиво, чтобы выставлять счёт.

Слишком ли крута кривая обучения для начинающих?

Мы должны быть честны: WebPageTest сложен.

Когда вы впервые попадаете на главную страницу, повсюду выпадающие списки. Страница результатов — это стена цифр. Там нет улыбающегося талисмана, говорящего «Хорошая работа!»

Как начать, не перегружаясь:

1. Сначала игнорируйте «Расширенные настройки»: Просто выберите ваше местоположение и браузер (Chrome подойдёт).
2. Сосредоточьтесь на сводке «Web Vitals»: В верхней части страницы результатов есть представление красным/зелёным/жёлтым, похожее на то, к чему вы привыкли. Начните с него.
3. Используйте вкладку «Анализ изображений»: Она визуальна и проста для понимания. Она показывает, какие именно изображения слишком велики и сколько места можно сэкономить. Если вы видите здесь огромные файлы, вы знаете, что нужно немедленно оптимизировать изображения для веба.

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

Как интегрировать WebPageTest в ваш рабочий процесс

Нам нужно реалистично оценить, как это вписывается в напряжённый день. Вы не можете ждать 20 минут за результатом теста каждый раз, когда сохраняете CSS-файл. Это не очень эффективный способ работы. Наиболее эффективно использовать WebPageTest как специализированный диагностический инструмент, а не как ежедневный монитор.

Начните вашу рутину с быстрого инструмента, такого как PageSpeed Insights или вкладка Lighthouse в инструментах разработчика браузера. Эти платформы дают мгновенную оценку «сдал/не сдал». Когда эта оценка падает, или вы видите красное предупреждение, которое не можете объяснить, — это момент, чтобы открыть WebPageTest.

Даже с полным отчётом сопротивляйтесь желанию исправить каждое отдельное предупреждение. Посмотрите на диаграмму водопада (waterfall chart) и найдите самый длинный отдельный бар. Это может быть большое изображение, медленный сторонний скрипт или, возможно, даже ваш сервер.

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

Стоит ли вам использовать WebPageTest?

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

В случае с WebPageTest:

• Разработчикам стоит перейти на него: Возможность автоматизировать сценарии входа, тестировать на реальном мобильном оборудовании и бесплатно видеть детальные представления о соединении делает его профессионально превосходящим. Это единственный бесплатный инструмент, который даёт вам данные, необходимые для фактического исправления проблем, а не только для их выявления.
• Владельцам малого и среднего бизнеса можно использовать WebPageTest для ежеквартальной «Проверки здоровья»: Но не зацикливайтесь на нём каждый день. Запустите тест, посмотрите на Core Web Vitals и отправьте ссылку вашему разработчику, если что-то выглядит красным. 

Когда оптимизации недостаточно

Оптимизация — это в конечном счёте борьба с задержками. Вы можете потратить недели, сбривая миллисекунды с ваших скриптов, но есть только один выход из аппаратной проблемы — переход на лучшее оборудование.

Виртуальный частный сервер (VPS) предоставляет выделенную мощность, необходимую для превращения вашей оптимизированной разработки в быстрый, отзывчивый опыт. WebPageTest доказывает свою ценность, точно определяя, когда ваша инфраструктура сдерживает вас. Он отделяет проблемы, которые вы можете исправить в текстовом редакторе, от тех, которые требуют лучшей инфраструктуры.

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

Часто задаваемые вопросы

Надёжен ли WebPageTest.org?

Да, WebPageTest широко считается одним из самых надёжных инструментов производительности, поскольку он использует реальные браузеры на фактическом потребительском оборудовании, а не симуляции. В отличие от некоторых инструментов, которые оценивают производительность на основе анализа кода, WebPageTest записывает именно то, что происходит, когда реальный браузер Chrome, Firefox или Safari загружает ваш сайт через реальное сетевое соединение.​

В чём разница между WebPageTest и PageSpeed Insights?

PageSpeed Insights — это в первую очередь инструмент отчётности, который даёт вам оценку «Сдал/Не сдал» на основе полевых данных Google Core Web Vitals (CrUX) и быстрого лабораторного теста. WebPageTest — это диагностический инструмент, который предоставляет глубокие технические данные (такие как диаграммы водопада и представления соединений), чтобы помочь вам объяснить, почему ваша оценка низкая.

Что считается хорошим показателем Core Web Vitals?

Согласно эталонам Google, «Хороший» показатель означает, что ваше Largest Contentful Paint (LCP) составляет менее 2,5 секунд, Interaction to Next Paint (INP) — менее 200 миллисекунд, а Cumulative Layout Shift (CLS) — менее 0,1. Соответствие этим порогам как минимум для 75% ваших посетителей требуется для прохождения оценки Core Web Vitals.​

Как часто мне следует тестировать скорость моего сайта?

Вам следует выполнять быструю проверку (с помощью PageSpeed Insights) каждый раз, когда вы публикуете новый контент или обновляете плагины. Однако глубокий диагностический тест с WebPageTest следует выполнять раз в месяц или сразу после любых серьёзных изменений в дизайне или миграции хостинга. Это гарантирует, что вы обнаружите скрытые регрессии производительности до того, как они повлияют на ваши позиции в SEO.​

WebPageTest действительно бесплатен?

Да. Тариф «Starter» бесплатный и включает 150 запусков тестов в месяц, доступ к реальным мобильным устройствам и глобальным точкам тестирования. Они предлагают платные тарифы «Pro» от примерно 180 долларов в год за такие функции, как доступ к API, приоритет в очереди и «No-Code Experiments», но бесплатной версии более чем достаточно для большинства разработчиков и владельцев сайтов.​