Скорость сайта и мобильная версия: почему посетители уходят и как это исправить

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

Как проверить скорость

Откройте сайт с телефона по мобильному интернету, а не по офисному Wi-Fi, и засеките время до момента, когда можно читать и нажимать. Для цифр есть бесплатные инструменты: Яндекс Вебмастер показывает проблемы со скоростью и мобильной версией по своим данным, PageSpeed Insights даёт оценку и список причин. Смотрите оценку именно для мобильных — она всегда ниже, чем для компьютера.

Почему сайт медленный

Картинки. Самая частая причина: фотографии по 3–5 мегабайт, загруженные с камеры как есть, на странице с двадцатью такими фото. Решение — сжатие и современные форматы (WebP), размер под реальную ширину показа, отложенная загрузка того, что ниже первого экрана. Это одно даёт больше, чем всё остальное вместе.

Скрипты. Десять счётчиков, три виджета чата, слайдер, анимации, шрифты с внешних серверов. Каждый внешний скрипт — отдельное соединение и ожидание чужого сервера. Оставьте то, что реально используется, и загружайте после того, как страница показана.

Хостинг. Дешёвый общий хостинг, где на одном сервере сотни сайтов, и сервер за рубежом, до которого запрос идёт полсекунды. Для российской аудитории сервер должен стоять в России — это и скорость, и требование закона.

Платформа. Конструкторы и перегруженные CMS с десятками плагинов генерируют тяжёлые страницы. Сайт услуг на 20 страниц не должен весить как интернет-магазин.

Отсутствие кэширования и сжатия. Сервер каждый раз собирает страницу заново и отдаёт несжатой. Настраивается один раз, ускоряет в разы.

Что значит «мобильная версия» сегодня

Отдельный мобильный сайт на поддомене — прошлое. Сейчас норма — адаптивная вёрстка: одна страница, которая перестраивается под ширину экрана. Но адаптивность — не только «влезло в экран». Проверьте:

• текст читается без увеличения, кнопки нажимаются пальцем, ссылки не слипаются;
• меню открывается и закрывается, телефон в шапке нажимается и звонит;
• формы заполняются: правильная клавиатура для телефона и почты, поля не прыгают;
• таблицы и широкие блоки прокручиваются, а не вылезают за экран;
• всплывающие окна закрываются и не перекрывают содержимое;
• нет горизонтальной прокрутки страницы — типичный признак сломанной вёрстки.

Проверять нужно на реальных телефонах, включая недорогие Android: на них видно всё, что скрывает быстрый ноутбук разработчика.

Что это даёт в цифрах

Ускорение загрузки с 6 до 2 секунд на практике снижает долю ушедших с первого экрана на десятки процентов, а количество заявок растёт без изменения рекламного бюджета. Поисковики поднимают быстрые страницы выше медленных при прочих равных. И наоборот: рекламный трафик на медленный сайт — деньги, которые сгорают до того, как посетитель увидел предложение.

С чего начать

1. Сжать картинки и перевести в WebP — самый быстрый результат.
2. Убрать неиспользуемые скрипты и виджеты, перенести шрифты и библиотеки на свой сервер.
3. Включить кэширование и сжатие на сервере.
4. Переехать на нормальный хостинг в России, если сайт на общем зарубежном.
5. Пройти по списку мобильных проверок выше и исправить найденное.

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