​Оптимизация видео для повышения производительности сайта

​Оптимизация видео для повышения производительности сайта

Сокращение размера видео файлов с 7,48 МБ до 239 КБ при использовании подхода Responsive Video имеет решающее значение для повышения производительности веб-сайта на мобильных устройствах.

В этом сценарии изображение видеопостера служит в качестве Largest Contentful Paint (LCP), поэтому можно использовать Cloudinary для автоматической доставки изображений наилучшего формата.

<video poster=".../dpr_auto,f_auto,q_auto/banner-poster.webp">

<source src="video-small.mp4" media="(max-width: 600px)">

<source src="video.mp4">

</video>

С помощью этого HTML-тега видео браузер загружает "video-small.mp4" для экранов меньше 600px и "video.mp4" для больших экранов.

Чтобы еще больше использовать возможности Cloudinary, можно загружать видео разных размеров с помощью таких параметров URL, как c_scale, f_auto, q_auto, w_720. Это обеспечивает оптимизацию видео для мобильных устройств, а f_auto и q_auto позволяют выбрать оптимальный формат видео для других устройств.

Использование f_auto и q_auto в Cloudinary устраняет необходимость явного определения различных типов видео.

<video>

<source src="video.webm" type="video/webm">

<source src="video.mp4" type="video/mp4">

</video>

https://www.linkedin.com/posts/joanleon_webperf-video-webperftip-activity-7150950719733346304-3rDq

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/2846...