Главное Авторские колонки Вакансии Образование
😼
Выбор
редакции
1 912 3 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Быстрее — выше. Как скорость загрузки влияет на конверсию

Эпоха dial-up и ADSL уже давно закончилась (а для многих даже не начиналась) и мы вообще забыли, что сайты могут «грузиться» долго по техническим причинам. Тем не менее, параметр скорости загрузки страницы никуда не делся и играет важную роль в ранжировании сайтов.
Мнение автора может не совпадать с мнением редакции

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

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

  • Поисковые системы продвигают наиболее быстрые сайты. Даже если на сайте проведена прекрасная SEO-оптимизация, но скорость загрузки хромает, гугл с яндексом заметят это и снизят его позиции в поисковой выдаче.
  • Быстрая скорость загрузки улучшает юзабилити и, как следствие, продажи. Посетители не тратят время на долгую загрузку и вся работа с сайтом идет «как по маслу». Это существенно сказывается на конверсии.
  • Отсутствие тормозов свидетельствует о хорошей оптимизации сайта. Если страницы загружаются быстро, значит на сайте нет «мусорных» скриптов, тяжелой графики, а также ошибок и нагромождений в коде.

Каким сайтам скорость нужна как воздух

  • Интернет-магазины. Когда вы продаете в онлайне, нельзя заставлять покупателя ждать. Ничто так не приводит в бешенство потенциального клиента, как постоянно «подвисающая» страница и с трудом загружающиеся изображения.
  • Корпоративные сайты. Сайт организации — лицо компании. Неважно, насколько дорог, свеж и красив дизайн — если страницы загружаются медленно, это станет пятном на репутации.
  • Новостные и развлекательные порталы. Современный пользователь привык «проглатывать» новости пачками. Поэтому, долг таких сайтов — обеспечить моментальное отображение контента. Иначе пользователь навсегда запомнит тормозящий портал и больше никогда туда не вернется.
  • Любой мобильный сайт. Доля мобильного трафика уже перешагнула отметку 50% и продолжает расти дальше. Позаботиться о таких пользователях и оптимизировать скорость загрузки на мобильных устройствах — мудрый и дальновидный шаг. Особенно с учетом того, что по статистике мобильное соединение с интернетом не всегда такое быстрое и стабильное, как на десктопах.

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

Как увеличить скорость

Начать стоит с диагностики, чтобы проверить, какие именно факторы замедляют загрузку сайта. Для этого есть прекрасный инструмент Google PageSpeed Insights. Введите в строке адрес сайта и немного подождите, через несколько секунд появится оценка. Если вердикт зеленого цвета — беспокоиться не о чем. Сайт загружается быстро и исправлять там особо нечего, ну разве что просто довести до совершенства в приступе перфекционизма.


Пятерка с плюсом по меркам Google PageSpeed Insights

Если же оценка в красных тонах — впереди много работы.


Это — плохая оценка. Мы расскажем об основных шагах, чтобы сделать ее лучше

Шаг 1. Графика на сайте должна «похудеть»

Тяжелые изображения — распространенная причина медленной загрузки страниц. При этом, чтобы уменьшить «вес» страниц в два раза и больше, не нужно идти на великие жертвы. Чаще всего файлы изображений необоснованно «раздуты» и можно добиться их приемлемого размера без каких-либо визуальных потерь.

  • Используйте правильный формат картинок. PNG более функционален и так любим дизайнерами за эффект прозрачности. Но если в нем нет необходимости, выбирайте JPEG — он «весит» гораздо меньше.
  • Не налегайте на максимальное качество изображений. JPEG, сохраненный в максимальном и низком качестве чаще всего выглядит одинаково, но при этом их объем на диске различается в несколько раз.
  • Используйте векторный формат SVG. Векторная графика автоматически масштабируется, поддерживается всеми современными браузерами и очень мало «весит». К сожалению, она не подходит для всех видов изображений — в векторе чаще всего отрисовываются простые картинки, фигуры, кривые или текст. Но там, где изображения в формате SVG допустимы, используйте их, а не JPEG и тем более PNG.
  • Оптимизируйте графические файлы. Это можно сделать вручную в Adobe Photoshop, но удобнее использовать специальные программы и сервисы, вроде OptiPNG, JPEG-Optimizer, PngCrush или IMGonline. Множество изображений содержит в себе кучу сопутствующих данных (комментарии, метаданные, история изменений и т.д.), которые не несут никакой пользы и лишь занимают место.

Шаг 2. Удалите все лишнее

Если сайт буквально увешан баннерами, плагинами и модулями — неудивительно, что пользователям приходится долго ждать его загрузки. Уберите все ненужные баннеры. Они не только снижают скорость загрузки, но и могут внешне опошлить внешний вид сайта, если перебрать с их количеством. Различные неэффективные модули тоже должны отправиться на свалку — так вы уменьшите количество запросов от браузера клиента к серверу, тем самым ускорив загрузку сайта.

Шаг 3. Оптимизируйте JavaScript и CSS

  • Сторонние скрипты очень влияют на скорость загрузки. Поэтому всегда отключайте ненужные или неэффективные скрипты.


Обилие скриптов существенно увеличивает время загрузки сайта. Источник: https://developers.google.com
  • Если большого количества JavaScript и CSS-элементов не избежать, подгружайте их с разных доменов или поддоменов. Таким образом одновременно задействуется сразу несколько каналов загрузки вместо одного. В некоторых случаях, особенно когда клиент и сервер находятся на большом физическом удалении, желательно использовать CDN (Сеть доставки контента). Так вы сможете загружать данные с наиболее близкого к пользователю сервера.
  • Всегда сжимайте код JavaScript и CSS-элементов при помощи сервисов вроде Online JavaScript/CSS/HTML Compressor. Оптимизация происходит за счет упрощения переменных и функций, а также удаления лишних или случайных элементов кода (пробелы, комментарии, пустые строки). На функционале скрипта и сайта это никак не скажется.

-1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Иван Петрович
Опять содержимое не соответствует названию статьи, опять 100500 статья на старую тему, где не написали ничего нового.
Ответить
Pepperbox Media
Цифровой декаданс и поиск N-го измерения
Иероним Б.
«Эпоха dial-up и ADSL уже давно закончилась (а для многих даже не начиналась) и мы вообще забыли, что сайты могут «грузиться» долго по техническим причинам.»
Не совсем корректное сравнение)). Диалапы прошли, но и прошло время по-настоящему быстрого интернета. Лет 8-10 назад сайты не были напичканы таким количеством скриптов и неоправданно огромных картинок, как сейчас и как ни странно грузились в разы быстрее современных. Но дело не только в этом. В целом все стало медленней хоть продается под теми же физическими характеристиками. Я недавно с грустью смотрел как современные «100 мегабит» грузят несколько секунд мой один старый сайт на флеше. А ведь тогда в 2008 я был вынужден замедлять скорость чтобы протестировать работу прелоадера ибо он просто влетал мгновенно (кэш не причем). Зато сейчас в 2020м я его, блин, вижу и жду....
Ответить
Alex Beglov
Еще достаточно важный пункт по ускорению - оптимизация и сжатие картинок на сайте. Можно оптимизировать вручную каждую картинку (через Photoshop к примеру), можно автоматически (через специальные сервисы). Вот интересная статья на эту тему: https://pr-cy.ru/news/p/6831-kak-i-zachem-optimizirovat-izobrazheniya-na-sayte
Ответить
Выбрать файл
Не пропустите публикацию!
Волга-Веб
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.