Статья
Видео на сайте: как вставить и не замедлить загрузку
Видео убеждает лучше фотографий: показывает процесс, людей, результат. Но это и самый тяжёлый элемент страницы — одно неудачно вставленное видео может замедлить сайт сильнее, чем все картинки вместе. Разбираем, где видео уместно, как его вставить и как сохранить скорость.
Где видео уместно
- Процесс и результат — ремонт, производство, процедура: то, что на фото выглядит неубедительно.
- Знакомство — врач, автор курса, руководитель за минуту-две рассказывают о себе. Живой человек вызывает больше доверия, чем текст.
- Отзывы клиентов — самый убедительный их формат; как собрать отзывы, разобрано в статье «Отзывы на сайте».
- Инструкции — как пользоваться товаром, как проехать.
- Атмосфера — ресторан, отель, студия: короткое беззвучное видео на фоне.
Видео «чтобы было» лучше не ставить: если ролик никто не досмотрит, он только замедлит страницу.
Два способа вставить видео
| Способ | Как работает | Когда подходит |
|---|---|---|
| Через видеосервис | Ролик загружают в VK Видео или на Rutube и вставляют на сайт их плеер | Длинные ролики со звуком: интервью, обзоры, инструкции |
| Своим файлом | Файл лежит на хостинге сайта и играет во встроенном плеере браузера | Короткие беззвучные ролики, фон первого экрана |
YouTube тоже позволяет вставить плеер на сайт, но в России он открывается не у всех и медленно. Для российских посетителей надёжнее VK Видео или Rutube.
Как вставить ролик с видеосервиса
- Загрузите ролик в VK Видео или на Rutube.
- В меню «Поделиться» у ролика найдите код для вставки на сайт.
- Вставьте код в HTML-блок на странице — в конструкторах и системах управления сайтом для этого есть специальный блок. Или передайте код разработчику.
- Попросите, чтобы плеер загружался только по нажатию: сначала на странице видна картинка-обложка с кнопкой воспроизведения, а сам плеер подгружается, когда человек на неё нажал. Так чужой плеер не замедляет загрузку страницы.
Видео на первом экране
Фоновое видео на первом экране выглядит эффектно, но требует аккуратности:
- Без звука и коротко — 10–20 секунд по кругу. Ролик со звуком браузеры обычно сами не запускают.
- Лёгкое — сотни килобайт или пара мегабайт, а не десятки.
- С обложкой. Пока видео грузится, видна картинка из первого кадра, и первый экран не пустой. В режиме энергосбережения iPhone может не запустить видео вовсе — тогда обложка остаётся главным изображением.
- Текст поверх читается на любом кадре — для этого видео затемняют.
- На телефоне — облегчённая версия ролика или просто картинка.
Как сделать видео лёгким
- Формат MP4 — его показывают все браузеры.
- Разрешение по задаче: для фона на компьютере хватает 1920 пикселей по ширине, для телефона — 720.
- Без звуковой дорожки у фонового видео — она только добавляет вес.
- Сжатие — в бесплатных программах вроде HandBrake: можно выбрать качество и сразу увидеть, сколько весит файл.
- Загрузка по мере надобности: ролик ниже по странице начинает грузиться, когда до него долистали.
Как проверить, что сайт не стал медленнее, разобрано в статье «Скорость загрузки сайта».
Частые ошибки
- Видео на 30–50 мегабайт на первом экране: с телефона сайт открывается долго.
- Автозапуск со звуком — браузеры его блокируют, а там, где он сработал, люди закрывают вкладку.
- Главное — только в видео. Поисковик ролик не посмотрит, а многие посетители его не включат. Дублируйте важное текстом: цены, сроки, адрес.
- Плеер YouTube для российской аудитории.
- Несколько роликов играют одновременно — страница тормозит и отвлекает.
Примеры
Видео на первом экране — в двух концептах студии: Vibrant Wellness — лендинг центра восстановления нервной системы с видео во весь первый экран, и SkyElite — лендинг брокера деловой авиации с видео бизнес-джета. Разбор обоих — в статье «Примеры лендингов с разбором».
Как это делаем мы
Анимации и 3D в лендинге мы используем там, где они работают на задачу, а вёрстку делаем на коде, чтобы страница быстро загружалась на телефоне и медленном интернете.