Видео выступления

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

Однако изображения — не единственный тип мультимедиа, который часто можно увидеть в Интернете. Видео — еще один популярный тип мультимедиа, часто используемый на веб-страницах. Прежде чем рассматривать некоторые возможные варианты оптимизации, важно сначала понять, как работает элемент <video> .

Исходные файлы видео

При работе с медиафайлами файл, который вы распознаете в своей операционной системе ( .mp4 , .webm и другие), называется контейнером . Контейнер содержит один или несколько потоков . В большинстве случаев это будет видео- и аудиопоток.

Вы можете сжать каждый поток с помощью кодека. Например, video.webm может быть контейнером WebM , содержащим видеопоток, сжатый с помощью VP9 , ​​и аудиопоток, сжатый с помощью Vorbis .

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

Один из способов сжатия видеофайлов включает использование FFmpeg :

ffmpeg -i input.mov output.webm

Предыдущая команда, несмотря на свою простоту при использовании FFmpeg, берет файл input.mov и выводит файл output.webm , используя параметры FFmpeg по умолчанию. Предыдущая команда выводит видеофайл меньшего размера, который работает во всех современных браузерах. Настройка параметров видео или аудио, предлагаемых FFmpeg, может помочь вам еще больше уменьшить размер видеофайла. Например, если вы используете элемент <video> для замены GIF, вам следует удалить звуковую дорожку:

ffmpeg -i input.mov -an output.webm

Важно: Флаг -an удаляет все аудиопотоки из выходного файла. Это важная оптимизация, если вариант использования вашего видео не требует звука (например, когда видео используется для замены анимированных GIF-файлов ), поскольку удаление аудиопотока уменьшает размер видеофайла, даже если аудиопоток уже присутствует. в исходном видеофайле молчит.

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

Кодеки, такие как H.264 и VP9, ​​поддерживают флаг -crf , но его использование зависит от того, какой кодек вы используете. Для получения дополнительной информации читайте о постоянном коэффициенте скорости для кодирования видео в H.264 , а также о постоянном качестве при кодировании видео в VP9 .

Несколько форматов

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

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

Поскольку все современные браузеры поддерживают кодек H.264 , MP4 можно использовать в качестве запасного варианта для устаревших браузеров. Версия WebM может использовать более новый кодек AV1 , который еще не так широко поддерживается , или более ранний кодек VP9, ​​который поддерживается лучше, чем AV1 , но обычно не сжимает так же хорошо, как AV1.

Примечание. Как и в случае с элементом <picture> , порядок, в котором вы указываете дочерние элементы <source> в элементе <video> , определяет приоритет браузера. Если вы сначала укажете источник MP4, браузер выберет этот формат независимо от его поддержки более эффективных форматов, которые могут быть указаны.

Атрибут poster

Изображение постера видео добавляется с помощью атрибута poster в элементе <video> , который подсказывает пользователям, каким может быть содержимое видео перед началом воспроизведения:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Примечание. Раньше элемент <video> без изображения poster не был кандидатом на LCP . С тех пор эта проблема была решена, и первый кадр видеофайла после рисования будет считаться кандидатом на LCP. Если на вашем веб-сайте широко используются видеофайлы, важно либо использовать атрибут poster , если ваши видео не воспроизводятся автоматически, либо убедиться, что кандидаты видео LCP оптимизированы, чтобы они отображались как можно скорее, если атрибут poster не настроен. использовал.

Автозапуск

По данным HTTP Archive, 20% видео в сети имеют атрибут autoplay . autoplay используется, когда видео необходимо воспроизвести немедленно, например, когда оно используется в качестве фона видео или в качестве замены анимированных GIF-файлов .

Анимированные GIF-файлы могут быть очень большими, особенно если в них много кадров со сложными деталями. Нередко анимированные GIF-файлы потребляют несколько мегабайт данных, что может привести к значительному увеличению пропускной способности, которую лучше потратить на более важные ресурсы. Обычно следует избегать форматов анимированных изображений, поскольку эквиваленты <video> гораздо более эффективны для этого типа мультимедиа.

Если для вашего веб-сайта требуется автоматическое воспроизведение видео, вы можете использовать атрибут autoplay непосредственно в элементе <video> :

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Внимание: элементы <video> с указанным атрибутом autoplay начинают загрузку немедленно, даже если они расположены за пределами исходной области просмотра.

Объединив атрибут poster с API Intersection Observer, вы можете настроить свою страницу так, чтобы она загружала видео только тогда, когда они находятся в области просмотра . Изображение poster может представлять собой заполнитель изображения низкого качества, например первый кадр видео. Как только видео появится в области просмотра, браузер начнет его загрузку. Это может улучшить время загрузки контента в исходной области просмотра. С другой стороны, при использовании poster для autoplay ваши пользователи получают изображение, которое отображается лишь на короткое время, пока видео не загрузится и не начнет воспроизводиться.

Примечание. Автоматическое воспроизведение видео при загрузке страницы может быть неприятным событием для пользователей, особенно если видео содержит аудиопоток, что может напугать, если громкость устройства высока. Автовоспроизведение следует использовать только при необходимости и в результате ожидаемой потребности пользователя. Чтобы свести к минимуму неудобства пользователей из-за автоматического воспроизведения видео, в браузерах используются разные критерии, по которым видео может воспроизводиться автоматически. Дополнительные сведения см. в политиках автозапуска для Chrome и WebKit .

Воспроизведение, инициируемое пользователем

Обычно браузер начинает загрузку видеофайла, как только анализатор HTML обнаруживает элемент <video> . Если у вас есть элементы <video> , где пользователь инициирует воспроизведение, вы, вероятно, не захотите, чтобы видео начиналось загружаться до тех пор, пока пользователь не взаимодействовал с ним.

Вы можете повлиять на то, что загружается для видеоресурсов, используя атрибут preload элемента <video> :

• Установка preload="none" сообщает браузеру, что никакое содержимое видео не должно быть предварительно загружено.
• Установка preload="metadata" извлекает только метаданные видео, такие как продолжительность видео и, возможно, другую беглую информацию.

Установка preload="none" вероятно, является наиболее желательным случаем, если вы загружаете видео, для которых пользователям необходимо инициировать воспроизведение.

Примечание. Атрибут preload является подсказкой : браузер может не подчиняться ему, и он может вести себя по-разному в разных браузерах или при сравнении мобильного устройства с настольным устройством.

В этом случае вы можете улучшить пользовательский опыт, добавив изображение poster . Это дает пользователю некоторый контекст относительно того, о чем видео. Кроме того, если изображение постера является вашим элементом LCP, вы можете повысить приоритет изображения poster , используя подсказку <link rel="preload"> вместе с fetchpriority="high" :

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Примечание. Если видео не является самым большим элементом в области просмотра, предварительная загрузка изображения poster может задержать ваш LCP из-за конкуренции за полосу пропускания, поскольку в противном случае доступная полоса пропускания была бы выделена другим, более важным ресурсам.

Встраивает

Учитывая всю сложность оптимизации и эффективного обслуживания видеоконтента, имеет смысл переложить эту проблему на специализированные видеосервисы, такие как YouTube или Vimeo. Такие сервисы оптимизируют доставку видео для вас, но встраивание видео из стороннего сервиса может по-своему повлиять на производительность, поскольку встроенные видеоплееры часто могут обслуживать множество дополнительных ресурсов, таких как JavaScript.

Учитывая эту реальность, встраивание сторонних видео может существенно повлиять на производительность страницы. По данным HTTP-архива, вставки YouTube блокируют основной поток медианного веб-сайта более чем на 1,7 секунды . Блокировка основного потока на длительный период времени — это серьезная проблема взаимодействия с пользователем, которая может повлиять на взаимодействие страницы с следующей отрисовкой (INP) . Однако вы можете пойти на компромисс, не загружая встраивание сразу во время начальной загрузки страницы, а вместо этого создав заполнитель для встраивания, который заменяется фактическим встраиванием видео, когда пользователь взаимодействует с ним.

Важно! Чтобы узнать о фасадах, прочтите раздел о фасадах в модуле, в котором рассказывается об отложенной загрузке изображений и элементов <iframe> .

Видео демо

Проверьте свои знания

Порядок элементов <source> внутри родительского элемента <video> не определяет, какой видеоресурс в конечном итоге загружается.

Истинный.

Попробуйте еще раз.

ЛОЖЬ.

Правильный!

Атрибут poster элемента <video> считается кандидатом на LCP.

Истинный.

Правильный!

ЛОЖЬ.

Попробуйте еще раз.

Далее: оптимизация веб-шрифтов

Следующим пунктом в нашем обзоре оптимизации конкретных типов ресурсов являются шрифты. Оптимизация шрифтов вашего веб-сайта — это то, о чем часто упускают из виду, но оно может оказать существенное влияние на общую скорость загрузки вашего веб-сайта и такие показатели, как LCP и совокупный сдвиг макета (CLS) .