заказать звонок
+38 057 755-48-00
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
156
8

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

Анализ ресурса Backlinko (результаты теста для более, чем 5 миллионов сайтов), показывает, что:

  • десктопная версия грузится 10 секунд;
  • мобильная - все 27 секунд.

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

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


1. Зачем измерять скорость загрузки?

Чтобы ответить на этот вопрос, начнем с простого примера.

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

В новом исследовании аудиторской компании Deloitte (2020) проверили, как уменьшение скорости загрузки на 0.1 секунду на мобильных телефонах влияет на конверсию и показатель отказов для 37 сайтов. В итоге конверсия увеличилась на 8.4%, а bounce rate уменьшился на 8.3%.

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


2. Причины медленной загрузки сайтов

Проблема со скоростью загрузки знакома всем.

Давайте выясним, что влияет на время загрузки контента:

  • Местоположение сервера и нагрузка на него. Если сервер находится в Австралии, то скорость доступа к сайту у украинца и австралийца будет различной. В пользу последнего, конечно же. 
  • Неоптимизированный код. Веб страница состоит из html-кода, css-таблиц и JS кода. Если JS находится вверху html-документа — он будет рендериться первым, не позволяя подгружать другие элементы страницы. Захламленность кода (лишние строки, необъединенные таблицы стилей и т. д.). Также замедляет процесс обработки кода.
  • Избыток плагинов и дополнений. Наверняка, сайт с большим количеством примочек в виде кнопок соцсетей, показа похожих публикаций, онлайн оплаты и всего такого смотрится гораздо лучше. Хотя и грузится дольше.
  • Отсутствие кэширования. В процессе первого посещения браузер может сохранять такие элементы, как: изображения, шрифты, скрипты и т. п., чтобы уменьшить количество обращений к серверу. Без этой функции сайт постоянно будет обращаться к серверу, чтобы загрузить их.
  • Видео-контент. Большой вес, ненадежный хостинг и отсутствие оптимизации делает видео “тяжелым”. При этом оно может воспроизводиться прерывисто или вообще быть недоступным.
  • Картинки. Та же ситуация, что и с предыдущим пунктом. Неподходящий размер, количество и вес отрицательно влияют на скорость загрузки интернет-ресурса.

3. Практическая часть

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

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

Чтобы разобраться, проверим скорость загрузки одной страницы сайта по продаже мобильных телефонов (https://***.*****.ru/mobilnye-telefony/nedorogie-smartfony-s-4g/amp/) и поделимся с вами ключевыми выводами и пояснениями.

Это крутой инструмент от компании гугл, который измеряет основные показатели загрузки:

  1. First Contentful Paint (FCP) — время до первой отрисовки любого контента (подробнее о составляющих Core Web Vitals — в статье «Core web vitals: фактор ранжирования Google»).
  2. Speed Index (SI) — индекс скорости загрузки содержимого.
  3. Time to Interactive (TTI) — время до того, как страница станет полностью готовой к взаимодействию с пользователем.
  4. First Meaningful Paint (FMP) — время загрузки основного содержимого страницы.
  5. First Input Delay (FID) — время задержки до взаимодействия пользователя с сайтом.
  6. Cumulative Layout Shift (CLS) — совокупное смещение макета.

В итоге пользователь видит отчет с имитацией загрузки страницы для мобильных и ПК (рис. 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 мс.

  • SeoLik, вкладка “Скорость”

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

Скорость загрузки сайтов

Рис. 5 — Результат для ПК

Скорость загрузки сайтов

Рис. 6 — Результат для мобильного

Есть отчет, в котором три оценки (плохо, хорошо, обратите внимание) с соответствующими значками. Но на основании каких значений ставятся эти оценки, непонятно.

Скорость загрузки сайтов

Рис. 7 — Отчет SeoLik

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

Это полностью англоязычный сервис с возможностью выбора города (всего 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.

И снова инглиш. В главном окне нужно выбрать:

  • десктопную или мобильную версию;
  • разрешение экрана (16:9 — максимальное значение);
  • город;
  • браузер;
  • уровень замедления интернета.

В этом тесте значения видно на примере ниже:

Скорость загрузки сайтов

Рис. 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 остались те же.

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

Сравнила с Гугл проверкой — результаты практически одинаковые.

Скорость загрузки сайтов

Рис. 15 — Скорость загрузки от Гугл

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

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

Скорость загрузки сайтов

Рис. 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 проведет полную оценку скорости загрузки сайта, найдет все проблемы и предложит комплексный план оптимизации.


Рейтинг сайта

10 способов повысить рейтинг сайта

Факторы ранжирования для контента

5 сигналов ранжирования Google, о которых должны знать контент-маркетологи

5 способов улучшения User experience и увеличения продаж через мобильные

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.