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

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

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

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

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

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

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

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

ffmpeg -i input.mov output.webm

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

ffmpeg -i input.mov -an output.webm

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

Кодеки, такие как 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.

Атрибут poster

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

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

Автовоспроизведение

Согласно данным 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>

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

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

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

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

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

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

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

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

Ленивая загрузка

Относительно новым дополнением к оптимизации производительности видео является атрибут loading=lazy . Подобно отложенной загрузке изображений на уровне браузера и тому подобному для iframe , этот атрибут обеспечивает аналогичную загрузку для видеофайлов при загрузке poster и preload загрузки.

Использование атрибута poster вместе с preload="none" или preload="metadata" уже позволяет избежать загрузки видео по умолчанию, а атрибут loading=lazy откладывает загрузку даже изображения-постера и метаданных до тех пор, пока видео не окажется в области просмотра или не приблизится к ней.

Встраивания

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

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

Видеодемонстрации

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

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

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