Типы сайтов: визитка, корпоративный, лендинг, промо
Выбор типа сайта — не маркетинговое решение. Это техническое решение, которое определяет стек, архитектуру и стоимость поддержки. Лендинг на Next.js со статической генерацией и корпоративный сайт с CMS — принципиально разные инфраструктуры, даже если внешне похожи.
Сайт-визитка
Самый компактный формат: 1–5 страниц, минимум динамики, основная задача — дать контактную информацию и создать первое впечатление.
Технически здесь нет сложности. Но есть типичные ошибки в реализации:
Слишком тяжёлый стек. WordPress с 15 плагинами для сайта-визитки — это 800ms TTFB на shared хостинге. Для 5 страниц достаточно статики: HTML/CSS/JS или Next.js с output: 'export', задеплоенное на Vercel или Cloudflare Pages. Никакого PHP, никакой базы данных — только CDN. TTFB < 50ms гарантированно.
Нет контактной формы с backend-валидацией. Форма только с JS-валидацией на фронтенде — это не форма, это декорация. Бэкенд должен валидировать, rate-limit и отправлять уведомление. Для статического сайта — Formspree, Netlify Forms или простой serverless endpoint.
Отсутствие Schema.org разметки. LocalBusiness или Organization с адресом, телефоном, часами работы — это то, что попадает в Google Knowledge Panel. Для визитки это критично.
Срок разработки: 2–3 недели с дизайном.
Корпоративный сайт
Корпоративный сайт — это уже CMS, несколько разделов, мультиязычность в ряде случаев, интеграция с CRM и/или маркетинговыми инструментами.
Ключевой вопрос — кто будет редактировать контент и как часто. Ответ определяет выбор CMS.
Если редакторы работают регулярно и нетехнические — нужен удобный visual editor. WordPress с Gutenberg или ACF Pro закрывает это хорошо. Для более сложных структур данных (несколько типов публикаций, связи между сущностями) — Strapi или Directus как headless CMS с фронтендом на Next.js.
Если сайт обновляется редко и команда техническая — можно обойтись Markdown-файлами в Git с Astro или Next.js на фронтенде. Деплой по push в main, никакой CMS вообще.
Производительность на корпоративном сайте часто игнорируется — и зря. Страница «О компании» с 40 фотографиями сотрудников в оригинальном разрешении: LCP 12 секунд на мобильном — реальная ситуация. <Image> компонент Next.js с автоматической генерацией WebP и srcset решает это без ручной работы.
Мультиязычность: Astrotomic Translatable на Laravel или next-intl / react-i18next на фронтенде. Структура URL — /ru/about, /en/about с правильными hreflang в <head>.
Срок: 6–12 недель в зависимости от объёма разделов и интеграций.
Лендинг
Лендинг — страница с одной целью: конверсия. Всё, что не ведёт к целевому действию, лишнее.
Технически лендинг — самый интересный случай с точки зрения производительности. Core Web Vitals здесь критичны, потому что лендинги часто получают платный трафик, а Google использует CWV как фактор в Quality Score для Google Ads.
Конкретная история: лендинг с hero-видео 8MB autoplay в формате MP4 без preload="none" + три сторонних скрипта аналитики, загружаемых синхронно в <head>. LCP 9.4s, INP 780ms. После оптимизации: видео заменено на poster image с отложенной загрузкой видео по scroll, скрипты переведены на async/defer и частично в Web Workers через Partytown. LCP 1.8s, INP 140ms. Конверсия выросла на 23% — не из-за редизайна, только из-за скорости.
A/B тестирование на лендингах — стандартная практика. Google Optimize закрылся, но есть Growthbook (open source), PostHog, VWO. Для Next.js — edge middleware с распределением трафика на уровне CDN без лишнего JS.
Срок: 2–4 недели.
Промо-сайт
Промо — временный или постоянный сайт под конкретную кампанию, продукт, мероприятие. Здесь обычно нестандартный дизайн, анимации, интерактивность.
Технический стек промо-сайта часто включает:
- GSAP или Framer Motion для сложных анимаций
- Three.js или React Three Fiber для 3D-элементов
- Lottie для векторных анимаций из After Effects
- Canvas API для кастомных интерактивных эффектов
Главная ловушка промо-сайтов — анимации, которые жестят на мобильных устройствах. GPU-анимации через transform и opacity — это нормально. box-shadow в анимации, filter: blur() на каждом кадре, анимация width/height — это причина 20fps на iPhone 12 и ниже. will-change: transform помогает, но только точечно, не на 50 элементах одновременно.
prefers-reduced-motion — медиа-запрос, который обязателен если на сайте есть серьёзные анимации. Пользователи с вестибулярными нарушениями устанавливают этот флаг в системе, и браузер передаёт его в CSS/JS. Игнорировать — и accessibility, и UX.
Срок: 3–6 недель, сильно зависит от сложности анимаций и уникальности дизайна.
Сравнительная таблица
| Параметр | Визитка | Корпоративный | Лендинг | Промо |
|---|---|---|---|---|
| Страниц | 1–5 | 10–50+ | 1–3 | 1–10 |
| CMS | Не нужна | Нужна | Не нужна | Редко |
| SEO-приоритет | Средний | Высокий | Высокий | Низкий |
| Анимации | Минимум | Умеренно | Умеренно | Интенсивно |
| Срок (с дизайном) | 2–3 нед | 6–12 нед | 2–4 нед | 3–6 нед |
Стоимость в каждом случае рассчитывается индивидуально после изучения технического задания.