Полное руководство по использованию WebPageTest (и интерпретации результатов)

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

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

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

Что такое WebPageTest?

WebPageTest — это мощный инструмент с открытым исходным кодом, призванный помочь владельцам и разработчикам веб-сайтов контролировать и оптимизировать производительность своего веб-сайта:

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

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

Вскоре после этого WebPageTest был выпущен под лицензией с открытым исходным кодом. В 2011 году был запущен сайт сервиса.

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

Ключевые особенности WebPageTest:

• Моделированные тесты из разных мест по всему миру
• Поддержка различных браузеров, включая Chrome, Firefox и Safari.
• Анализ рендеринга веб-страниц и процесса загрузки, включая каскадные диаграммы и диафильмы.
• Настраиваемые параметры тестирования, такие как скорость соединения и разрешение экрана.
• Расширенные показатели, включая индекс скорости, время до первого байта (TTFB) и первую отрисовку контента (FCP).

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

Почему вы должны использовать WebPageTest

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

Однако WebPageTest предлагает гораздо больше преимуществ, чем обычные инструменты. Давайте посмотрим на некоторые из них:

• Выявление проблем с производительностью. WebPageTest помогает выявить потенциальные узкие места и области для улучшения, что позволяет целенаправленно оптимизировать ваш веб-сайт.
• Улучшите пользовательский опыт. Веб-сайты с более быстрой загрузкой обеспечивают лучший пользовательский интерфейс, что может привести к более высокому вовлечению посетителей и конверсиям. Посетители могут не заметить, если ваш сайт загружается быстро, но они заметят, если он будет загружаться медленно.
• Повысить рейтинг в поисковых системах. Скорость сайта является фактором ранжирования для поисковых систем, таких как Google, а более быстрые сайты, как правило, занимают более высокие позиции в результатах поиска.
• Отслеживайте производительность с течением времени. Регулярное тестирование с помощью WebPageTest позволяет отслеживать тенденции производительности и выявлять любые регрессии до того, как они станут серьезными проблемами. Вы можете отслеживать данные о производительности за более чем год, используя бесплатный план, которого более чем достаточно для выявления тенденций.

Кроме того, WebPageTest наглядно представляет результаты. Это невероятно ценно, если вы новичок в мире тестирования и оптимизации производительности:

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

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

Как использовать WebPageTest

Запустить тест с помощью WebPageTest очень просто. Для начала вам необходимо зарегистрировать бесплатную учетную запись, которая не требует ввода платежной информации.

После входа в систему вернитесь на домашнюю страницу и найдите параметр «Начать тестирование производительности сайта ». Введите URL-адрес страницы, которую вы хотите протестировать, и выберите конфигурацию:

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

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

Когда вы будете довольны настройками, нажмите Start Test . Получение результатов займет несколько секунд, и как только они это сделают, вы получите доступ к подробному отчету о производительности.

Как интерпретировать результаты WebPageTest

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

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

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

Вернувшись на главную страницу отчета, прокрутите вниз до раздела «Показатели производительности страницы ». Здесь вы найдете несколько показателей, которые показывают, сколько времени требуется вашему сайту для загрузки и начала работы:

Если вы не уверены, что означает каждая из этих метрик, вот краткая разбивка:

• Время до первого байта (TTFB) . Этот показатель измеряет, сколько времени требуется сайту, чтобы ответить на первоначальный запрос браузера. Медленным серверам может потребоваться некоторое время для ответа, что увеличивает общее время загрузки сайта.
• Начать рендеринг. Это говорит вам, сколько времени требуется, чтобы страница начала отображать визуальные элементы. Сайт может загружаться в фоновом режиме, но пока пользователи не увидят что-то, они могут не знать, правильно ли работает страница.
• First Contentful Paint (FCP) : это время, которое требуется браузеру для отображения первой части контента на странице. Более низкий FCP указывает на более быструю загрузку сайта.
• Индекс скорости. Составная оценка, показывающая, насколько быстро содержимое страницы становится видимым для пользователей. Чем ниже оценка, тем лучше.
• Самая большая содержательная краска (LCP) . Этот показатель показывает, сколько времени требуется для отображения самого большого элемента на странице. Как правило, это хороший показатель общего времени загрузки страницы.
• Совокупный сдвиг макета (CLS) . Этот показатель говорит вам, насколько макет страницы «смещается» или изменяется при загрузке. Чем больше он смещается, тем хуже пользовательский опыт. Ноль — это число, к которому вы должны стремиться.
• Общее время блокировки. С помощью этой метрики вы можете увидеть, сколько времени требуется, прежде чем страница станет пригодной для использования. Это может быть сделано визуально, но страница может загружать скрипты в фоновом режиме, что не позволяет посетителям ее использовать.

Далее в разделе «Метрики использования в реальном мире» представлен обзор тех же метрик по сравнению с недавними тестовыми данными от других пользователей (если они доступны). Чтобы получить полное представление об эффективности вашего сайта, мы предлагаем вам сравнить эти показатели с предыдущим разделом "Показатели эффективности страницы" .

В идеале результаты последнего должны быть такими же или лучше:

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

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

Стоит ли использовать WebPageTest для своего бизнеса?

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

Для полноты картины расскажем и о минусах использования сервиса.

Плюсы WebPageTest

• Комплексный анализ. WebPageTest предоставляет подробную информацию о производительности вашего веб-сайта, что упрощает определение областей, требующих улучшения.
• Настраиваемые тесты. Инструмент поддерживает множество браузеров, местоположений и тестовых настроек, что позволяет имитировать различные пользовательские интерфейсы. Вы можете настроить параметры теста по своему усмотрению или использовать параметры по умолчанию, предоставляемые службой, если вам нужен краткий обзор.
• Бесплатный и с открытым исходным кодом. Мы большие поклонники программного обеспечения с открытым исходным кодом, поэтому использование WebPageTest является плюсом. Хотя сервис предлагает премиальный уровень, бесплатного плана более чем достаточно для большинства веб-сайтов.
• Исторические данные о производительности. С WebPageTest вы получаете доступ к тестовым данным за 13 месяцев для любых веб-сайтов, для которых вы используете эту услугу. Этого более чем достаточно для отслеживания тенденций производительности большинства веб-сайтов.
• Рекомендации по улучшению производительности. WebPageTest предоставляет рекомендации или «возможности» для повышения производительности сайта в зависимости от того, какие проблемы он обнаруживает на вашем сайте. Эти рекомендации включают объяснения важности каждого изменения.

Минусы веб-страницы

• Требуется регистрация. Несмотря на то, что WebPageTest предлагает всеобъемлющий бесплатный план, вы должны зарегистрироваться в службе для запуска тестов. Однако сервис не запрашивает платежную информацию в процессе регистрации.
• Кривая обучения. WebPageTest предоставляет множество данных, которые могут быть ошеломляющими для пользователей, которые плохо знакомы с оптимизацией веб-производительности. Однако, по сравнению с другими подобными инструментами, кривая обучения WebPageTest намного проще.
• Ограниченная автоматизация. Хотя WebPageTest можно автоматизировать с помощью своего API, для этого могут потребоваться дополнительные знания в области настройки и кодирования по сравнению с некоторыми другими инструментами со встроенными функциями автоматизации.
• Нет инструкций по улучшению производительности. Это несколько распространено среди инструментов тестирования производительности веб-сайтов. С помощью WebPageTest вы получаете прямые рекомендации о возможностях повышения производительности вашего сайта. Однако эти рекомендации не сопровождаются инструкциями по их реализации. Это означает, что вам нужно будет провести исследование по таким темам, как отложить блокировку рендеринга JavaScript или другим сложным техническим вопросам.

WebPageTest Цены

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

Что касается привилегий, пользователи премиум-плана могут проводить больше тестов. Вы также получите приоритет в случае, если служба загружена (что случается нечасто). Более того, если вы хотите получить API-доступ к WebPageTest, вам нужно будет заплатить за премиум-план.

Как WebPageTest сравнивается с другими инструментами для тестирования скорости веб-сайта

Как мы упоминали ранее, существует множество других инструментов для тестирования скорости веб-сайта. Двумя наиболее популярными альтернативами WebPageTest являются Google PageSpeed ​​Insights и Pingdom Tools.

Давайте посмотрим, как WebPageTest сравнивается с обоими вариантами.

Статистика Google PageSpeed

Этот инструмент, разработанный Google, предоставляет простую оценку производительности и предлагает конкретные рекомендации по оптимизации. Результаты также детализированы по сравнению с WebPageTest.

Однако WebPageTest проверяет каждую страницу несколько раз во время каждого запуска. Кроме того, он позволяет запускать пользовательские тесты, чего не предлагает PageSpeed ​​Insights.

Инструменты пингдома

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

По нашему опыту, вы можете получить наилучшие результаты производительности, проводя регулярные тесты с использованием различных инструментов. Однако, если вы собираетесь использовать одну службу, WebPageTest может предоставить наиболее полные результаты по сравнению с такими альтернативами, как PageSpeed ​​Insights и Pingdom Tools.

Краткое содержание

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

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

В Kinsta мы одержимы скоростью! Наши клиенты получают прирост скорости до 20 %, просто переходя на наш хостинг. Мы предлагаем 35 центров обработки данных, из которых вы можете выбрать, а наша CDN имеет более 275 точек присутствия. Свяжитесь с нами, чтобы узнать больше!