design

Фоновое видео на лендинге: когда оно уместно и как не убить скорость

Фоновое видео на лендинге: когда оно уместно и как не убить скорость

Видеофон в hero продаёт «премиум», но часто добавляет 3–8 МБ к первой загрузке. Поиск и пользователи на LTE голосуют за статику, если ролик не несёт смысла.

---

## Когда видеофон оправдан

Продукт демонстрируется только в движении: производство, мероприятие, fashion, интерьер.

Есть короткий loop до 10–15 с, без звука, сжатый WebM/MP4 и качественный poster на первый кадр.

---

## Технические правила

Не autoplay со звуком; muted, playsinline, preload="metadata" или lazy после LCP-изображения.

На ширине <768px подменяйте на статичное изображение — тот же кадр, что poster.

Уважайте prefers-reduced-motion: останавливайте видео, показывайте poster.

Следите за LCP: если LCP — это video, часто проигрываете Core Web Vitals.

---

## Альтернатива

Короткий ролик в модальном окне по клику «Смотреть» — тот же эффект презентации, меньший штраф по весу.

В блоге и кейсах — встроенный плеер ниже первого экрана, а hero оставьте лёгким.

beforetoggle: хук жизненного цикла popover

Аналитика до открытия панели.

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.