Оптимизация загрузки встраиваемых видео без JS

При встраивании видео и других виджетов через <iframe> есть проблема: ресурсы загружаются даже если пользователь не взаимодействует с виджетом. Для решения проблемы используется техника фасадов, о которой есть отдельный пост.

Суть техники в том, чтобы вместо реального виджета показать максимально похожую визуально заглушку. При нажатии или наведении указателя на заглушку срабатывает обработчик, который подменяет её на реальный <iframe> виджета.

Для плееров YouTube и Vimeo есть веб-компоненты, которые реализуют технику фасадов: отображают обложку видео с фейковой кнопкой воспроизведения, а при нажатии подменяют всё на реальный <iframe> с плеером.

Это хорошо работает и оптимизирует загрузку ресурсов, но требует реализации на JS или подключения веб-компонента. Штефан Бауэр предлагает альтернативный способ реализации фасадов с помощью <details> и loading="lazy":

<details>
  <summary>
    <img
      src="cover.jpg"
      alt="Смотреть видео"
    >
    <svg aria-hidden="true">
      <!-- фейковая кнопка -->
    </svg>
  </summary>
  <div>
    <iframe
      src="..."
      loading="lazy"
    >
    </iframe>
  </div>
</details>

<iframe> с атрибутом lodaing="lazy" работает по аналогии с <img>. Содержимое фрейма и связанные ресурсы не загружаются до тех пор, пока он не окажется в области просмотра или достаточно близко к ней.

Если поместить такой фрейм в <details>, то он будет скрыт. Это значит, что фрейм окажется в области просмотра только в момент открытия <details>. В <summary> можно поместить обложку и фейковую кнопку, а сам элемент скрывать при открытии <details>.

details[open] > summary {
  visibility: hidden;
}

Пока пользователь не нажмёт на <summary> c обложкой, фрейм не будет загружаться. После нажатия <details> раскрывается, фрейм начинает загружаться, а <summary> скрывается. Получается ленивая загрузка виджетов без JS.

#html #performance