Как добавить видео на сайт без потери скорости: 5 проверенных способов
С чего начинается проблема
Хотите добавить видео на сайт, но боитесь, что оно замедлит работу? Это правда: большие файлы могут тормозить загрузку. Но не стоит отказываться от видео. Есть несколько способов всё сделать правильно.
Способ 1: Храним видео в облаке
Самый простой вариант — выложить видео на специальные площадки. VK Видео, Vimeo (видеохостинг) и другие сервисы сами позаботятся о хранении и воспроизведении.
Что получаем:
- Экономия места на вашем хостинге;
- Видео само подстраивается под устройство;
- Плеер уже встроен;
- Встраивать легко в любой сайт.
Способ 2: Выбираем правильный формат
Не все форматы видео одинаково хороши. Лучше использовать современные, которые хорошо сжимаются.
Что подойдёт:
- MP4 (формат видео) (H.264) — работает везде;
- WebM (формат видео) — отлично идёт в Chrome (браузер);
- OGV (формат видеофайлов) — для старых браузеров.
Пусть браузер сам выбирает, какой формат использовать.
Способ 3: Загружаем по запросу
Не надо грузить видео сразу при открытии страницы. Пусть оно появляется, когда пользователь до него дойдёт.
Как сделать:
- Добавьте атрибут loading (загрузка данных)=“lazy (отложенная загрузка)”;
- Используйте JavaScript (язык программирования)-обёртки;
- Настройте отложенную загрузку плеера.
Способ 4: Уменьшаем размер файла
Большие файлы можно сделать компактнее без потери качества.
Что можно сделать:
- Понизьте разрешение там, где это возможно;
- Уберите лишние;
- Воспользуйтесь программами для сжатия;
- Поиграйте с битрейтом — часто его можно уменьшить.
Способ 5: Используем сеть доставки
CDN (сеть доставки контента) поможет видео грузиться быстрее для пользователей из разных уголков.
Плюсы:
- Быстрая доставка;
- Меньше нагрузки на ваш сервер;
- Автоматическое кэширование;
- Распределение по регионам.
На что обратить внимание
Когда работаете с видео, следите за:
- Размером буфера при загрузке;
- Настройками автовоспроизведения;
- Оптимизацией для мобильных;
- Работой в разных браузерах.
Проверяем результат
После всех изменений посмотрите:
- Как быстро загружается страница;
- Как ведут себя посетители;
- Сколько людей уходят сразу;
- Сколько времени проводят на сайте.
Для проверки используйте:
- Google PageSpeed Insights (анализ скорости страницы) (анализ скорости сайта)
- Lighthouse (инструмент аудита веб-страниц);
- GTmetrix (анализа производительности сайта).
В веб-студии MiWix мы часто работаем с видео на сайтах. Наши специалисты знают, как добавить контент так, чтобы сайт оставался быстрым.
Главное помнить: если всё сделать правильно, видео не только не испортит сайт, но и сделает его интереснее для посетителей. Нужно лишь выбрать подходящие методы и следить за показателями.
Обновлено
