Видео на сайте: когда помогает и как не убить скорость

Видео работает там, где текст объясняет плохо. Это три типичные ситуации, и во всех трёх эффект заметен.

Первая это сложный продукт или услуга, которую трудно представить. Программное обеспечение, оборудование, монтажные работы, обучение. Тридцать секунд показа объясняют больше, чем страница текста.

Вторая это доверие к человеку. Короткое видео, где владелец или мастер говорит сам, работает в нишах, где клиент фактически выбирает человека: юрист, врач, тренер, фотограф, ремонтная бригада.

Третья это отзывы. Видеоотзыв клиента убеждает несравнимо сильнее текстовой цитаты, потому что подделать его гораздо сложнее и все это понимают.

И есть обратная сторона. Видео не помогает там, где посетитель пришёл за конкретным фактом: цена, адрес, наличие, срок. Заставлять его смотреть ролик вместо того, чтобы написать цифру, это способ потерять клиента.

Практический ориентир по длине: до девяноста секунд для обзорного ролика на главной и до трёх минут для объяснения продукта. Досматриваемость после этих отметок падает резко.

Автовоспроизводящийся ролик на фоне первого экрана выглядит дорого в презентации дизайна и плохо ведёт себя в реальности.

Он весит. Даже сжатое пятнадцатисекундное видео это один-три мегабайта, которые грузятся ровно в тот момент, когда браузер должен показать первый экран. LCP страдает напрямую.

Он ест трафик. На мобильном интернете это чужие деньги, и часть посетителей это замечает.

Он мешает читать. Текст поверх движущегося видео читается хуже, а это именно тот текст, который должен объяснить, чем вы занимаетесь.

И он почти никогда не воспроизводится так, как задумано на телефоне. Мобильные браузеры имеют собственные правила автозапуска, и на части устройств посетитель увидит просто чёрный прямоугольник или статичный кадр.

Если видео-фон всё же нужен, минимальные условия такие: без звука, до десяти секунд, сжатый файл до одного мегабайта, обязательный poster-кадр, отключение на мобильных и уважение к системной настройке уменьшения движения.

Более разумная альтернатива в большинстве случаев это качественная статичная фотография в шапке и ролик ниже по странице, где его посмотрит тот, кому это действительно интересно.

YouTube это вариант по умолчанию, и для большинства сайтов он правильный. Бесплатно, адаптивное качество, работает везде, плюс сам ролик может приносить трафик из поиска YouTube.

Минусы тоже понятны: брендирование площадки, рекомендации чужих видео после просмотра и заметный вес встраиваемого плеера.

Vimeo это платный вариант для тех, кому важен чистый плеер без рекомендаций и без логотипа. Разумно для презентационных сайтов, студий и премиального сегмента.

Свой хостинг видео оправдан редко. Файл на вашем сервере грузится с одного места, без адаптивного качества, и на медленном соединении посетитель будет ждать. Исключение это очень короткие фоновые ролики без звука.

Отдельно про приватность: стандартное встраивание YouTube ставит куки до того, как посетитель что-либо нажал. Для GDPR это означает, что плеер должен появляться только после согласия на маркетинговые куки, либо нужно использовать режим без отслеживания.

И практическая деталь: если вы делаете ролик один раз, публикуйте его и на YouTube тоже, даже если встраиваете с Vimeo. Это отдельный поисковый канал и он ничего не стоит.

Стандартный код встраивания YouTube тянет несколько сотен килобайт скриптов ещё до того, как кто-то нажал воспроизведение. На странице с тремя роликами это уже мегабайты впустую.

Решение называется фасад. Вместо плеера вы показываете картинку превью с кнопкой воспроизведения, и настоящий плеер загружается только после клика. Это стандартная практика и она даёт самый заметный выигрыш из всех перечисленных.

• •Готовые компоненты для этого есть почти везде: lite-youtube-embed, встроенный facade в Next.js и аналогичные плагины для WordPress.
• •Задавайте контейнеру фиксированные пропорции через aspect-ratio. Без этого при загрузке плеера страница дёргается, и это прямой рост CLS.
• •Используйте loading lazy для ниже расположенных роликов, чтобы они не грузились до прокрутки.
• •Ставьте нормальный poster-кадр вместо автоматического, который часто оказывается размытым или неудачным.

Для собственных видеофайлов правила другие: preload none, чтобы браузер не тянул файл заранее, формат MP4 с кодеком H.264 как базовый и WebM как более лёгкая альтернатива, разрешение не выше того, в котором ролик реально показывается.

И проверьте результат в PageSpeed Insights до и после. Разница между стандартным встраиванием и фасадом на странице с двумя роликами обычно измеряется секундами, а не десятыми долями.

Поисковая система не смотрит видео. Всё, что она понимает про ролик, она берёт из окружающего текста и разметки, поэтому страница только с видео и подписью ранжируется плохо.

Добавляйте текстовую версию. Транскрипт или подробное описание под роликом даёт странице содержание, по которому её вообще можно найти.

Разметка VideoObject помогает попасть в видеорезультаты. В ней указываются название, описание, длительность, дата публикации и ссылка на превью.

Субтитры нужны не только для доступности. Значительная часть пользователей смотрит видео без звука, особенно с телефона и в общественных местах, и без субтитров они просто не досмотрят.

Учитывайте настройку уменьшения движения в системе пользователя. Если она включена, автовоспроизведение фоновых видео стоит отключать, и это одна строка в CSS.

И последнее по порядку, но не по важности: под роликом должен быть следующий шаг. Человек, который досмотрел видео до конца, это самый заинтересованный посетитель на всём сайте, и оставлять его без кнопки или формы прямо на этом месте это самая обидная потеря из всех возможных.