Типи сайтів: візитка, корпоративний, посадкова сторінка, промо
Вибір типу сайту — не маркетингове рішення. Це технічне рішення, яке визначає стек, архітектуру та вартість підтримки. Посадкова сторінка на 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 тиж |
Вартість у кожному випадку розраховується індивідуально після вивчення технічного завдання.