Скорость загрузки сайта: 4 инструмента проверки

2018 год — это год, когда скорость загрузки сайта станет основным фактором ранжирования для мобильной поисковой выдачи уже в июле.  Google об этом публично объявил в январе.

Google давно отслеживает эффект улучшения загрузки сайтов. Порядка 75% сайтов загружаются больше 10 сек (речь идет о полной загрузке сайта). Естественно, скорость загрузки сайта влияет на показатель отказов. Если сайт не загружается за 3 сек., то можно потерять до 50% пользователей. А это, в свою очередь, влияет на показатели конверсии. Сравнив самый быстрый сайт и самый медленной, увидим, что увеличение количества мобильной конверсий  быстрого сайта доходило до 100%.

Чтобы быть уверенными, что ваш сайт отвечает требованиям скорости загрузки, и вы не теряете на этом клиентов, предлагаем  обзор инструментов (TestMySite, PageSpeed Insights, Webpagetest , Lighthouse), которые позволят проанализировать и узнать скорость загрузки сайта.

Test My Site

• Измеряет скорость загрузки сайта в сети 3G
• Оценивает потенциальный бизнес эффект от медленной скорости
• Предоставляет рекомендации по оптимизации

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

На слайде видна оценка потерянных клиентов (bounce rate), которая превышена из-за медленной скорости загрузки, 19 %. Это примерное количество клиентов,  которое можно потерять только из-за того, что сайт грузится медленно. Они не ждут открытия страницы, а покидают сайт. В дополнении к статистике, тест автоматически определяет отрасль, где находится ваш домен, страну, и показывает статистику по скорости загрузки сайтов-лидеров в вашей тематике и в вашей стране.

Что оптимизировать?

Также данный инструмент выдает рекомендации по оптимизации сайта. Условно, все рекомендации можно разделить на такие категории:

• Первая категория – простые или непростые настройки сервера. Например, включить gzip, настроить кэширование, настроить протоколы http2, https;
• Вторая категория – работа с критическими ресурсами или ресурсы, которые блокируют отрисовку JS, CSS, fonts;
• Третья часть – работа с изображениями, видео и другими ресурсами.

Стоит ли реализовывать все советы?

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

Рекомендации в Test My Site (и других инструментах) направлены только на ускорение загрузки сайта.  Не стоит стараться внедрить все рекомендации полностью. Не всегда это может быть целесообразно. Например, при внедрении правок, можно потерять какую-то важную функциональность, что только усугубит ситуацию. Следует рассмотреть все плюсы и минусы от предложенных изменений: как долго их разрабатывать и внедрять, как это поддерживается во всех браузерах, какой ожидаемый результат, и что в итоге вы получите?

ИНСТРУМЕНТ #2: Webpagetest (WPT)

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

 Webpagetest первым ввел показатель скорости загрузки сайта Speed Index.

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

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

Для выполнения анализа скорости загрузки сайта необходимо:

1. Указать адрес страницы (Enter a Website URL), как правило, это страница, куда идет больше всего трафика. Это может быть:

• главная страница;
• продуктовая страница;
• страница категорий;
• страница товара, лэндинг.

2. Локацию сервера (Test location), с которого будет тестироваться сайт. Если нет необходимой страны, города, выбираем тот, что находится максимально близко к вашим пользователям. От этого зависит реалистичность результатов.

Advanced Settings : Дополнительные настройки. Необходимо выбрать скорость соединения (Connection). Рекомендуемая настройка – 3G Fast.

В предыдущем сервисе, проверка осуществлялась на скорости 3G.

3. Количество тестов (Number of Tests to Run) – 3.

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

4. Просмотры (Repeat View): выбираем First View Only, то есть мы рассматриваем только тех людей, которые зашли на сайт первый раз. Таким образом, не учитываем, как эффективно кэшируется информация на сайте.

Дополнительные настройки (Advanced Settings): вкладка Chrome: Emulate Mobile Browser (без этой настройки будет тестироваться десктопная версия)

5. Начать тест (Start test): в результате теста генерируется постоянная ссылка, которую можно отправить специалистам.

Предоставляются показатели скорости загрузки

• Load Time – время от начала начальной навигации до начала события загрузки окна (onload);
• First Byte – время загрузки первого байта;
• Start Render – время начала отрисовки;
• Speed Index – как быстро страница отображает видимый пользователем контент.

Дополнительно к этому

В разделе TEST HISTORY (История тестов), выбрав необходимую проверку, можно получить результат теста разбитого на слайды, которые показывают ежесекундно, что пользователь видит на своем экране при скорости соединения 3GFast.

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

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

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

Кроме того, с помощью инструмента можно делать сравнительный анализ. Указав адреса сайтов конкурентов, можно посмотреть, как относительно друг друга загружаются проверяемые страницы.

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

ИНСТРУМЕНТ #3: PageSpeed Insights (PSI)

Этот инструмент хорошо всем знаком, поскольку Google о нем рассказывал и рекомендовал использовать для проверки индекса скорости загрузки страницы.

Также как другие инструменты, сервис  проверяет и оценивает страницу, и дает рекомендации по ее улучшению. Но в отличие от вышеупомянутых сервисов, PSI не показывает актуальное время загрузки страницы, то есть Speed Index. Он показывает некоторый индекс скорости, внутреннюю метрику, от 0 до 100 на основе реальных данных.

По умолчанию всем сайтам, присваивается индекс 100, и если в результате теста обнаруживаются какие-то проблемы, он штрафует ресурс и говорит, что Ranking Index понизился. При этом показывает все проблемы и варианты  решения. Не всегда удается все проблемы исправить по ряду технических причин, и поэтому не нужно ставить перед собой основную цель достичь 100 баллов PageSpeed Insights из 100, жертвуя остальной функциональностью сайта.

На данный момент этот инструмент не самый популярный и не самый новый, но с конца 2017 года, объединившись с Chrome User Experience Report, он снова стал значимым.

В результате проверки мы видим две метрики:

1. First Contentful Paint (FCP)  – отрисовка контента
2. DOMContentLoaded (DCL)    – измеряет время, когда документ был загружен и обработан браузером

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

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

Сервис показывает распределение реальных пользователей.

Зеленый сегмент – означает что, всего лишь  8% пользователей получили отрисовку страницы быстро – Fast .

Оранжевый сегмент – полная загрузка ресурса с показателем Fast, произошла для 0% пользователей.

Далее, у 29% пользователей First Contentful Paint был со скоростью менее 3 сек., у 5% DOMContentLoaded со скоростью менее 4.2 сек.

Красный сегмент – у 63% пользователей FCP более 3.0. сек Полная загрузка сайта DCL произошла со скоростью  более 4.2 сек у 94% пользователей.

Общий результат для сайта – отображение и полная загрузка сайта происходит более 3 секунд.

ИНСТРУМЕНТ #4: Lighthouse

Lighthouse – это автоматизированный инструмент для улучшения качества веб-страниц с открытым исходным кодом. Доступен в Chrome Dev Tools (вкладка Audit), либо отдельным плагином для Chrome.

• Проводит тестирование производительности в браузере (эмуляция скорости соединения и замедление процессора)

• Отображает несколько метрик скорости загрузки (First Paint, First Contentful Paint, First Meaningful Paint, Time To Interactive)

• Минус инструмента в том, что он может выдавать разные метрики скорости, в зависимости от текущей загрузки процессора, и его сложно напрямую соотнести с WPT.

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

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

Метрики инструмента

• First Paint – первая отрисовка, момент, когда мы только видим изображение на сайте, но еще полностью не понимаем, что это;
• First Contentful Paint – информация о логотипе либо изображении, которая нужный ресурс;
• First Meaningful Paint – когда мы видим уже большую часть информации, текст;
• Time To Interactive – полное время загрузки.

Speed Index нельзя напрямую соотносить с этими тестами, поскольку Webpagetest  – отдельный инструмент и тестируется на стороннем сервере. Но если предположить, что все тестируется на одних и тех же установках,  Speed Index Lighthouse будет находиться между  First Meaningful Paint и Time To Interactive.

Как улучшить показатели скорости загрузки сайта

Необходимо опираться на две момента:

1. Critical Rendering Path (Процесс визуализации)

Оптимизация критических (блокирующих отрисовку ресурсов) позволяет улучшить метрики First Meaningful Paint и Time To Interactive.

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

2. RAIL Performance Model

RAIL-ориентированная на пользователя модель производительности, которая разбивает опыт пользователя на ключевые действия.

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

О том, как быстро сайт отвечает на все действия пользователя:

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

Сравнительный анализ сервисов

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

Исходя из этого, для нашего сравнения мы брали общие показатели.

	Скорость работы	Восприятие информации	Полнота информации	Стоимость
TestMySite	быстро	легко	мало	бесплатно
PageSpeed Insights	быстро	средне	средне	бесплатно
Webpagetest	медленно	средне	много	бесплатно
Lighthouse	медленно	сложно	много	бесплатно

Автор: Александр Баклажко, руководитель SEO-отдела