Медленная загрузка — проблема, которую владельцы сайтов замечают последней. Сами они открывают свою страницу на мощном компьютере с быстрым интернетом, браузер давно закэшировал все файлы, и сайт появляется мгновенно. Но посетитель из рекламы открывает его впервые, часто со смартфона и через мобильную сеть. Для него страница может грузиться пять, семь, десять секунд.
За это время значительная часть людей просто уходит. Вы платите за их клики, но они так и не видят ваше предложение. В этой статье разберём, почему лендинги тормозят и как это исправить.
Как скорость влияет на конверсию
Многочисленные исследования крупных компаний показывают одну и ту же закономерность: с каждой дополнительной секундой загрузки растёт доля посетителей, которые уходят, не дождавшись. Особенно резко отток растёт после трёх секунд ожидания на мобильных устройствах.
Но дело не только в отказах. Медленный сайт создаёт ощущение ненадёжности. Если страница тормозит, подсознательно возникает мысль: и компания, наверное, работает так же. Даже дождавшиеся загрузки посетители конвертируются хуже.
И наконец, скорость влияет на стоимость рекламы и позиции в поиске. Рекламные системы и поисковики учитывают качество страницы, и скорость — один из ключевых факторов.
Каждая лишняя секунда загрузки — это часть рекламного бюджета, потраченная на людей, которые так и не увидели вашего предложения.
Что замедляет лендинг
Тяжёлые изображения
Самая частая причина. Дизайнер передаёт фотографии в высоком разрешении, верстальщик вставляет их на страницу без обработки. Одна картинка на первом экране может весить несколько мегабайт — больше, чем весь остальной сайт.
Фоновое видео
Видео на первом экране выглядит эффектно, но весит много и на мобильных устройствах часто не воспроизводится автоматически. Посетитель видит пустой экран, пока видео загружается.
Шрифты
Каждое начертание шрифта — отдельный файл. Если на странице используется пять начертаний трёх разных шрифтов, браузеру нужно скачать пятнадцать файлов, прежде чем текст отобразится корректно.
Сторонние скрипты
Счётчики аналитики, онлайн-чаты, виджеты обратного звонка, пиксели рекламных систем, кнопки соцсетей. Каждый такой скрипт — дополнительный запрос к стороннему серверу. Если сервер отвечает медленно, вся страница ждёт.
Конструкторы
Страницы на популярных конструкторах часто загружают много лишнего кода — функции, которые не используются на конкретном сайте, но входят в стандартную сборку платформы.
Медленный хостинг
Дешёвый хостинг с перегруженными серверами может добавить секунду-две к времени загрузки, даже если сам сайт оптимизирован.
Как ускорить лендинг
Сжатие изображений
Все изображения нужно сжимать без заметной потери качества и сохранять в современных форматах. Для мобильных устройств отдавать уменьшенные версии. Это само по себе может сократить вес страницы в несколько раз.
Ленивая загрузка
Изображения, которые находятся ниже первого экрана, не нужно загружать сразу. Они подгружаются по мере прокрутки. Первый экран появляется быстрее, а остальное догружается незаметно для посетителя.
Векторная графика
Иконки, логотипы и простые иллюстрации лучше делать в векторном формате. Они весят мало, остаются чёткими на любом экране и легко анимируются.
Оптимизация шрифтов
Используйте не больше двух шрифтов и только нужные начертания. Подключайте только нужные наборы символов. Настройте отображение так, чтобы текст появлялся сразу системным шрифтом и заменялся фирменным после загрузки.
Отложенные скрипты
Всё, что не нужно для отображения первого экрана, загружается после основного контента. Онлайн-чат может появиться через несколько секунд — посетитель этого даже не заметит.
Ручная вёрстка
Страница, свёрстанная вручную под конкретный дизайн, содержит только нужный код. Это одна из причин, по которой мы не используем конструкторы для коммерческих лендингов.
Хороший хостинг и кэширование
Надёжный хостинг с серверами в нужном регионе, включённое сжатие и кэширование статических файлов — базовые вещи, которые дают заметный прирост скорости.
Как измерить скорость
Есть несколько бесплатных инструментов проверки скорости, которые дают оценку отдельно для мобильной и десктопной версий и подробный список рекомендаций. Обращайте внимание не на итоговый балл, а на конкретные метрики: время до появления основного контента, время до возможности взаимодействия, стабильность вёрстки при загрузке.
Важно проверять страницу в условиях, близких к реальным. Режим разработчика в браузере позволяет имитировать медленную мобильную сеть. Попробуйте открыть свой лендинг так — результат может удивить.
Баланс между красотой и скоростью
Частый вопрос: значит ли это, что нужно отказаться от красивого дизайна? Нет. Хорошая оптимизация позволяет сохранить и эффектные иллюстрации, и анимацию, и качественные фотографии. Нужно лишь правильно их подготовить и загружать в нужный момент.
В наших проектах мы используем много авторской графики, но большая её часть делается в векторе и весит в десятки раз меньше растровых изображений. Анимация реализуется средствами браузера, а не тяжёлыми библиотеками. Фотографии сжимаются и подгружаются по мере прокрутки.
Чек-лист для проверки вашего лендинга
Откройте страницу на смартфоне через мобильный интернет в режиме инкогнито. Засеките, через сколько секунд появляется заголовок и кнопка. Проверьте в сервисе оценки скорости мобильную версию. Посмотрите, сколько весят изображения на первом экране. Посчитайте, сколько сторонних виджетов подключено и все ли они действительно нужны. Сравните в аналитике показатель отказов на мобильных устройствах и на компьютерах.
Если первый экран появляется дольше чем через три секунды или отказы на мобильных значительно выше, чем на десктопе, скорость почти наверняка стоит улучшить.
Скорость после запуска
Скорость сайта со временем ухудшается. Появляются новые фотографии, загруженные без сжатия, подключаются дополнительные виджеты и счётчики, обновляются сторонние скрипты. Через полгода лендинг, который при запуске загружался за полторы секунды, может открываться за пять.
Поэтому полезно проверять скорость регулярно, хотя бы раз в месяц, и перед каждым крупным запуском рекламы. Если вы сами добавляете контент на сайт, договоритесь о простом правиле: каждое изображение перед загрузкой проходит через сервис сжатия. А каждый новый виджет подключается только после того, как вы убедились, что он действительно нужен.
Вместо заключения
Скорость загрузки — невидимый, но очень важный фактор конверсии. Она влияет на количество посетителей, которые увидят ваше предложение, на доверие к компании и на стоимость рекламы.
Хорошая новость в том, что большинство проблем со скоростью решаются относительно просто: сжатием изображений, отказом от лишних скриптов, правильной загрузкой ресурсов. Если хотите узнать, насколько быстро работает ваш лендинг и что можно улучшить, пришлите нам ссылку — проведём бесплатную проверку.