Как оптимизировать сайт с большим количеством видео?
На сайте используется огромное количество видео размером от 3 до 15 МБ.
Я использую ленивую загрузку. То есть, подключаю видео через data-src, когда пользователь дойдет до нужного блока. Но это не выглядит очень оптимизировано, т.к загрузка все равно происходит не самой быстрой. Пользовательский опыт из за этого не очень приятный.
Какие вообще есть реализации для этого?
Ответы (1 шт):
Смотря какой у тебя приоритет: быстрее показывать видео или экономить трафик. Если хочешь, чтобы пользователь сразу что-то видел, вместо пустого блока можно ставить статичный кадр – просто укажи poster="preview.jpg", и будет хоть какая-то картинка, пока видео грузится.
Если проблема в задержке перед началом воспроизведения, попробуй preload="metadata". Браузер заранее подгрузит инфу о видео (размер, длительность), но само видео не будет тянуть трафик, пока не понадобится.
А если видео много и они большие, лучше вообще уйти в потоковое воспроизведение через HLS (.m3u8). Тогда браузер сам выберет качество под скорость интернета, и пользователи не будут ждать, пока загрузится тяжелый MP4. Для этого есть готовые библиотеки, типа hls.js, подключаешь пару строк – и всё работает.
Если видео короткие и без звука, можно даже заменить их на WebP-анимацию – иногда это быстрее, чем тянуть отдельный файл. Тут вопрос, что именно важнее: скорость, качество или минимизация нагрузки.