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

Автор: Scott Jehl

Если вы ещё не слышали, моя команда в Squarespace работает над стандартизацией ленивой загрузки для HTML‑элементов Video и Audio, и дело движется очень хорошо.

Идея появилась как issue в трекере HTML‑стандарта в 2024 году, но за последние несколько месяцев работа над ней заметно ускорилась. Как и обычно бывает со стандартами веб‑платформы, всё происходит публично и довольно быстро. Поэтому я решил кратко рассказать, что уже сделано и где сейчас работает эта возможность.

Если коротко: функция ещё не стала частью стандарта, но предложение для спецификации HTML, платформенные тесты и патчи для браузеров уже некоторое время находятся на ревью. Более того, поддержка уже появилась за флагом в Chrome Canary, так что с ней можно начинать экспериментировать.

Небольшое примечание: это неофициальный пост, который просто суммирует публичный прогресс по этой функции на текущий момент. Когда поддержка появится в стабильных версиях браузеров, наверняка появится больше подробных материалов. Отдельно приятно, что мой работодатель --- Squarespace --- поддерживает нашу работу по развитию открытого веба.

Что уже сделано

С начала декабря работа над этой функцией включала:

предложение и обсуждение изменений в HTML Standard Specification;
написание Web Platform Tests, чтобы браузеры могли проверять корректность реализации;
подготовку патчей для Firefox и WebKit, добавляющих поддержку функции;
благодаря работе разработчика Chromium Хельмута Янушки, функцию уже можно попробовать в Chrome Canary.

Отдельная благодарность Брэдy Фросту, Credo Duarte и Zach Lysobey за сотрудничество, а также коллегам из команды Websites за ревью кода и поддержку.

Как это работает

По данным HTTP Archive, видео и аудио --- одни из самых тяжёлых ресурсов на веб‑страницах. Новый стандарт позволит значительно снизить вес страниц и нагрузку на ресурсы --- и всё это благодаря простому декларативному HTML‑атрибуту.

Ленивая загрузка для <audio> и <video> работает так же, как и для изображений или iframe: нужно просто добавить атрибут loading="lazy".

Тогда браузер будет откладывать загрузку:

видео‑ и аудиофайлов,
poster‑изображений,
автозапуска,

пока элемент не окажется в области видимости (viewport) пользователя.

Пример

<video 
       loading="lazy" 
       autoplay playsinline muted controls
       src="path/to/sloth.webm" 
       poster="path/to/sloth.jpg"></video>

<audio 
       loading="lazy" 
       autoplay playsinline muted controls
       src="path/to/sloth-sounds.mp3"></audio>

Когда атрибут добавлен, браузер будет загружать медиа только тогда, когда элемент находится рядом с областью просмотра.

Попробовать прямо сейчас

Эта функция уже начинает появляться в современных браузерах и доступна в Chrome Canary.

Как её включить (пример для macOS):

Скачать Chrome Canary\
Перетащить приложение в папку Applications\
Запустить браузер с включённой функцией:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=LazyLoadVideoAndAudio

После запуска откройте эту страницу и прокрутите её вниз до видео. Оно демонстрирует отложенную загрузку медиафайла и отложенный автозапуск. При желании можно наблюдать сетевые запросы в DevTools.

Начинайте прокручивать…

Ещё немного…

Вот оно:

Вот и всё. Перед вами --- одно из первых видео на публичном сайте, загружающееся лениво нативным способом.

Вероятно.

Разумеется, <audio> тоже будет поддерживать эту возможность, что может дать заметные преимущества для производительности веб‑интерфейсов, связанных с аудио.

Небольшая заметка о производительности: пока рано говорить о строгих best practices, но одно правило уже очевидно. Как и в случае с изображениями, не стоит использовать lazy‑loading для видео, которые находятся сразу в видимой части страницы. Поскольку загрузка откладывается, такие ресурсы начнут загружаться позже, чем обычно. Поэтому лучше использовать ленивую загрузку для медиа, которые находятся далеко ниже на странице, внутри вкладок, каруселей и других скрытых интерфейсов.

Что дальше

Сейчас готовятся финальные изменения в стандарте и патчи для браузеров. Следить за прогрессом можно в соответствующем pull request WHATWG и в nightly‑сборках браузеров.

Я также буду публиковать обновления здесь.

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

Следите за новостями!

Теги: html, performance, lazy, video

Источник

RuWeb Blog

Проводник