Фоновое видео на лендинге: когда оно уместно и как не убить скорость
Бюджет веса страницы, 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 оставьте лёгким.