Анализ производительности с помощью WebPageTest

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

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

Начало работы с WebPageTest

Прежде всего, зайдите на webpagetest.org, чтобы начать. Макет очень четкий, и вы сразу увидите поле, в котором вы можете ввести URL-адрес своего веб-сайта.

С самого начала у вас есть выбор… вы используете вкладку «Расширенное тестирование» по умолчанию или переходите на вкладку «Простое тестирование»? Что ж, функция простого тестирования отлично подходит для быстрого обзора вашего сайта, но в этой статье мы рассмотрим вкладку «Расширенное тестирование».

Расширенные настройки тестирования

Прокрутите страницу вниз, и вы увидите раскрывающееся меню Test Location. Это довольно понятно. Место, которое вы хотите выбрать, должно быть ближайшим к месту, где находится ваша целевая аудитория. Если они базируются в Австралии, то тестирование в Лондоне, Великобритания, не имеет особого смысла. Цель этого упражнения — выяснить, как наш веб-сайт работает для наших пользователей.

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

Другие действительно интересные настройки, которые вы можете выбрать, — это такие вещи, как соединение. Таким образом, именно так устройство конечного пользователя подключается к Интернету. Щелкните раскрывающееся меню рядом с «Подключение», и вы увидите варианты, включающие подключение 3G (медленное или быстрое). Это действительно здорово, так как дает вам реальное представление о том, как ваша аудитория будет воспринимать ваш сайт.

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

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

Запишите все настройки, которые вы изменили. Важно, чтобы во время тестирования, а затем на этапе оптимизации вы продолжали повторное тестирование с теми же настройками, иначе вы исказите полученные результаты. Когда вы будете готовы, нажмите кнопку «Начать тест», а затем расслабьтесь и ждите результатов (обычно это занимает около минуты).

Первый экран

В этом примере мы использовали веб-сайт Apple (apple.com) и протестировали его через быстрое соединение 3G из Лондона, Великобритания. Первоначальные результаты показаны ниже:

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

Вставка 1 – Оценка безопасности

Это недавняя функция, предоставленная WebPageTest, которая на самом деле представляет собой интеграцию со Snyk и дает представление о безопасности веб-сайта. Если вы нажмете на цветное поле, вы попадете на веб-сайт synk.io, который содержит подробный анализ рассматриваемого веб-сайта с точки зрения безопасности. Особо следует отметить заголовки безопасности HTTP, которыми обмениваются клиент и сервер для определения деталей безопасности связи. Наиболее важными являются Strict-Transport-Security, Content-Security-Policy, X-Frame-Options.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

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

Поле 2 – Время первого байта

Во втором поле указывается время первого байта (иначе известное как время до первого байта или TTFB). Это время, необходимое для ответа сервера первым байтом данных на запрос клиента. В идеале вы должны стремиться к цифре ниже 300 мс. Это значение больше связано с сервером и не имеет отношения к времени, затраченному на отрисовку файлов вашего веб-сайта. На это может повлиять, например, медленный DNS-сервер или недостаточное кэширование.

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

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

Как мы видим, веб-сайт Apple не слишком хорошо справился с этой частью теста.

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

Вставка 3. Оставайтесь в живых

Поле «Поддержка активности включена» показывает состояние HTTP-заголовка проверки активности. Когда этот заголовок включен, данные будут передаваться с использованием одного и того же соединения, в противном случае необходимо создавать новое соединение для каждого передаваемого файла. Keep-alive включен по умолчанию в большинстве случаев и, как правило, является настройкой на стороне сервера. если вам нужно включить его самостоятельно, вы можете отредактировать файл .htaccess и вставить код ниже

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Вставка 4 – Компресс-перенос

Значение Compress Transfer представляет состояние сжатия Gzip. Это метод, используемый для сжатия и последующего распаковывания ваших статических файлов в режиме реального времени. Таким образом, время передачи сокращается, потому что уменьшается размер файла. Если ваш провайдер сервера не применяет эту технологию по умолчанию, вы можете сделать это самостоятельно, указав соответствующее правило для каждого типа файла, например:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

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

Вставка 5. Сжатие изображений

Поле «Сжать изображения» говорит само за себя. Нажмите на него, и он покажет вам, какие изображения можно было бы лучше сжать.

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

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

Вставка 6. Кэширование статического содержимого

Если вы нажмете на поле «Кэшировать статический контент», вы попадете в подробный раздел под названием «Используйте браузерное кэширование статических ресурсов».

Ваш разработчик или администратор может использовать кэширование браузера, указывая веб-браузеру, когда следует кэшировать ресурс, когда нет и как долго с использованием правильных заголовков HTTP. Более подробную информацию о кешировании браузера вы можете найти в нашей статье «Как работает кеш браузера?». Вы также можете узнать, как Pressidium реализует кеширование браузера здесь.

Вставка 7 – Эффективное использование CDN

CDN (или сеть доставки контента) стоит использовать, если у вас есть географически разбросанная пользовательская база. Если, например, все ваши клиенты находятся в Лондоне, и ваш хост-сервер также находится в Лондоне, то, вероятно, нет особого смысла в использовании CDN. Однако, если ваши пользователи более географически разнообразны, то CDN может существенно повлиять на производительность вашего сайта для этих пользователей, разместив копию вашего сайта на сервере, расположенном ближе к ним.

Если вы используете CDN, WebPageTest проверит, насколько эффективно это работает.

Результаты производительности

Давайте продолжим и посмотрим еще некоторые данные, начиная с результатов производительности, которые вы увидите в верхней части вкладки «Сводка».

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

Вид на водопад

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

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

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

Вид подключения

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

Вы можете видеть статус подключения прямо через DNS, начальное подключение, согласование SSL и такие вещи, как видеоресурсы. Ниже также есть график, показывающий загрузку ЦП на устройстве, на котором загружается веб-сайт. Также имеется индикатор пропускной способности, показывающий уровни, используемые во время рендеринга данных.

Запросы Подробности

Наконец, под представлением подключения вам предоставляются еще две аналитические панели — «Сведения о запросе» и «Заголовки запроса».

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

Доска заголовков запросов предоставляет (да, вы уже догадались) список ресурсов запроса вместе с информацией заголовка. Нажмите на каждый для получения полной информации.

Вывод

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