Как ускорить ваш сайт с помощью бесплатного инструмента? Простая инструкция как найти узкие места

Привет! На связи Максим Кульгин, основатель компаний по защите от скликивания и парсингу сайтов. Если собираетесь сделать сайт, то лучше его делать быстрым (Капитан Очевидность). Это полезно для ранжирования у поисковиков и для ваших клиентов, кто не очень любит ждать отклика. Есть масса исследований, которые говорят — люди любят быстрые сайты.

Это реальные показатели одного из наших проектов на базе WordPress. Есть что улучшать, но в целом неплохо :)

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

Напоминаю, что веду свой Телеграм-канал Русский ИТ бизнес, где без прикрас рассказываю о своем ежедневном опыте по ведению нескольких бизнесов в России. Не все у нас получается, но мы стараемся:)
Там прикольно и много полезного

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

В этой статье я расскажу про работу с WebPageTest и то, как с его помощью можно улучшить работу сайта.

Что такое WebPageTest?

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

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

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

Что делает WebPageTest?

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

Он:

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

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

Медленно загружающиеся страницы = потерянные посетители.

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

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

Вот, например:

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

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

Как ускорить ваш сайт с помощью бесплатного инструмента? Простая инструкция как найти узкие места

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

Начинаем работу с WebPageTest

Провести тестирование с помощью WebPageTest очень просто.

Прямо на главной странице введите адрес своего сайт? выберите конфигурацию и нажмите опцию Start a Site performance test (Начать тестирование быстродействия сайта):

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

Если ни одно из стандартных мест не подходит для проведения теста, выберите опцию Advanced Configuration (Продвинутые настройки). Это позволит выбрать другие места тестирования и ввести дополнительные параметры:

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

Интерпретируем результаты

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

При интерпретации результатов я рекомендую обратить внимание на три ключевые области отчетов в WebPageTest. Первая — это раздел Performance Summary (Резюме по производительности) , в котором представлен обзор результатов работы сайта. В нем можно увидеть, какова скорость работы, удобство использования и работоспособность сайта:

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

Вернувшись на главную страницу отчета, прокрутите страницу вниз до раздела Page Performance Metrics (Метрики производительности страниц). Здесь вы найдете несколько показателей, которые показывают, сколько времени требуется сайту для загрузки и начала работы:

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

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

Далее в разделе Real-World Usage Metrics (Метрики использования в реальных условиях) представлен обзор тех же показателей в сравнении с данными последних тестов других пользователей (если они доступны). Чтобы получить полное представление о работе сайта, я рекомендую сравнить эти показатели с предыдущим разделом Page Performance Metrics.

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

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

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

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

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

Плюсы WebPageTest

Всесторонний анализ. WebPageTest предоставляет подробную информацию о производительности вашего сайта, что облегчает выявление областей, требующих улучшения.
Настраиваемые тесты. Инструмент поддерживает различные браузеры, местоположения и настройки тестов, что позволяет моделировать различные пользовательские ситуации. Можно настраивать параметры тестов по своему усмотрению или использовать стандартные параметры, предоставляемые сервисом, если нужен краткий обзор.
Бесплатность и открытый исходный код. Я являюсь большими поклонником программного обеспечения с открытым исходным кодом, вроде WordPress, поэтому бесплатность и открытость 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 Insights

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

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

Инструменты Pingdom

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

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

Резюме

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

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

А как вы отслеживаете работу ваших сайтов? И отслеживаете ли вообще? Поделитесь в комментариях, чего вам не хватает в этой области!