Видео на сайте: как добавить и не замедлить загрузку
Видео на сайте может убедить быстрее любого текста — а может сделать страницу тяжёлой и медленной. Разбираю, какое видео нужно сайту компании, как его добавить и как сделать так, чтобы ролик не замедлял загрузку.
- Видео полезно, когда показывает то, что трудно описать: производство, объект, процесс, человека.
- Длинные ролики — через видеохостинг, короткие беззвучные — сжатым файлом на своём хостинге.
- Видео грузится по нажатию или при прокрутке, до этого — лёгкая картинка-обложка.
- Видеофон на первом экране почти всегда замедляет сайт сильнее, чем помогает.
Какое видео нужно сайту
Видео оправдано, когда показывает то, что словами и фото передать долго: как работает производство, как выглядит объект, как проходит процедура или занятие, кто стоит за компанией. Короткий честный ролик с реальной площадки убеждает сильнее рекламного монтажа со стоковыми кадрами.
- Обзор производства или офиса — снимает страх «а есть ли компания на самом деле».
- Процесс работы — как делают, монтируют, доставляют.
- Видеоотзыв клиента — живой человек вызывает больше доверия, чем текст.
- Обращение руководителя или эксперта — для услуг, где покупают человека.
- Демонстрация продукта — как пользоваться, что внутри.
Как добавить видео: 2 способа
- Подходит для длинных роликов со звуком
- Хостинг сам подстраивает качество под интернет
- Не занимает место на вашем сервере
- Плеер и рекомендации чужие
- Подходит для коротких роликов до 20–30 секунд
- Полный контроль над видом плеера
- Нет чужой рекламы и рекомендаций
- Ролик нужно сжать самому
Зарубежные видеохостинги в России сейчас открываются нестабильно, поэтому для сайта, который смотрят российские клиенты, надёжнее российский видеохостинг или свой файл.
Как не замедлить сайт
- Обложка вместо видео при загрузке. Сначала показывается лёгкая картинка с кнопкой «Смотреть», ролик загружается только по нажатию.
- Ленивая загрузка. Видео ниже первого экрана начинает грузиться, только когда посетитель до него долистал.
- Сжатие. Короткий фоновый ролик укладывается в несколько мегабайт: формат MP4, без звуковой дорожки, ширина не больше нужной.
- Без автозапуска со звуком — браузеры его блокируют, а посетителей он раздражает.
Подробнее о том, что тормозит сайт, — в статье «Скорость загрузки сайта».
Где разместить видео на странице
Рядом с тем сомнением, которое оно снимает. Ролик о производстве — в блоке «О компании» или рядом с гарантиями, видеоотзыв — среди текстовых отзывов, демонстрация — рядом с описанием продукта. На первом экране видео уместно, только если без него продукт непонятен; в остальных случаях первый экран — заголовок, фото и кнопка. Как собрать первый экран и остальные блоки — в статье «Структура продающего лендинга».
Частые вопросы
Как вставить видео на сайт?
Два способа: загрузить ролик на видеохостинг (VK Видео, Rutube) и вставить код плеера на страницу или положить сжатый файл MP4 на свой хостинг и показать его встроенным плеером браузера. В Тильде для этого есть готовые блоки.
Какой размер видео для сайта?
Для фона или короткого ролика без звука — до нескольких мегабайт: 10–20 секунд, ширина 1280–1920 пикселей, сжатие в MP4. Длинные ролики со звуком лучше размещать на видеохостинге.
Замедляет ли видео сайт?
Да, если ролик грузится сразу при открытии страницы. Чтобы не тормозило, видео загружают только когда посетитель долистал до него или нажал «Смотреть», а до этого показывают картинку-обложку.
Нужно ли видео на фоне первого экрана?
Обычно нет: оно тяжёлое, отвлекает от заголовка и часто не воспроизводится на телефонах в режиме экономии. Сильнее работает одна качественная фотография и короткий ролик ниже, по кнопке.
