Видео на сайте: почему тяжёлые ролики тормозят страницу и как это исправить

Компания сняла хороший ролик о производстве. Три минуты, красивая картинка, дрон, интервью с директором. Файл на девятьсот мегабайт залили прямо на сайт и поставили на главную страницу с автозапуском.

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

История типовая. Видео на сайте — сильный инструмент, но обращаться с ним нужно иначе, чем с картинками. Разберём, почему тяжёлые ролики убивают страницу, как их правильно размещать и что делать, если видео уже есть и всё тормозит.

Почему видео тормозит сильнее, чем кажется

Разница между изображением и видео не количественная, а качественная.

Размер файла. Хорошая фотография после сжатия весит двести килобайт. Минута видео в приличном качестве — от двадцати до пятидесяти мегабайт. То есть один ролик равен сотне фотографий.

Непрерывная передача. Изображение загрузилось один раз и лежит в памяти браузера. Видео качается всё время, пока идёт воспроизведение, и занимает канал.

Нагрузка на сервер. Обычный хостинг не рассчитан на раздачу видео. Когда ролик смотрят одновременно двадцать человек, сервер занят только этим, и остальные страницы начинают открываться медленно — включая те, где никакого видео нет.

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

Мобильный интернет. Человек с телефона в дороге получает страницу, которая пытается скачать пятьдесят мегабайт. Он не дождётся.

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

Что происходит с обращениями

Связь между скоростью страницы и числом заявок прямая и хорошо заметная в статистике.

Человек, ждущий загрузки, уходит. Порог терпения на телефоне — около трёх секунд, дальше начинается отток, и он нарастает лавинообразно. Страница, открывающаяся десять секунд, теряет большую часть аудитории до того, как та увидит хоть что-то.

Дополнительный эффект: медленная главная тянет вниз весь сайт. Человек, который один раз столкнулся с зависанием, не идёт дальше по разделам.

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

Правильный способ размещать видео

Главное правило: не хранить видео на своём сайте. Есть исключения, но они редкие.

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

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

Загрузка проигрывателя по клику. Даже вставленный проигрыватель подгружает часть данных при открытии страницы. Правильное решение — показывать вместо него картинку-заставку с кнопкой, а сам проигрыватель подключать только после нажатия. Тогда те, кому видео не нужно, не платят за него скоростью.

Никакого автозапуска со звуком. Автоматически стартующее видео со звуком раздражает почти всех и часто приводит к немедленному закрытию вкладки.

Отключение видео на мобильных. Для фоновых роликов в шапке разумно вообще не показывать их на телефонах, заменяя статичным изображением.

Когда видео всё-таки стоит держать у себя

Есть ситуации, когда размещение на своём сервере оправдано.

Короткие беззвучные ролики-подложки. Три-пять секунд, зацикленные, сжатые до нескольких сотен килобайт. Это уже почти анимация, а не видео.

Закрытые материалы. Обучающие ролики в личном кабинете, инструкции для дилеров, материалы, которые не должны попасть на публичную площадку.

Требование к оформлению. Иногда нужен проигрыватель без логотипов и рекомендаций чужих роликов в конце.

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

Как сжать видео правильно

Основные ошибки при подготовке файла.

Слишком высокое разрешение. Ролик в четырёх тысячах точек по ширине на сайте не нужен: он показывается в блоке шириной восемьсот. Разумный максимум — тысяча девятьсот двадцать точек, а для большинства случаев хватает тысячи двухсот восьмидесяти.

Избыточный битрейт. Материал прямо с камеры имеет запас качества для монтажа. Для показа в интернете он избыточен в разы.

Старый кодек. Современные форматы сжимают вдвое эффективнее при том же качестве.

Звук без сжатия. Иногда половину веса файла занимает несжатая звуковая дорожка.

Лишняя длина. Трёхминутный ролик, где первые сорок секунд — заставка и панорамы, не досматривают. Полторы минуты по делу работают лучше и весят вдвое меньше.

Практический ориентир: минута видео для сайта должна укладываться в три-пять мегабайт при приемлемом качестве. Если получается двадцать — что-то настроено неверно.

Как это связано с продвижением 3 в 1

Видео влияет на все три канала обращений, и в двух из них — положительно, если сделано правильно.

Поиск. Скорость страницы — фактор, который напрямую влияет на то, как часто её показывают людям. Медленная страница проигрывает быстрой при прочих равных, а на мобильных это особенно заметно. При этом само по себе наличие видео полезно: страница с роликом дольше удерживает человека, и это работает в вашу пользу. Отдельно про нейропоиск: ролик его не интересует, но текстовое описание под видео — вполне. Поэтому под каждым видео должно быть краткое изложение содержания текстом. Это и людям удобно, и даёт материал, который можно процитировать в генеративном ответе.

Яндекс.Справочник. В карточке компании в Яндекс Картах и Яндекс Бизнесе можно размещать видео. Это заметно выделяет карточку среди соседних и повышает число переходов и звонков. Причём здесь никакой нагрузки на ваш сайт нет вообще — файл лежит у сервиса.

2ГИС. Аналогично: карточка с видеоматериалом смотрится живее. Учитывая, что аудитория приложения принимает решение быстро, короткий ролик о компании работает лучше, чем длинный текст.

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

Диагностика: как понять, что тормозит именно видео

Если страница медленная, а причина неочевидна, порядок проверки такой.

Сравните страницы с видео и без. Если разница в скорости в разы — причина найдена.

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

Проверьте автозапуск. Если ролик стартует сам, он качается всегда, даже когда его не смотрят.

Проверьте мобильную версию отдельно. Часто на компьютере всё нормально, а на телефоне катастрофа.

Посмотрите нагрузку на хостинге. В панели управления видно расход трафика. Резкий рост после публикации ролика говорит сам за себя.

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

Что делать, если тяжёлые ролики уже стоят

Порядок исправления по шагам.

1. Найти все страницы с видеофайлами. Обычно их меньше, чем кажется, — три-пять на весь сайт.
2. Перезалить ролики на российскую видеоплощадку.
3. Заменить прямые файлы на проигрыватели с подгрузкой по клику.
4. Убрать автозапуск везде, где он есть.
5. Заменить фоновое видео в шапке на статичное изображение или на короткий сжатый ролик без звука, отключённый на мобильных.
6. Удалить старые файлы с сервера — они продолжают занимать место и иногда раздаются по прямым ссылкам.
7. Добавить под каждым видео текстовое описание.
8. Замерить скорость до и после и сравнить число обращений за сопоставимые периоды.

Работа занимает несколько часов, а эффект обычно виден в статистике в течение первой же недели.

Какие ролики стоит снимать

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

Обзор производства или офиса. Полторы минуты, без музыки поверх, с живым звуком. Снимает вопрос «а вы вообще существуете» полностью.

Процесс работы. Как делается то, за что клиент платит. Это самый убедительный формат: человек видит объём труда и перестаёт считать цену завышенной.

Ответ на частый вопрос. Специалист на камеру объясняет одну конкретную вещь за минуту. Такие ролики удобно ставить прямо на страницы услуг рядом с соответствующим текстом.

Отзыв клиента. Даже снятый на телефон, он убедительнее любого текста. Просить нужно сразу после сдачи работы, пока человек доволен.

Разбор выполненного объекта. Что было, что сделали, с какими сложностями столкнулись.

Инструкция по эксплуатации. Для тех, кто уже купил. Снижает нагрузку на поддержку и повышает лояльность.

Короткие ролики до тридцати секунд. Один приём, один факт, одна деталь. Хорошо расходятся на площадках и удобны для карточек на картах.

Общее правило: лучше десять коротких роликов по конкретным поводам, чем один трёхминутный фильм обо всём сразу. Короткие досматривают, длинные — нет.

Частые ошибки

Автозапуск со звуком. Раздражает и гарантированно теряет часть аудитории.

Видео без описания. Ни поисковые системы, ни человек с выключенным звуком не понимают, о чём ролик.

Слишком длинные ролики. Для сайта редко нужно больше двух минут.

Один ролик на все случаи. Обзорное видео о компании не заменяет короткие ролики по конкретным услугам.

Отсутствие заставки. Чёрный прямоугольник вместо кадра-обложки снижает число просмотров в разы.

Ролик, который открывается новым окном. Человек уходит с сайта и часто не возвращается.

Хранение архива на сайте. Все исходники и старые версии лежат на сервере и занимают место, за которое вы платите.

Где размещать видео на странице

Место размещения влияет на результат не меньше, чем техническая сторона.

Не на первом экране. Первый экран должен грузиться максимально быстро и содержать главное: что вы делаете и как с вами связаться. Видео тут только мешает.

После первого блока текста. Оптимально: человек прочитал вводную часть, заинтересовался, и ему предлагают посмотреть.

Рядом с соответствующим разделом. Ролик о монтаже — в разделе о монтаже, а не свален в общую галерею в конце страницы.

Отзыв — рядом с описанием работы. Связка «вот что сделали — вот что сказал заказчик» работает сильнее, чем те же элементы по отдельности.

Не больше одного-двух роликов на страницу. Пять видео на одной странице никто не смотрит, а грузится она заметно дольше.

С заставкой и подписью. Кадр-обложка и подпись, объясняющая, что внутри и сколько это длится. Указание длительности повышает число просмотров: человек понимает, во что ввязывается.

Отдельно про отдельный раздел «Видео»: он нужен редко. Ролики работают лучше, когда стоят в контексте, а не сложены в архив, куда никто не заходит.

Итог

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

Если у вас на сайте есть видео и вы подозреваете, что оно замедляет страницы, — специалисты компании «Сайты Профессионально» проверят это бесплатно. Замерим реальную скорость, найдём тяжёлые файлы, покажем, как перенести ролики без потери качества, и подскажем, где видео добавит обращений, а где мешает.