Советы для новичков по ускорению сайта

Советы для новичков по ускорению сайта

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

К счастью, WebPageTest (и, следовательно, MachMetrics) предлагает функционал скриптинга, который позволяет создавать эти конкретные многоэтапные тесты, которые могут быть полезны в определенных ситуациях, таких как:

Тестирование страницы, которая доступна только после входа в систему

Проверка скорости страницы оформления заказа

Тестирование с отключенной рекламой

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Тестирование страницы, требующей авторизации

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

Для начала вот где найти параметр скриптингов в WebPageTest.

Советы для новичков по ускорению сайта

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

Ниже приведен скриптинг, который выполняет это (с помощью подстановки адреса электронной почты и пароля). Нам нужно будет использовать navigate, setValue и submitForm, чтобы заполнить поля формы информацией и отправить ее. Просто для удобства чтения данных позже я также добавлю setEventName, чтобы видеть данные для каждого шага.

Шаг навигации указывает скрипту, какой URL загружать. Нам также необходимо идентифицировать поля имени пользователя и пароля в форме и использовать setValue для ввода информации для входа в систему. Мы можем проинспектировать форму, чтобы найти имя каждого поля формы. Если ваша HTML-форма выглядит примерно так:

Вы можете использовать любой из возможных идентификаторов: id=lgnId1, name=loginId или class=tabInputFields.

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

Советы для новичков по ускорению сайта

Тестирование скорости процесса оформления заказа

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

Советы для новичков по ускорению сайта

Тестирование сайта с отключенной рекламой

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

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

Есть несколько способов сделать это, в зависимости от того, хотите ли вы заблокировать определенные сторонние запросы или все из них.

Чтобы увидеть снижение производительности при использовании Google Fonts, вы можете запустить обычный тест на своем сайте, а затем сравнить его со следующим сценарием с помощью команды blockDomains:

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

WebPageTest даже позволяет установить при запуске тестов флажок «Filmstrip». Затем вы сможете выстроить тесты рядом друг с другом и сравнить их. Это позволяет напрямую увидеть затраты времени, приходящиеся на рекламу и другие сторонние запросы.

Скриптинги — это мощно

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

Если вы настраиваете скриптинги в MachMetrics, он использует тот же синтаксис, что и WebPageTest, и может быть введен через параметр «Custom Script» при редактировании URL:

Советы для новичков по ускорению сайта

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

Вы используете MachMetrics?

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

Источник: https://www.machmetrics.com

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

NodeJS. Быстрый старт

Создание веб-приложения на JavaScript с NodeJS

Смотреть

Метки:

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

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

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

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