Разработка лендинга (Landing Page)
Лендинг — одностраничный сайт с единственным целевым действием. Всё на странице работает на это действие: форма заявки, подписка, покупка, регистрация. Нет навигации в другие разделы, нет отвлекающих ссылок, минимум выходов. Отличие от промо-сайта — в приоритете конверсии над вовлечением.
Структура работающего лендинга
Базовая последовательность блоков:
Hero (first screen) — оффер + CTA должны умещаться без скролла на 90% устройств аудитории. Заголовок отвечает на «что и для кого», подзаголовок — «как и почему это работает». Кнопка — первый CTA.
Доверие — сразу после hero. Логотипы клиентов, рейтинг на площадке (Clutch, G2, Яндекс), количество проектов/клиентов, медиаупоминания. Не в конце страницы, а сразу — пока внимание максимальное.
Проблема → Решение — конкретная боль целевой аудитории и механика её устранения.
Продукт/услуга в деталях — что конкретно получает клиент. Список, таблица сравнения, пошаговый процесс.
Результаты — цифры, кейсы, отзывы с фото и именами.
Повторный CTA — с другой формулировкой.
Финальный CTA + форма — минимальные поля, максимально низкий барьер входа.
Технический стек
Для лендинга важны скорость загрузки и простота обновления. Варианты:
Статический лендинг (Astro / plain HTML + Vite) — максимальная производительность, нет серверной части, деплой на Vercel/Netlify. Форма через Formspree или Netlify Forms.
---
// Нет импортов тяжёлых фреймворков — только необходимый JS
---
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название | Подзаголовок</title>
<meta name="description" content="...">
<link rel="preload" as="image" href="/hero.webp">
</head>
<body>
<main>
<!-- секции -->
</main>
</body>
</html>
Next.js — когда лендинг часть продуктовой экосистемы или нужен SSR для персонализации (UTM-параметры влияют на контент, A/B тест на сервере).
WordPress + плагин-конструктор (Elementor, Bricks) — быстрый старт, клиент редактирует сам. Но: медленнее статики, требует обновлений, производительность сложнее контролировать.
Производительность — ключевой фактор
Google Ads и Яндекс.Директ снижают стоимость клика для быстрых страниц. Core Web Vitals напрямую влияют на Quality Score. Цели:
- LCP < 1.5s (hero-изображение или текст)
- CLS < 0.05 (стабильная вёрстка, нет сдвигов при загрузке шрифтов)
- INP < 100ms
Чек-лист:
- Изображения: WebP/AVIF, явные
widthиheight,loading="lazy"для всего ниже fold - Шрифты:
font-display: swap, preload для основного начертания, системный стек как fallback - CSS: критический — inline в
<head>, остальное — defer - JS: минимум, всё async/defer, никаких render-blocking скриптов в
<head> - Сторонние скрипты (аналитика, пиксели): загружать после
loadсобытия
<!-- Пример оптимального подключения аналитики -->
<script>
window.addEventListener('load', function() {
// Загрузка GTM только после полной загрузки страницы
(function(w,d,s,l,i){/* GTM snippet */})(window,document,'script','dataLayer','GTM-XXXX');
});
</script>
Форма заявки
Форма — центральный элемент лендинга. Её оптимизация напрямую влияет на конверсию:
<form id="lead-form" novalidate>
<div class="field">
<label for="name">Имя</label>
<input
id="name" name="name" type="text"
autocomplete="name"
required minlength="2"
placeholder="Как вас зовут"
>
<span class="error" aria-live="polite"></span>
</div>
<div class="field">
<label for="phone">Телефон</label>
<input
id="phone" name="phone" type="tel"
autocomplete="tel"
required
placeholder="+375 (29) 000-00-00"
>
<span class="error" aria-live="polite"></span>
</div>
<!-- honeypot против ботов -->
<input name="website" type="text" style="display:none" tabindex="-1" autocomplete="off">
<button type="submit">Получить консультацию</button>
<p class="form-note">Перезвоним в течение 30 минут</p>
</form>
Валидация по blur, не по submit. Состояние loading кнопки при отправке. После успеха — либо inline-сообщение, либо переход на /thank-you (последнее удобнее для отслеживания конверсий в Google Ads).
UTM-параметры и персонализация
Лендинги под рекламные кампании часто меняют заголовок в зависимости от источника трафика:
const params = new URLSearchParams(window.location.search);
const utm_term = params.get('utm_term');
const headlines = {
'разработка сайта': 'Разработаем сайт за 2 недели с гарантией',
'лендинг': 'Лендинг с конверсией от 5% или вернём деньги',
};
const h1 = document.querySelector('h1');
if (utm_term && headlines[utm_term]) {
h1.textContent = headlines[utm_term];
}
Более надёжный вариант — Edge Middleware (Vercel) или серверный рендеринг с подстановкой контента до отправки HTML.
Отслеживание конверсий
Минимальный набор событий для корректной аналитики рекламной кампании:
// GA4
gtag('event', 'generate_lead', {
event_category: 'form',
form_id: 'lead-form',
source: new URLSearchParams(location.search).get('utm_source') ?? 'organic'
});
// Яндекс.Метрика
ym(COUNTER_ID, 'reachGoal', 'lead_form_submit');
// Facebook Pixel
fbq('track', 'Lead');
Типичные сроки
Лендинг с готовым дизайном — 3–5 рабочих дней. С разработкой дизайна и контента под конкретную кампанию — 7–10 дней. Лендинг с A/B версиями, динамическим контентом и полным tracking-стеком — 10–14 дней.