Видео на первом экране не тормозит сайт, если соблюдать 5 правил: вес ролика до 2-3 МБ, современный формат, постер, отдельная мобильная версия и смысл, привязанный к офферу. При таких условиях заголовок и кнопка появляются сразу, а видео догружается за ними.
Разбираем каждое правило с цифрами, перечисляем ошибки, из-за которых видео-шапка съедает посетителей из рекламы, и показываем, как это устроено на реальных проектах студии.
I. Когда видео на первом экране оправдано
Видео окупается там, где результат или атмосферу трудно передать фото: окрашивание волос с переливами цвета, мероприятия и шоу, одежда и обувь в движении, производство, интерьеры, туризм. Если вы продаёте бухгалтерские услуги или юридическую консультацию, видео с офисом и рукопожатиями обычно ничего не добавляет, кроме веса страницы.
- Уместно: салоны красоты, event-агентства, магазины одежды и обуви, рестораны, загородный отдых, производство на заказ.
- Спорно: строительство и ремонт - лучше короткие ролики процесса ниже, а не на фоне заголовка.
- Обычно лишнее: B2B-услуги без визуального продукта, где первым экраном продаёт точная формулировка оффера.
Перед решением полезно ответить на вопрос: что посетитель поймёт из видео за первые 3 секунды, чего не поймёт из фото? Если ответ конкретный - переливы цвета, масштаб площадки, товар в движении, - видео оправдано. Если ответ «будет атмосфернее», лучше сделать качественное фото и потратить бюджет на скорость и текст первого экрана.
II. Правило 1: вес и длительность
Фоновому ролику хватает 6-15 секунд в цикле без звука. Для десктопа разумный ориентир - 1280 или 1920 пикселей по ширине и вес до 2-3 МБ, для мобильной версии - 720 пикселей и до 1-1,5 МБ. Битрейт снижают до уровня, при котором картинка ещё выглядит чисто: у фонового видео под текстом и затемнением мелкие артефакты незаметны. Звуковую дорожку удаляют полностью - это сразу минус лишние килобайты.
| Параметр | Десктоп | Телефон |
|---|---|---|
| Разрешение | 1280-1920 px | 720 px, вертикальная или квадратная версия |
| Длительность | 6-15 секунд | 6-10 секунд |
| Вес | до 2-3 МБ | до 1-1,5 МБ |
| Звук | удалён | удалён |
| Формат | WebM или MP4 (H.264) | MP4 (H.264) как запасной |
| Постер | WebP до 150-200 КБ | WebP до 80-100 КБ |
Сжатие делают не на глаз, а сравнением: берут кадр с мелкими деталями и смотрят его на реальном экране телефона при нескольких значениях битрейта. Обычно находится точка, после которой уменьшение веса уже заметно портит картинку, - на ней и останавливаются. Отдельно проверяют первые и последние кадры цикла, чтобы стык при повторе не бросался в глаза.
III. Правила 2-3: формат и постер
Правило 2 - формат и атрибуты. Отдают два источника: современный формат с лучшим сжатием и MP4 в H.264 для совместимости. Для автозапуска браузеры требуют режим без звука и воспроизведение внутри страницы, иначе на телефоне ролик не стартует или раскрывается на весь экран. Загрузку видео запускают после отрисовки заголовка и кнопки, а не в самом начале.
Правило 3 - постер. Первый кадр в виде лёгкого изображения появляется мгновенно и держит экран, пока видео грузится. Это главный элемент, по которому браузер и поисковики оценивают скорость отрисовки первого экрана. Постер должен совпадать с первым кадром ролика, иначе при старте видео будет заметный скачок.
Ориентир по скорости: заголовок и кнопка первого экрана на мобильном интернете должны появиться в пределах 2,5 секунды. Если видео мешает уложиться в этот порог, первым делом проверьте, не грузится ли оно раньше постера и текста.
IV. Правило 4: мобильная версия
Горизонтальный ролик на вертикальном экране телефона обрезается до узкой полосы, и из кадра пропадает главное. Для телефона готовят отдельную вертикальную или квадратную версию, где объект стоит по центру. Браузеру отдают нужный файл по ширине экрана, чтобы телефон не скачивал тяжёлую десктопную версию.
Учитывают и режим экономии трафика: при нём браузер может не запустить автовоспроизведение, поэтому экран обязан выглядеть законченным на одном постере. Для пользователей с системной настройкой «уменьшить движение» ролик лучше не запускать совсем.
Ещё один нюанс мобильной версии - батарея и трафик посетителя. Бесконечно повторяющийся ролик на телефоне расходует и то, и другое, поэтому часто видео останавливают, когда первый экран уходит из зоны видимости, и снова запускают при возврате. Посетитель этого не замечает, а страница ведёт себя легче при долгом чтении.
V. Правило 5: ролик работает на оффер
Видео - фон для предложения, а не замена ему. Заголовок должен читаться поверх любого кадра: для этого используют затемнение или градиентную подложку и избегают роликов с резкими вспышками света. Сюжет подтверждает то, что написано: если заголовок про корпоративные мероприятия под ключ, в кадре живое событие, а не абстрактные огни города.
В проекте для event-агентства НАВСЕГДА первый экран передаёт атмосферу мероприятий, а ниже идут услуги, кейсы, этапы работы и расчёт стоимости - видео создаёт эмоцию, текст и кнопки ведут к заявке. На сайте ayvazzovsky.com салона сложного окрашивания видео работ мастеров показывает цвет волос в движении, чего не передаёт фото.
VI. Ошибки и проверка скорости
- Исходник с камеры на сайте. Ролики по 20-50 МБ встречаются чаще, чем кажется, и первый экран на телефоне остаётся пустым.
- Видео через сторонний плеер. Встроенный видеохостинг тянет свои скрипты, логотипы и рекламу - для фона это неприемлемо.
- Нет постера. Пока ролик грузится, посетитель видит чёрный прямоугольник.
- Звук при автозапуске. Браузеры его блокируют, а если сработает - раздражает.
- Нечитаемый текст. Белый заголовок на светлом кадре исчезает на половине цикла.
Проверяйте скорость не на офисном Wi-Fi, а на телефоне через мобильный интернет и в инструментах замера скорости в режиме мобильного устройства. На мощном компьютере тяжёлое видео почти не заметно, а посетители из рекламы в соцсетях приходят именно с телефонов.
Для проверки достаточно трёх замеров: время появления заголовка на мобильном интернете, вес всех файлов первого экрана и поведение страницы при медленном соединении в инструментах разработчика браузера. Если постер и текст видны раньше, чем стартует видео, а общий вес первого экрана не выходит за несколько мегабайт, видео-hero настроен правильно.
VII. Примеры и стоимость
На конструкторах фоновое видео обычно ставится загрузкой файла или ссылкой на видеохостинг, без отдельной мобильной версии и управления порядком загрузки - отсюда медленные первые экраны. В самописном сайте всё это настраивается под задачу. В студии это часть услуги разработка сайтов и SEO: сайт на React от 80 000 ₽, 1-2 недели от получения материалов, включая подготовку видео под веб. Перенос сайта с конструктора - от 80 000 ₽. Съёмку ролика обычно заказывают отдельно у видеографа, стоимость сильно зависит от задачи.
Видео не гарантирует роста заявок и позиций: оно усиливает первое впечатление у тех, кто уже пришёл. Трафик дают реклама и SEO через массив статей - от 500 ₽ за статью, 200 статей в месяц за 100 000 ₽. Чтобы понять, стало ли больше нормальных обращений после смены первого экрана, сверяйте не только число заявок, но и валидную заявку как единицу учёта.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.
Видео в шапке, а сайт грузится вечность?
Сделаем первый экран с видео, который появляется сразу и не теряет посетителей с телефонов.
Частые вопросы
Какой вес видео допустим для первого экрана?
Ориентир - до 2-3 МБ для десктопа и до 1-1,5 МБ для телефона при длительности 6-15 секунд без звука. Плюс лёгкий постер до 200 КБ, который появляется мгновенно.
Влияет ли фоновое видео на SEO?
Косвенно, через скорость. Если видео грузится раньше текста и постера, первый экран отрисовывается медленнее, а это учитывается в оценке страницы. При правильной загрузке влияние минимально, но рост позиций видео само по себе не даёт.
Нужна ли отдельная версия видео для телефона?
Да. Горизонтальный ролик на вертикальном экране обрезается, а тяжёлый файл долго грузится по мобильному интернету. Вертикальная версия на 720 пикселей решает обе проблемы.
Можно ли вставить видео с видеохостинга?
Для обычного ролика в тексте - да, для фона первого экрана - нежелательно: плеер тянет свои скрипты, интерфейс и логотипы, и первый экран грузится дольше.
Сколько стоит сайт с видео на первом экране?
В студии N3MIROFF самописный сайт на React с оптимизированным видео-hero стоит от 80 000 ₽ и делается за 1-2 недели от материалов. Съёмка ролика обычно оплачивается отдельно.
Проверим первый экран вашего сайта
Оставьте заявку - замерим скорость, посмотрим видео и подскажем, что изменить по 5 правилам.
Получить целевые заявки → Telegram