В предыдущем модуле вы изучили некоторые методы повышения производительности, связанные с изображениями — широко используемым типом ресурсов в Интернете, который может потреблять значительную пропускную способность, если не принять меры по их оптимизации и не принять во внимание область просмотра пользователя.
Однако изображения — не единственный тип мультимедиа, который часто можно увидеть в Интернете. Видео — еще один популярный тип мультимедиа, часто используемый на веб-страницах. Прежде чем рассматривать некоторые возможные варианты оптимизации, важно сначала понять, как работает элемент <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
означает коэффициент постоянной скорости . Это параметр, который регулирует уровень сжатия, принимая целое число в заданном диапазоне.
Кодеки, такие как 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">
Встраивает
Учитывая всю сложность оптимизации и эффективного обслуживания видеоконтента, имеет смысл переложить эту проблему на специализированные видеосервисы, такие как YouTube или Vimeo. Такие сервисы оптимизируют доставку видео для вас, но встраивание видео из стороннего сервиса может по-своему повлиять на производительность, поскольку встроенные видеоплееры часто могут обслуживать множество дополнительных ресурсов, таких как JavaScript.
Учитывая эту реальность, встраивание сторонних видео может существенно повлиять на производительность страницы. По данным HTTP-архива, вставки YouTube блокируют основной поток медианного веб-сайта более чем на 1,7 секунды . Блокировка основного потока на длительный период времени — это серьезная проблема с пользовательским интерфейсом, которая может повлиять на взаимодействие страницы с следующей отрисовкой (INP) . Однако вы можете пойти на компромисс, не загружая встраивание сразу во время начальной загрузки страницы, а вместо этого создав заполнитель для встраивания, который заменяется фактическим встраиванием видео, когда пользователь взаимодействует с ним.
Видео демо
Проверьте свои знания
Порядок элементов <source>
внутри родительского элемента <video>
не определяет, какой видеоресурс в конечном итоге загружается.
Атрибут poster
элемента <video>
считается кандидатом на LCP.
Далее: оптимизация веб-шрифтов
Следующим пунктом в нашем обзоре оптимизации конкретных типов ресурсов являются шрифты. Оптимизация шрифтов вашего веб-сайта — это то, о чем часто упускают из виду, но оно может оказать существенное влияние на общую скорость загрузки вашего веб-сайта и такие показатели, как LCP и совокупный сдвиг макета (CLS) .