Доля интернет-продаж увеличивается с каждым годом. Cогласно исследованию Akamai, в 2017 году она составляла всего 10 % от мировых продаж, в 2019 — уже 14 %, а в этом году, учитывая пандемию, эта цифра вырастет еще стремительнее. Конкуренция в интернете огромная. Вывести сайт в топ поиска и привлечь клиентов — задача намбер ван для предпринимателей и корпораций. Рассказываем, как незначительное увеличение скорости загрузки сайта поможет обойти конкурентов и начать продавать больше.
Скорость загрузки сайта — время, за которое страница полностью загрузится на компьютере или смартфоне. На нее влияет многое: программное обеспечение; архитектура сайта; провайдеры, которые урезают трафик, благодаря чему падает скорость интернета и загрузки контента. Но чаще всего виной всему вес страницы. Если на ней много тяжелых изображений, видео, гифок, то скорость загрузки упадет.
Скорее всего, пользователи не будут ждать, а закроют страницу и уйдут на другой ресурс, если сайт открывается слишком долго. И бизнес потеряет эти % потенциальных клиентов.
Пример: человеку надо купить кофе. Он вводит в поисковую строку «купить кофе в зернах» и открывает пятую ссылку. Сайт грузится медленно, и пользователь, не дождавшись результата, уходит. Скорее всего, он больше никогда не вернется, так как запомнил, что сайт магазина виснет. Так плохая работа сайта магазина отталкивает реального клиента.
Оптимальная скорость загрузки — 2-3 секунды. В идеале за этот промежуток времени должна загрузиться страница со всеми ее компонентами. Это тот показатель, к которому надо стремиться.
Проанализировать этот показатель можно с помощью инструментов от Гугла и Яндекса.
PageSpeed Insights проверяет скорость загрузки, находит ошибки и предлагает варианты решения. Можно сделать экспресс-анализ, если вам некогда разбираться и поджимает время.
Работать с сервисом просто: введите в строку поиска адрес сайта, и через 3 секунды вы получите отчет по работе ресурса.
За несколько секунд сервис проанализирует сайт и выдаст отчет
Показатели в норме отмечены зеленым цветом, а те, которые надо улучшить, — красным. Отчет по показателям находится в разделе «Имитация страницы».
Анализ скорости загрузки сайта
Удобно, что сервис сразу предлагает решения, которые помогут увеличить скорость.
PageSpeed Insight выдает конкретные рекомендации и показывает, на сколько секунд повысится скорость
Оценивание идет по
Плюсы: измеряет все ресурсы, которые подключены; проверяет оптимизацию изображений.
Минусы: неточная диагностика, показатели надо анализировать. Например, если отправить на проверку хорошо оптимизированный сайт весом 15 МБ, то сервис, скорее всего, выдаст результат 100/100 по мобильному/компьютерному анализу. Хотя по факту сайт с таким весом будет тормозить, если его открывать на смартфоне. Стоит отметить, что ресурс проверяет скорость загрузки сайта до DOM (программный интерфейс), минуя интерактивность с пользователем.
В анализе не учитывается скорость интернета и особенности браузеров, в которых работает пользователь.
Яндекс.Метрика — бесплатный сервис, который может анализировать посещаемость сайта, скорость его загрузки, поведение пользователей.
Работать в Яндекс.Метрике можно только с реальным сайтом и под своим логином в Яндексе. Если логина еще нет — надо зарегистрировать электронную почту и авторизоваться в Метрике.
Скорость загрузки сайта в Метрике можно посмотреть в разделе «Отчеты» > «Время загрузки страниц». Данные сервис показывает в виде карты: на ней указано время ожидания жителей разных стран и регионов.
Зеленый цвет — все хорошо, красный — сайт медленно загружается
Единица измерения скорости загрузки сайта в Яндекс.Метрике — квантиль. В базовых настройках стоит 50 %. Это значит, что средняя скорость загрузки сайта — 5 секунд. Если указать в настройках меньший процент, — например, 30 % — сервис найдет и покажет проблемные зоны, которые мешают сайту загружаться за 3 секунды. В Яндекс Справке подробно написано о том, как работать с отчетами по скорости загрузки сайта.
Pingdom Website Speed Test. Работает так же, как и PageSpeed Insights: надо указать адрес проверяемого сайта, и через несколько секунд отчет будет готов. Показывает производительность сайта, количество запросов к серверу, время загрузки страниц и размер конкретной страницы.
Информация по оптимизации скорости загрузки
Плюсы: визуализирует общие показатели, проводит детальный анализ по страницам, указывает размеры загружаемых файлов и распределение времени по загрузке.
Минусы: сервис платный. Платить придется минимум $9,95 в месяц.
GTmetrix проводит тест загрузки сайта, показывает производительность основной страницы, ее компонентов. Можно выбрать локацию пользователя, тип браузера и посмотреть информацию по загрузке каждого элемента.
Выявленные проблемы при тестировании скорости загрузки сайта
Плюсы: быстрый, автоматически сохраняет историю, снимает видеоряд загрузки.
Минусы: интерфейс на английском, чтобы изучить, придется повозиться.
Для аналитики лучше использовать минимум 3 инструмента — так будет выше точность анализа.
Многие способы потребуют специальных знаний. Лучше найти SEO-специалиста и доверить эту задачу ему. А вот как можно это сделать самостоятельно.
Объединить все картинки в одну. Это называется CSS-спрайт. Так уменьшается общий вес изображений, к серверу отправляется один запрос, и скорость сайта увеличивается. Например, на сайте есть раздел «Способы оплаты» с иконками сервисов, через которые можно платить: Яндекс.Деньги, Вебмани, банковские карточки. Каждая иконка отправляет отдельный запрос на сервер, обработка запроса занимает время, и скорость загрузки падает.
В этом случае поможет CSS-спрайт. Его можно создать с помощью редакторов изображения — объединить все иконки в одно изображение. Картинка будет весить меньше, и сервис получит только один запрос, а не 5 или 10.
Скомбинировать несколько файлов js- и css в один. У JavaScript и CSS есть свои плагины, стили и шрифты. Каждый из них генерирует свой код. Из-за этого на сервер отправляется множество запросов, и скорость загрузки сайта снижается. Если два компонента объединить, то показатели улучшатся.
Если совместить анимацию или активный элемент с табличкой, стилями, то общий вес элементов уменьшится
Сократить HTML-код. Он отвечает за отображение элементов на странице. Бывает, что в код попадают лишние пробелы, знаки или пустые места, и это утяжеляет файл. Если код почистить, вес файла уменьшится, и скорость загрузки увеличится.
Работать с кодом лучше, когда идет общее тестирование сайта по всем параметрам, т. е. непосредственно перед запуском, так как после его запуска и использования, это потеряет смысл. Проще разработать новый веб-ресурс, чем исправлять ошибки за предыдущим программистом.
Использовать максимум 3 шрифта на одной странице. А лучше один. У каждого шрифта есть вес: чем больше шрифтов на странице, тем больше ее размер. Это влияет на скорость загрузки сайта.
Это выглядит так: появляется сайт, потом через некоторое время подгружаются шрифты.
Сжать объемные изображения. Уменьшить вес картинок можно в специальных сервисах — например, с помощью Kraken.io.
Таблица для сравнения показателей сайта с эталонными.
Метрика | Описание показателя | Эталонные цифры согласно сервису |
|---|---|---|
Время загрузки контента | Количество секунд до загрузки первой статьи или картинки | 0–2 сек. |
Индекс скорости | Как быстро появляется информационное содержание (контент) | 0–4,3 сек. |
Время загрузки основной части контента | Промежуток времени между началом и концом загрузки; он должен совпасть с первой метрикой в таблице | 0–2 сек. |
Завершение работы ЦП | Когда интерфейс полностью доступен для пользователя | 0–4,7 сек. |
Время загрузки для использования | Через какое время страничка готова для пользовательского ввода | 0–5,2 сек. | <
Максимальная вероятная задержка после ввода | Время первого взаимодействия с сайтом и отклика самого браузера | 0–200 мсек. |
Статья носит ознакомительный характер. SEO-специалист, веб-разработчик, программист сами решают, какой инструмент выбрать для проверки скорости загрузки сайта. Безусловно идеально все это учитывать при разработке сайта. И существует множество мнений на этот счет. Если есть, чем дополнить сказанное выше – пишите в комментарии. Успехов!
Подпишитесь на ежемесячную рассылку Workspace
Отлично! Мы отправили письмо на указанный вами электронный ящик с инструкцией по подтверждению.
Если письмо с подтвержением вашего e-mail не будет получено в течение 10 минут, пожалуйста, проверьте папку СПАМ в соответствующем почтовом ящике.
