Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

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

Бюджет веса страницы, poster, отключение на мобиле и prefers-reduced-motion — практика без модных тяжёлых hero.

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

Видеофон в 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 оставьте лёгким.

#производительность#лендинг#видео

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