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

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

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

Если вы хотите немного подправить ситуацию, 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 с Intersection Observer API, вы можете настроить свою страницу так, чтобы видео загружались только после того, как они попадут в область просмотра . Изображение 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">

Встраивает

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

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

Видео демо

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

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

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