Последние несколько лет Google активно работает над созданием метрик для оценки производительности сайтов. Он поднимает выше в поисковой выдаче те, которые загружаются быстрее. Ставка делается на опыт пользователя: чем меньше скорость загрузки, тем лучше сайт ранжируется. В крайне тесной конкуренции в онлайн сегменте скорость загрузки сайта – ключевой фактор.
Анализ ресурса Backlinko (результаты теста для более, чем 5 миллионов сайтов), показывает, что:
Конечно, это общее время для полной загрузки сайта со всеми картинками, скриптами, кнопками и прочей информацией. И, все же, это очень, ну очень долго.
Среднестатистический пользователь дольше 2-3 секунд и не будет ждать, а ведь нам нужно превратить этого пользователя в клиента. Сегодня и поговорим о том, как можно это сделать.
Чтобы ответить на этот вопрос, начнем с простого примера.
Вот вы хотите купить обувь. Вбиваете соответствующий запрос в Поиске. Выбираете сайт, кликаете мышкой и ждете, ждете, ждете… знакомая ситуация?
Вместо карточек товара на экране виден только белый фон, и пока что-то появится, вы уже будете на другом сайте рассматривать пятую пару обуви. Лично я бы так и поступила.
В новом исследовании аудиторской компании Deloitte (2020) проверили, как уменьшение скорости загрузки на 0.1 секунду на мобильных телефонах влияет на конверсию и показатель отказов для 37 сайтов. В итоге конверсия увеличилась на 8.4%, а bounce rate уменьшился на 8.3%.
Отсюда и ответ на вопрос “зачем” – чем меньше сайт загружается, тем больше прибыли и клиентов вы можете получить.
Проблема со скоростью загрузки знакома всем.
Давайте выясним, что влияет на время загрузки контента:
Провести свой тест очень легко. Нужно найти онлай-сервисы и вставить туда адрес сайта или страницы. Да и долго ждать не придется – анализ длится не более минуты.
А вот с результатами нужно будет разбираться, потому что названия метрик что на английском, что на русском, будут непонятны большинству пользователей.
Чтобы разобраться, проверим скорость загрузки одной страницы сайта по продаже мобильных телефонов и поделимся с вами ключевыми выводами и пояснениями.
Это крутой инструмент от компании гугл, который измеряет основные показатели загрузки:
В итоге пользователь видит отчет с имитацией загрузки страницы для мобильных и ПК (рис. 1-3) и рекомендациями по улучшению производительности.
*Лайфхак: чтобы увидеть отчет на русском, поставьте русский как основный язык хрома).
Интерфейс у сервиса простой и понятный. Плюс есть объяснения (можно перейти по ссылкам в отчете на соответствующие статьи) и всплывающие подсказки.
По умолчанию проверка производится для мобильной версии сайта и это логично. В качестве тестируемого устройства используется Moto G4, который сменил Nexus 5.
Рис. 1 – Первая часть отчета для мобильных
Рис. 2 – Вторая часть отчета PageSpeed Insights
Рис. 3 – Результаты анализа для десктопной версии. Здесь дела обстоят получше.
На момент теста уже есть бета-версия Lighthouse 6, но мне проверить ничего не удалось.
Данные сервисов Core Web Vitals и Lighthouse собраны в одну страницу. Результат оценивается от 1 до 100 баллов, но нигде не указано, сколько секунд в целом нужно странице для полной загрузки.
Выводы: для нашего сайта скорость на компьютере оценивается в 97 баллов (очень хорошо), а для мобильных – 74 (средне). Второй результат объясняется большим временем отрисовки крупного контента (LCP) и общим временем до того как страница станет интерактивной (TTI).
Русскоязычный сервис с возможностью проверки скорости загрузки сайтов из России, Беларуси, Украины и Германии.
Показатели, что измеряются:
Также показан процесс отрисовки макета страницы на мобильном устройстве.
Рис. 4 – Проверка в Loading Express
*Loading Express показал отличный результат. Проверка скорости производилась утром, посетителей было немного.
Если смотреть подробности, то видим: сколько весят различные данные страницы, задержку ввода и первую отрисовку страницы в милисекундах. Отдельно показывается время выполнения JS.
Выводы: утренний замер производился только для мобильного на скорости 3G и итоговый результат загрузки – 2.3 секунды (очень хорошо). Вечером страница загрузилась за 2 секунды. Время ответа сервера – 618 мс, а время максимальной задержки ввода всего 101 мс.
Это полностью англоязычный сервис с возможностью выбора города (всего 7), из которого будет производиться анализ.
Рис. 8 – Тест скорости загрузки в сервисе Pingdom Tools (замер из Лондона)
Пингдом тоже дает рекомендации по оптимизации страницы и показывает, какой размер имеют элементы страницы (код, картинки, скрипты). Еще он показывает подробности выполнения и отображения запроса по времени.
Выводы: слишком долгая отрисовка страницы занимает 5 секунд для ПК. Несжатые данные, отсутствие кэширования, множество файлов и преобразований DNS по мнению Pingdom, существенно тормозят время отображения данного ресурса.
Как и предыдущий сервис, показывает время до полной загрузки сайта и имеет 2 показателя: PageSpeed Score и YSlow.
Первый выводит процентное отношение скорости вашего сайта к другим сайтам, которые анализировал GTmetrix за последние 30 дней.
А YSlow оценивает сайт по 23 правилам Yahoo для высокопроизводительных сайтов, и выдает процент соответствия.
Само тестирование производилось из Ванкувера (Канада). Чтобы поменять город, устройство, браузер и тип соединения, надо зарегистрироваться.
Рис. 9 – Результаты теста в GTMetrix
БОльшая часть результатов записана в таблице Waterfall, пояснение к которой можно прочитать на сайте. Существует сортировка по типу элементов, виден адрес, размер файлов, и цветом выделен каждый этап обработки данных браузером.
И 4 вертикальных полосы, чтобы понимать, сколько времени проходит от момента отображения первого элемента до полной загрузки страницы со всеми элементами.
Рис. 10 – Показатели PageSpeed
Выводы: GTmetrix показал, что имеется проблема с оптимизацией изображений, наличие лишнего CSS/HTML кода и отсутствие CDN.
И снова инглиш. В главном окне нужно выбрать:
В этом тесте значения видно на примере ниже:
Рис. 11 – Проверка загрузки сайта на Uptrends.com
Приведены баллы из теста скорости Гугл. В первом примере мы выбрали обычное соединение (без ускорений/замедлений). А вот если выберем волоконное, то результат уже будет лучше:
Рис. 12 – Результаты проверки после изменения типа соединения
Так же, как и в GTmetrix, сервис предоставляет подробную таблицу с анализом компонентов и временем их загрузки, и в дополнение – советы по оптимизации.
Для мобильной версии выбрали iPhone X, скорость – 4G и Nexus 7 (3G).
Рис. 13 – Результат для iPhone X
Рис. 14 – Результат для Nexus 7
Еще можно выбрать Samsung, LG, Google Pixel, Google Nexus и 2G, 3G скорость. Если смотреть на общее время загрузки, то 3 секунды – это как раз тот золотой стандарт, о котором мы говорили.
Но PageSpeed недоволен, а объясняется это просто – там используется другой девайс для проверки.
Выводы: В контролируемых условиях Uptrends указал на проблемы с форматом и размером картинок. Нажав на подсказку, можно увидеть, сколько весят изображения. Также сервис указал на неиспользуемый джаваскрипт и нашел этот файл. Для мобильной версии увеличилось время получения файлов, а проблемы с изображениями и JS остались те же.
Сервис производит разное количество подключений и делает три последовательных теста. Можно использовать как для обычного компьютера, так и для телефона:
Рис. 16 – Оценка производительности
Рис. 17 – Тесты проверки скорости сервисом Web Page Test
Помимо стандартной таблицы результатов, есть еще одна – таблица анализа соединений, в которой количество строк=количеству соединений. Это сделано для того, чтобы увидеть, сколько TCP-соединений было, и какие данные по каждому загружались (Waterfall chart отображает процесс загрузки каждого файла отдельно, а не целого канала).
Новые TCP-соединения использовать дорого, возможно, некоторые можно использовать повторно, что сэкономит и время и деньги.
Рис. 18 – Таблица с результатами использования соединений
Выводы: подробный результат загрузки страницы в графиках и таблицах показал, что снова проблема в картинках, так как они занимают большую часть веса страницы и джаваскрипт код. В результате видно, что общее время загрузки больше 4-х секунд, но интерактивной страница стала после 1.9 секунд. Для десктопной версии выбрали город Чикаго и браузер Хром, но общее время 5 секунд, интерактивность появляется после 1.6 секунды. Проблемы те же самые – большие изображения и неоптимизированные скрипты.
Это простой сервис для анализа скорости, который использует несколько датацентров по всему миру. В результате проверки видим, что замеряется время преобразования IP, SSL-рукопожатие, время пока сервер начнет передавать данные браузеру и время загрузки контента.
Рис. 19 – Проверка в Sitespeed.me
Выводы: замер в нашем случае был произведен по непонятным причинам всего из двух серверов: в Амстердаме и Калифорнии. Запросов тоже было произведено мало, но из Амстердама доступ произошел всего за секунду и самый долгий процесс – время до первого байта (TTFB). В Калифорнии скорость загрузки страницы составила 2.7 секунды, из которых SSL-рукопожатие заняло больше 1 секунды.
Время – самый ценный ресурс. Мы не хотим ждать, нам нужно здесь и сейчас. При этом, рекомендуемое время для загрузки сайтов – 5 секунд и меньше на скорости 3G. Но и это много.
Маркетологи в курсе, что скорость способна повысить продажи, но большинство игнорируют эту проблему. Хотя в свободном доступе полно достойных ресурсов. Англоязычные дают более детализированные результаты, русские наоборот, обобщенные. Какой сервис использовать для вашего сайта, решать только вам.
Для Google этот показатель имеет значение, так как чем быстрее грузится сайт, тем выше он поднимается в поисковой выдаче. А чем выше поднимается, тем больше конверсий, продаж и прибыли приносит… ну, вы поняли!
А если не хотите сами разбираться, доверьте это нам. Команда ITForce проведет полную оценку скорости загрузки сайта, найдет все проблемы и предложит комплексный план оптимизации.
