Главная задача landing page — презентовать товар и привлечь пользователей к целевому действию. Лендинги создаются для быстрой конвертации рекламного трафика в лиды, поэтому любая ошибка в дизайне, верстке или коде страницы напрямую отражается на показателе отказов и ROI кампании. Расскажем, как исправить наиболее популярные ошибки в лендингах, которые мешают лидогенерации и продажам.
«Как делают лендинги в Flottgroup»1. Загрузка дольше 3 секунд

Пример плохого сайта: анимация загрузки, которую видно дольше нескольких секунд. Это первая причина, которая уведет целевой трафик
Лендинг нужен для приема трафика и долгая загрузка страницы оттолкнет большинство пользователей еще до первого контакта с сайтом. Чаще всего медленная загрузка возникает из-за перегрузки кода страницы программными скриптами, видео и изображениями.
Чтобы исправить проблему:
-
Конвертируйте все изображения в формат JPEG и сожмите через онлайн-конвертер. В лендингах изображения занимают большую часть HTML-кода — сжатие картинок может снизить вес страницы, что ускорит загрузку.
-
Оптимизируйте исходный код — удалите лишние строки в HTML-документе, поправьте стили CSS и сократите количество JavaScript. Обязательно проверьте валидность кода, особенно если лендинг самописный или разработан на шаблоне — ошибки также замедляют загрузку.
-
Загрузите видео на отдельный видеохостинг и добавьте в лендинг только ссылку или трансляцию. Это снизит нагрузку на хостинг, где размещен лендинг и повысит скорость загрузки страницы.
Проверить скорость загрузки сайта можно через Google Pagespeed Insights или инструмент внутри Вебмастера Яндекс. Время полной загрузки не дошло превышать 3 секунды, а основная часть страницы — прорисовываться за 1–1.5 секунды.
2. Отсутствие логичной навигации и структуры страницы

Пример плохого сайта: первый экран без заголовка и дескриптора, нет элементов анимации. Не сразу ясно о чем сайт и чем занимается компания
Лендинг — часто одностраничный сайт, но это не значит, что здесь не нужна навигация. Для удобного просмотра даже одной страницы важна логичная последовательность блоков и проработанная навигация.
Что можно исправить:
-
Проверьте наличие заголовка или дескриптора. Это популярная проблема лендингов, собранных с помощью онлайн-конструктора. Важно, чтобы пользователь сразу понимал, куда его перевела входящая ссылка.
-
Проработайте несколько вариаций навигации. Весь конверсионный путь пользователей должен быть доступен через главное меню, а навигация в рамках страницы — перелинкована через якорные ссылки. Опционально можно подключить плагины CMS или настроить блочную навигацию в конструкторе лендинга.
-
Сделайте скроллинг сайта удобным. Для лендингов с 5 и более количеством блоков нужны полоса прокрутки и кнопка «Вверх». Дополнительно корзину, форму связи и онлайн-чат нужно разместить независимо от прокрутки экрана лендинга, чтобы пользователь в любой момент мог выполнить целевое действие.
Попробуйте самостоятельно пройти конверсионный маршрут лендинга — все узкие места, мешающие ознакомлению с товаром или оформлению покупки, нужно устранить. Обычно проблемы заключаются в несогласованности блоков лендинга или полном отсутствии внутренней навигации.
3. Некорректный call to action

Пример плохого сайта: много разрозненных CTA-элементов на 1 экране — это больше мешает, чем подводит к покупке.
Кнопки с призывом к действию — главные элементы дизайна landing page, которые конвертируют трафик в лиды. При составлении конверсионного маршрута важно правильно расположить CTA-кнопки на экранах лендинга и проработать заголовки-подводки с призывом к действию. Для этого есть ряд рекомендаций.
-
Соблюдайте стандарты UX-дизайна: кнопки должны быть заметными, при этом органично вписываться в общий дизайн. На первом экране лендинга должна быть кнопка для заказа в 1 клик.
-
Учитывайте интент пользователей. Офферы и призывы к покупке, формы связи должны располагаться на разных экранах лендинга. Предложите быструю покупку на 1 экране, добавьте телефон для справки или форму со сметой внутри блока о товаре и прикрепите форму заказа внизу лендинга.
-
Используйте только 1 CTA-кнопку на 1 блок. Несколько призывов на одном экране замыливают УТП и отвлекают внимание пользователей, а наличие 2 и более кнопок — уводят от целевого действия.
-
Всплывающие окна не должны выскакивать сразу после загрузки страницы — можно привязать Pop-up к конкретному действию посетителя, времени или положению прокрутки страницы. В настройках размещения всплывающего окна лучше выбрать боковое или угловое положение на странице, так как резкое появление Pop-up в центре окна отвлекает и раздражает посетителей.
Количество кнопок и форм связи в landing page должно быть ограничено и равномерно рассчитано по отношению к объему контента на странице. Сделайте так, чтобы пользователям целевое действие было доступно из любой части сайта, но не отвлекало от просмотра контента.
4. Отсутствие адаптивной вёрстки

Пример адаптивной верстки сайта: так не умеет большая часть бесплатных шаблонов и блоков в конструкторах лендингов
Обычно большая часть визитов пользователей приходит именно на мобильные устройства и проблемы с версткой при просмотре сайта со смартфонов отрезают львиную долю трафика.
Чтобы исправить проблему:
-
Проверьте структуру макета страницы. Для всех блоков макета в теге <style> указываются размеры блоков для экранов с разрешением 320px, 990px и 1400px.
-
Настройте CSS. Можно выровнять ширину изображений под размеры экранов пользователей, например, добавив в таблицу стилей img {max-width: 100%;}.
-
Подключите JavaScript. Расширить возможности стилей CSS можно через функции jQuery, тонко настроив отображение каждого блока в макете.
При адаптивной верстке вес файлов не меняется, что положительно отражается на загрузке страницы — корректируются только параметры блоков и контента. Пользователи получают быстрый и удобный сайт, а владелец лендинга — низкий процент отказов по визитам с мобильных устройств.
Нужен лендинг для бизнеса?
Команда Flottgroup разрабатывает адаптивные лендинги, готовые к приему платного трафика. Наши специалисты проводят полный анализ ниши и сбор семантики, создают сайты с учетом трендов UX/UI и при необходимости сразу запустят рекламу — поможем полностью настроить канал лидогенерации под ключ.