От автора: когда большинство людей проверяют скорость своего сайта, они проверяют одну статическую страницу. Это хорошо работает для тестирования домашних страниц или страниц товара — но как насчет страницы оформления заказа? Или страниц, требующих авторизации? Как вы тестируете более сложные, многошаговые процессы?
К счастью, WebPageTest (и, следовательно, MachMetrics) предлагает функционал скриптинга, который позволяет создавать эти конкретные многоэтапные тесты, которые могут быть полезны в определенных ситуациях, таких как:
Тестирование страницы, которая доступна только после входа в систему
Проверка скорости страницы оформления заказа
Тестирование с отключенной рекламой
Теперь о плохих новостях. Документация по функционалу скриптинга WPT далека от дружественной к пользователю, и в ней приводится только пара примеров. В ней перечислено множество функций, которые вы можете использовать, но потребуется ряд проб и ошибок, чтобы объединить все это в полезный скриптинг. По этой причине мы собираемся рассмотреть описанные выше сценарии и составить тест для каждого из них, а также дать советы по ускорению сайта для новичков.
Тестирование страницы, требующей авторизации
Подобный сценарий является довольно распространенным требованием для тестирования, поэтому вы, вероятно, сможете использовать его на практике. Если на вашем сайте используется авторизация, простой тест может дать только быстрый аудит того, насколько быстро ваш сайт загружает форму авторизации. Более полезна информация о том, как быстро доставляется домашняя страница за формой авторизации, поскольку именно на этой странице будут содержаться изображения, контент и все остальные ресурсы.
Для начала вот где найти параметр скриптингов в WebPageTest.
В этом поле мы начинаем создавать скриптинг, который будет тестировать интересующий нас сценарий. Для этого примера мы собираемся запустить скриптинг, который загружает machmetrics.com и регистрируется в панели пользователя.
Ниже приведен скриптинг, который выполняет это (с помощью подстановки адреса электронной почты и пароля). Нам нужно будет использовать navigate, setValue и submitForm, чтобы заполнить поля формы информацией и отправить ее. Просто для удобства чтения данных позже я также добавлю setEventName, чтобы видеть данные для каждого шага.
Шаг навигации указывает скрипту, какой URL загружать. Нам также необходимо идентифицировать поля имени пользователя и пароля в форме и использовать setValue для ввода информации для входа в систему. Мы можем проинспектировать форму, чтобы найти имя каждого поля формы. Если ваша HTML-форма выглядит примерно так:
<input type=”text” class=”tabInputFields” id=”lgnId1″ value=”” name=”loginId”/>
Вы можете использовать любой из возможных идентификаторов: id=lgnId1, name=loginId или class=tabInputFields.
// Go to Machmetrics.com setEventName GoToMachMetrics navigate https://www.machmetrics.com/app/ // Put our username into the form setValue name=email [email protected] // Put our password into the form setValue name=password yourpassword // Submit the form setEventName GoToDashboard submitForm class=form-horizontal
Теперь мы запускаем скриптинг и ждем поступления данных. Как видите, WebPageTest предлагает невероятное количество информации из теста. Вы сможете увидеть показатели скорости для каждого из шагов setEventName, водопадов и даже посмотреть видео каждого шага прохождения процесса.
Тестирование скорости процесса оформления заказа
Далее, давайте пройдемся по процессу выбора продукта и оформления заказа на сайте электронной коммерции. Если вы работаете с сайтом электронной коммерции, показатели эффективности этого процесса будут неоценимы для вас. Ранее мы писали, что веб-производительность может оказать огромное влияние на прибыль, поэтому вам нужно знать, как ваш сайт работает в этом аспекте.
Этот скриптинг будет похож на описанный выше сценарий, но, очевидно, у нас будут дополнительные этапы. В основном нам нужно использовать команду clickAndWait, которая инструктирует скриптинг нажимать на элемент и ждать, пока браузер загрузит последующее действие.
В приведенном ниже сценарии мы загружаем Menards.com, выбираем товар, добавляем его в корзину и оформляем заказ. На этом этапе мы можем пойти еще дальше и войти в учетную запись, добавив описанный выше скриптинг. Однако для целей данного примера мы перейдем к тому моменту, когда он запрашивает информацию для входа. После того, как мы проинспектировали веб-сайт, нашли идентификаторы для продукта и кнопки, чтобы добавить его в корзину, мы сможем создать скриптинг.
// Load URL setEventName loadMenards navigate https://menards.com // click on product setEventName ClickOnProduct clickAndWait id=product-1c5c87ff-cfd7-4888-8050-ffc17b1b35b9 // Add item to cart setEventName Addtocart clickAndWait id=addToCartButton // Click through to cart setEventName submit clickAndWait id=goToCartSubmit // Continue to Checkout setEventName gotocheckout clickAndWait value=Continue to Checkout
Опять же, после запуска теста каждый шаг записывается в журнал, и вы можете увидеть производительность, с которой могли бы столкнуться наши клиенты, если бы это был наш сайт электронной коммерции.
Тестирование сайта с отключенной рекламой
Наш финальный тест, пожалуй, самый важный, особенно для тех сайтов, которые полагаются для получения дохода на рекламу. Вы, вероятно, заметили, что в некоторые дни ваш сайт загружается очень быстро, а в другие дни очень медленно — и причина этого колебания связана с ротацией объявлений, которые обслуживает ваш сайт. Это очень затрудняет определение тенденций в скорости сайта — поскольку на графиках очень много шума.
Однако этот скриптинг предназначен не только для рекламы — он также позволяет измерять эффективность вашего сайта без сторонних тегов, устраняя шум и давая вам более стабильное представление о скорости сайта. Сделав еще один шаг, вы сможете сравнить тест по умолчанию с тестом, в котором реклама отключена, и посмотреть на производительность при добавлении этих дополнительных сценариев.
Есть несколько способов сделать это, в зависимости от того, хотите ли вы заблокировать определенные сторонние запросы или все из них.
Чтобы увидеть снижение производительности при использовании Google Fonts, вы можете запустить обычный тест на своем сайте, а затем сравнить его со следующим сценарием с помощью команды blockDomains:
// block google fonts blockDomains fonts.googleapis.com // navigate to your site with font requests blocked navigate https://yoursite.com
Чтобы полностью блокировать всего, кроме того, что является нативным для вашего сайта, вам нужно использовать команду blockDomainsExcept следующим образом:
// block all ads and 3rd party requests blockDomainsExcept https://yoursite.com // navigate to your site with requests blocked navigate https://yoursite.com
WebPageTest даже позволяет установить при запуске тестов флажок «Filmstrip». Затем вы сможете выстроить тесты рядом друг с другом и сравнить их. Это позволяет напрямую увидеть затраты времени, приходящиеся на рекламу и другие сторонние запросы.
Скриптинги — это мощно
Некоторые из этих высокоуровневых функций могут быть пугающими для пользователей. Тем не менее, при правильном использовании это невероятно мощные инструменты.
Если вы настраиваете скриптинги в MachMetrics, он использует тот же синтаксис, что и WebPageTest, и может быть введен через параметр «Custom Script» при редактировании URL:
С большими возможностями приходит большая ответственность — и если у вас возникают проблемы с настройкой скриптинга, чтобы он работал именно так, как вам нравится, мы всегда готовы помочь.
Вы используете MachMetrics?
Мониторинг скорости работы сайта с помощью MachMetrics гарантирует, что вы всегда будете знать, как работает ваш сайт — в течение дня, по всему миру и на разных устройствах.
Источник: https://www.machmetrics.com
Редакция: Команда webformyself.