Как использовать webpagetest.org для проверки скорости загрузки страниц

Как использовать webpagetest.org для проверки скорости загрузки страниц

От автора: проверка скорости загрузки страницы осуществляется очень качественно с помощью webpagetest.org, это мой любимый инструмент. Он поддерживает десятки географических точек для выполнения проверки, программы тестов для веб-браузера и мобильного телефона/планшета, другие функции. WPT недавно обновили все локации тестирования Amazon AWS EC2 для использования под Linux, что также позволило увеличить производительность сервера проверок.

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

Ниже приведено краткое описание того, как пользоваться webpagetest.org для проверки веб-страниц.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Когда вы заходите на webpagetest.org, первая страница, которую вы видите — это вкладка расширенной проверки, где вам нужно ввести адрес вашего сайта, выбрать локацию для проверки и веб-браузер для симуляции загрузки страницы. Ниже открывается страница с настройками проверки, где вы можете выбрать:

профиль скорости соединения, я обычно выбираю 3G mobile или Cable 5Mbps, потому что их можно найти по всему миру

количество проводимых проверок — всегда указывайте нечётное число, потому что результаты — это среднее значение проверок, что делается для большей точности, я обычно выбираю 3, 5 или 7 проверок

повторный просмотр — я обычно выбираю только первый просмотр, но вы можете выбрать первый и повторный просмотр — repeat view

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

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

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

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

На вышеприведённом скриншоте вы можете видеть пример настройки пользовательского окна проверки веб-браузера на более высокое разрешение, нежели задано по умолчанию, если мне не изменяет память, то это 1280×1080. То есть мы можем задать размер окна и управлять разрешением 1920×1080. Для этого вам нужно будет использовать вкладку Скрипт.

На странице с результатами тестов Webpagetest отображает среднее значение всех тестов в суммарной таблице со ссылкой в скобках на соответствующий результат. В данном случае результат первой проверки был средним показателем всех проверок. Нажав ссылку первой проверки вы перейдете на страницу данной проверки, там вы сможете просмотреть её и проанализировать.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Обратите внимание на то, что когда вы выполняете проверку по скрипту, то получаете жёлтый выпадающий текст, содержащий параметры проверки по скрипту.

Проверка 1 выдаёт результаты в виде диаграммы, скриншота и видео, на которые вы можете кликнуть, чтобы посмотреть подробную информацию.

Диаграмма

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

Вкладка details. Обратите внимание, что TTFB (общее время до загрузки первого байта) в суммарной таблице 0.477 секунд фактически состоит из времени поиска DNS 25 мс + время инициализации соединения 31 мс + SSL переговоры 43 мс и + время до начала загрузки 362 мс. Эти данные суммируются и мы получаем 462 мс или 0.462 с. Так что, когда вы видите, что в суммарной таблице отображается определенное значение TTFB, знайте, что запросы к DNS, SSL переговоры уже были в нем учтены.

Скриншот

Видео

Обратите внимание на параметры интервалов и размера иконки, которые вы можете изменить. Я обычно задаю 0.1 секунды, а для иконки выбираю маленький/средний размер. Результат метрики индекса скорости WPT для первой проверки равен 963 миллисекунд, это тесно коррелирует с временными показателями начала визуализации, полученными с видео.

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

Итог

Я надеюсь, что этот обзор инструмента измерения скорости загрузки страниц Webpagetest.org был для вас полезным. Я всегда использую его перед и после оптимизации сайта и сервера для проверки изменения производительности. Кроме этого, я прибегаю к этому инструменту перед и после перемещения веб-серверов/веб-хостов. Вы же можете также пользоваться данным инструментов для сайтов LEMP-серверов, которые не относятся к Centmin Mod, перед перемещением сайтов на серверы Centmin Mod LEMP для анализа изменений. Объединение Webpagetest с такими инструментами проверки загрузки страниц как, например, wrk, позволит вам проанализировать улучшения на ваших веб-сайтов до или после оптимизации/перемещения.

Источник: https://community.centminmod.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree