Core Web Vitals является одним из факторов ранжирования в Google. Это означает, что проведение тестов производительности становится обязательным для всех владельцев сайтов, которые хотят улучшить поисковую оптимизацию (SEO).
На протяжении более десяти лет GTmetrix был стандартной рекомендацией для всех, кто хотел быстро проверить скорость своего сайта. Он был быстрым, простым, и что наиболее важно, щедрым — но мы говорим «был«, потому что к концу 2023 и середине 2024 года эта щедрость иссякла.
С новыми платными стенами, блокирующими основные функции, строгими ограничениями на бесплатное тестирование и анализом для мобильных устройств, доступным только по подписке, инструмент, который мы все добавили в закладки, уже не тот эталон, что раньше.
К счастью, существует WebPageTest.org (WPT), платформа, которая с 2008 года находится в тени, обеспечивая проведение самых строгих аудитов производительности в интернете.
Итак, мы протестировали WPT по основным параметрам производительности веб-сайта, чтобы определить, может ли он заменить другие инструменты для тестирования скорости, такие как GTmetrix, без каких-либо компромиссов.
Иди с нами.
Каковы Истоки WebPageTest.org?
WebPageTest.org — это платформа для тестирования производительности с открытым исходным кодом, которая предоставляет глубокую диагностику веб-страниц. Проект начался внутри AOL и впоследствии был разработан Патриком Минаном в Google, чтобы помочь инженерам понимать поведение браузеров.
Инструмент остаётся активным уже более шестнадцати лет благодаря поддержке сообщества специалистов по производительности, которые верят в вклад в открытое программное обеспечение.
На самом деле, инженеры по производительности создали этот инструмент специально для других инженеров по производительности, которым требуются данные высокой точности. Каждый тест запускается в реальном браузере, будь то Chrome, Firefox или Safari, а не в безголовой симуляции, которая может пропустить ошибки отображения. Эта техническая основа гарантирует, что результаты отражают то, что реальный человеческий посетитель испытывает на своем устройстве.
Проект перешел к Catchpoint в 2020 году, чтобы гарантировать, что он останется бесплатным для публики. Теперь, вместо только подписок, WPT финансируется материнской корпорацией, которая использует данные для собственных исследований.
Как сравниваются функции для ежедневного использования?
Нам также нужно посмотреть, как WPT обрабатывает метрики сайта, которые на самом деле важны для твоей повседневной работы. Если ты пришёл с GTmetrix, набор функций здесь покажется знакомым, но глубина данных значительно выше.
Мониторинг Основных Веб-Виталов
WebPageTest не просто выдаёт оценку «сдал/не сдал» — он детализирует основные веб-виталины (LCP, CLS, INP) с таким уровнем детализации, который часто скрывает Insights.
Когда ты проводишь тест, WPT визуализирует метрики сайта на временной шкале. Вместо того, чтобы просто сказать тебе «Твой совокупный сдвиг компоновки составляет 0.25», он выделяет точный кадр в последовательности загрузки, где произошел сдвиг.
Это критично для отладки, потому что ты можешь видеть точное расположение до перехода и расположение после.
Также добавляется раздел «Возможности», который отражает раздел «Рекомендации» из GTmetrix, к которому мы привыкли, но с лучшей приоритизацией.
Если у тебя 10 проблем, WPT поможет определить, какие из них не важны для немедленного улучшения производительности, а на какие следует сосредоточиться, чтобы действительно улучшить SEO и скорость сайта.
Каскадные Диаграммы и Анализ Запросов
Диаграмма водопада — это настоящая жемчужина WebPageTest: она плотная, красочная и изначально пугающая. Но как только ты научишься её читать, ты никогда не захочешь возвращаться к упрощённому списку.
Бесплатный уровень GTmetrix показывал здесь только базовый список файлов. WebPageTest показывает каждый отдельный запрос, разделённый на пять-десять различных фаз, цветовая кодировка для диагностики:
- DNS и Подключение: Это показывает, сколько времени потребовалось только для того, чтобы найти сервер. Длинные полосы здесь означают, что твой провайдер DNS работает медленно.
- Согласование SSL: Это показывает время, затраченное на установление защищённого соединения. Если это значение велико, конфигурация TLS сервера может быть устаревшей.
- Время до первого байта: TTFB — это время, которое требуется браузеру для получения первого байта ответа сервера. Длинная полоса указывает на медленное время ответа сервера, что часто связано с проблемами с запросами к базе данных или обработкой на стороне сервера (это указывает на необходимость оптимизации базы данных)
- Загрузка содержимого: Браузер фактически получает данные.
Самая мощная функция здесь — это вид «Соединение».
Ты можешь увидеть, как именно браузер открывает параллельные соединения для загрузки изображений и заметить точный момент, когда скрипт отслеживания сторонней организации блокирует загрузку остальной части твоего сайта.
Рекомендации По Производительности
Все предложения от WPT учитывают контекст. Вместо стандартного списка проверок, WebPageTest использует свои «Возможности» и «Эксперименты».
Вместо предложения «Отложить выполнение JavaScript» он определяет конкретные пакеты, блокирующие главный поток, и предлагает провести тест без них.
Ещё более впечатляющей является функция «Эксперименты без кода». Она позволяет «тестировать» исправление, не изменяя ваш код. Она будет переписывать HTML на лету и давать результат. Это сэкономит часы времени на разработку. Ты можешь доказать, что исправление работает, прежде чем попросить разработчика реализовать его.
✏️Примечание: Это платная функция, поэтому тебе нужно будет определить, оправданы ли затраты для твоего случая использования.
Локации и Устройства для Тестирования
Это ключевая функция. Большинство бесплатных инструментов просто не могут позволить себе предложить множество тестовых локаций и устройств. WPT может. Откройте модальное окно локаций, и вы увидите все доступные города и страны.
Кроме того, компания предлагает ISP и Node, если хочешь провести тестирование в конкретных сетях. К тому же, WPT эмулирует сотни устройств и версий браузеров (а также использует несколько реальных устройств), чтобы проводить твои тесты.
Если твоя аудитория находится в Лондоне и большинство пользователей использует iPhone 14, ты можешь создать это конкретное сочетание для проведения тестов и получения наиболее точных результатов.
Расширенные Функции на WebPageTest.org
Две функции выделяют WPT для разработчиков: «Скриптинг» и «Просмотр полосой».
Скриптинг — это продвинутая функция, которая позволяет автоматизировать сложные задачи. Например, ты можешь написать короткий скрипт, чтобы сказать браузеру войти на твой сайт перед началом теста. Это позволяет измерить скорость работы панели управления участником или страницы оформления заказа.
Большинство бесплатных инструментов позволяют проверять только общедоступные страницы, не требующие пароля. Эта возможность делает платформу мощным диагностическим инструментом для веб-приложений.
Вид в виде пленки — это еще одна продвинутая функция, которая делает снимок вашего сайта каждые 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 сложен.
Когда ты впервые попадаешь на главную страницу, везде выпадающие списки. Страница результатов — это стена чисел. Здесь нет улыбающегося талисмана, который говорит тебе «Молодец!»
Как начать без чувства перегрузки:
- Игнорируй Настройки «Advanced Settings» сначала: Просто выбери своё местоположение и браузер (Chrome подойдет).
- Сосредоточься на Итогах «Web Vitals»: Вверху страницы результатов есть вид красного/зеленого/желтого цвета, похожий на то, к чему ты привык. Начни с этого.
- Используй вкладку «Image Analysis»: Она наглядная и понятная. Здесь точно показано, какие изображения слишком большие и сколько места ты можешь сэкономить. Если ты видишь здесь огромные файлы, тебе нужно немедленно оптимизировать изображения для веба.
Для владельца малого или среднего бизнеса без технических навыков этот инструмент может показаться слишком сложным. Но для тех, кто профессионально управляет сайтом, процесс обучения того стоит. Ты обмениваешь простоту на точность.
Как Интегрировать WebPageTest В Твой Рабочий Процесс
Нам нужно быть реалистичными относительно того, как это вписывается в наш занятой день. Ты не можешь ждать 20 минут результат теста каждый раз, когда сохраняешь CSS файл. Это действительно неэффективный способ работы. Самый эффективный способ использования WebPageTest — как специализированного диагностического инструмента, а не ежедневного монитора.
Начни свою рутину с быстрого инструмента, такого как PageSpeed Insights или вкладка Lighthouse в инструментах разработчика браузера. Эти платформы дают тебе моментальную оценку «прошел» или «не прошел». Когда эта оценка падает, или ты видишь красное предупреждение, которое не можешь объяснить, это момент, чтобы открыть WebPageTest.
Даже имея полный отчет, сдерживай желание исправить каждое предупреждение. Посмотри на диаграмму водопада и найди самую длинную полосу. Это может быть большое изображение, медленный сторонний скрипт или даже твой сервер.
В большинстве случаев, исправление всего лишь одной ошибки может быть достаточно для решения ваших проблем. Возможно, вы даже обнаружите, что простое преобразование файлов в современные форматы изображений решает половину проблемы.
Стоит Ли Использовать WebPageTest?
Мы не можем иметь «один инструмент для всего», так как веб стал слишком сложным. Вместо этого тебе нужно выбрать инструменты, которые наиболее подходят для твоих повседневных рабочих процессов.
В случае WebPageTest:
- Разработчики должны перейти на его использование: Возможность программировать процессы входа в систему, тестирование на реальном мобильном оборудовании и просмотр подробных данных о подключениях бесплатно делают его профессионально превосходным. Это единственный бесплатный инструмент, который предоставляет данные, необходимые для устранения проблем, а не только для их выявления.
- Владельцы малого и среднего бизнеса могут использовать WebPageTest для вашей квартальной «Проверки здоровья»: Но не стоит зацикливаться на этом каждый день. Запустите тест, посмотрите на показатели Core Web Vitals и отправьте ссылку вашему разработчику, если результаты кажутся критичными.
Когда Оптимизации Недостаточно
Оптимизация в конечном итоге — это борьба с задержками. Ты можешь потратить недели на то, чтобы уменьшить время выполнения своих скриптов на миллисекунды, но есть только один выход из проблемы с оборудованием — переход на более современное оборудование.
Виртуальный частный сервер (VPS) предоставляет необходимую выделенную мощность, чтобы превратить вашу оптимизированную конструкцию в быстрый и отзывчивый опыт. WebPageTest доказывает его ценность, точно определяя, когда ваша инфраструктура вас подводит. Он разделяет проблемы, которые можно исправить с помощью текстового редактора, от тех, которые требуют лучшей инфраструктуры.
Это, честно говоря, единственный способ перестать гоняться за случайными строками в твоём коде и дать твоему сайту движок, который он заслуживает.
Когда Вы Ожидаете Производительности, Выбирайте DreamHost VPS
Большой или маленький, сайт или приложение — у нас есть конфигурация VPS для вас.
Узнать большеЧасто Задаваемые Вопросы
Надежен ли WebPageTest.org?
Да, WebPageTest широко считается одним из самых надежных инструментов для оценки производительности, поскольку он использует реальные браузеры на фактическом потребительском оборудовании, а не симуляции. В отличие от некоторых инструментов, которые оценивают производительность на основе анализа кода, WebPageTest записывает точно то, что происходит, когда реальный браузер Chrome, Firefox или Safari загружает ваш сайт через реальное сетевое соединение.
В чем разница между WebPageTest и PageSpeed Insights?
PageSpeed Insights — это в основном инструмент отчетности, который дает тебе оценку «Пройдено/Не пройдено» на основе данных из поля Core Web Vitals Google (CrUX) и быстрого лабораторного теста. WebPageTest — это диагностический инструмент, который предоставляет подробные технические данные (например, диаграммы водопада и представления соединений), чтобы помочь тебе понять, почему твоя оценка низкая.
Какой хороший показатель Core Web Vitals?
Согласно эталонам Google, оценка «Хорошо» означает, что время загрузки самого крупного элемента контента (LCP) составляет менее 2,5 секунд, время от взаимодействия до следующей отрисовки (INP) — менее 200 миллисекунд, а суммарное смещение элементов (CLS) — менее 0,1. Для прохождения оценки основных веб-виталов необходимо соответствовать этим критериям для по крайней мере 75% посетителей.
Как часто мне следует тестировать скорость моего сайта?
Ты должен проводить быструю проверку (используя PageSpeed Insights) каждый раз, когда публикуешь новый контент или обновляешь плагины. Однако, ты должен выполнять глубокую диагностическую проверку с помощью WebPageTest раз в месяц или сразу после любых значительных изменений дизайна или миграций хостинга. Это поможет тебе заметить скрытые регрессии производительности до того, как они повлияют на твои SEO-рейтинги.
Действительно ли WebPageTest бесплатен?
Да. Тарифный план «Starter» бесплатен и включает в себя 150 тестовых запусков в месяц, доступ к реальным мобильным устройствам и глобальные тестовые локации. Они предлагают платные тарифные планы «Pro», начиная примерно от 180 долларов в год, которые включают такие функции, как доступ к API, приоритетное постановление в очередь и «Эксперименты без кода», но бесплатной версии более чем достаточно для большинства разработчиков и владельцев сайтов.
