
Зачем мониторить скорость сайта?
К интернет-магазину нужно относиться как к любой технической системе - вашему автомобилю, серверу в офисе, отопительному котлу на даче. Любая техническая система нуждается в мониторинг и профилактике. Что делать, если тормозить сайт мы писали в одной из своих статей.
ПОМОГИТЕ! МОЙ САЙТ ТОРМОЗИТ!
В этой статье рассмотрим способы диагностики и мониторинга “тормозов” сайта. Может возникнуть вопрос - Почему так важна скорость сайта? Ну отрывается от 3-4 секунд, не так критично.
Половина клиентов ожидают, что сайт загрузится не дольше, чем за 2 секунды.Если скорость загрузки сайта выше 3 секунд, более 40% пользователей захотят с него уйти. Свыше 50% посетителей оценивают лояльность к компании по скорости загрузки их сайта. Ожидания загрузки сайта свыше предполагаемого снижают лояльность более чем на 16%.
Скорость загрузки сайта напрямую связана с конверсией в покупку и с лояльностью клиентов.
Рассмотрим способы мониторинга, мы разделяем их на две группы:
-
Средства мониторинга - используется для контроля скорости загрузки сайта, они не дают данных для анализа причин медленной загрузки, но подходят для ежедневного мониторинга.
-
Средства анализа - с помощью таких программных средств можно не только замерять скорость, но и понять, что является причиной “тормозов”. Такие инструменты обычно используют для детального анализа, когда уже точно понимают, что сайт работает медленно.
Средства мониторинга

Нужный отчет находится в меню “Отчеты”-”Стандартные отчеты”-”Мониторинг”-”Время загрузки страниц”

Отчет имеет следующий вид:

-
Время до отрисовки - это время до момента, когда на странице начнут появляться какие-либо элементы. Это важный показатель, т.к. Чем быстрее пользователь увидит страницу, тем лучше. Конечно, если на сайте все настроено верно и догрузка данных идет в фоне.
-
Время до загрузки DOM - это время полной загрузки страницы, если оно большое, то пугаться не стоит, т.к. большинство загрузкой происходит в фоне и не влияют на пользовательский опыт. Полная загрузка может занимать достаточное время т.к. Средний размер страницы 2-3 Мб, при скорости интернета 20 Мбит/c такая страница загрузиться ~ 1 секунды к этому времени нужно прибавить еще время ответа сервера, время формирования страницы сервером и еще некоторые параметры. Поэтом размер страницы является важным фактором скорости загрузки, поэтому самая первая рекомендации по увеличению скорости - оптимизировать контент - сжать изображения без потерь, сжать скрипты

Нужный отчета находится в меню “Отчеты” - “Поведение” - “Скорость загрузки сайта” - “Время загрузки страниц”

В этом отчете представлено только среднее время загрузки страниц, причем именно полная загрузка, поэтому время в этом отчете может быть больше.
Если ваш сайт разработан на CMS 1С:Битрикс Управление сайтом, то в административной панели уже есть виджет “Скорость сайта”, который показывает среднее время загрузки страниц для последних 1 000 пользователей. Плюс виджета также в том, что он показывает географическое распределение пользователей. По этим данных вы можете, например, сделать выводы и переносе сайта на сервера ближе к вашей целевой аудитории для увеличения скорости.


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

Схема работы простая - вставляем в строку ввода ссылку на интересующую страницу и нажимаем “Анализировать”.

Несомненные плюсы инструмента в том, что он дает аналитику и для мобильной версии и для версии для ПК. Также по каждому пункту даны ссылки и пояснения, что не так и что нужно сделать.
В большинстве случаев для вывода в зеленую зону достаточно оптимизировать изображения:

Если у вас есть такое предложение, то выполнить вы его можете и самостоятельно - заменив все изображения на сайте на сжатые без потерь, например, TinyPng или Optimizilla. Для пакетного сжатия изображений, например, каталога фото 1С мы пользуемся Riot.
В бесплатной версии сервиса возможно проверить скорость только для 4 геолокаций. Вставляем ссылка на интересующую страницу сайта, выбираем откуда тестировать и проверяем. Для использования сервиса нужны базовые знания английского языка.

После анализа система выдаст результат.

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

Сводный график порядка и скорости загрузки страницы:

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

Результат представляется в таком виде:

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

Самое главное, что нужно помнить, что много данных не бывает, каждый сервис может дать вам новую информацию для анализа, поэтому мы рекомендуем на ежедневной основе использовать средства для мониторинга и как минимум 1 раз в месяц запускать средства для аналитика. Конечно, проверять нужно не весь сайт, а самые популярные страницы, в большинстве случаев это:
-
Главная страница
-
Страница каталога товаров
-
Карточка товара
-
Корзина
Популярные страницы для вашего сайта вы сможете найти в Яндекс.Метрике - “Отчеты”-”Стандартные отчеты”-”Содержание”-”Популярное”:

Проверяйте скорость вашего сайта, уменьшайте скорость загрузки страницы и получайте довольных клиентов и много заказов!
