Оптимизированное встраивание видео без JavaScript для повышения производительности

Встраиваемые видеоролики значительно замедляют загрузку страницы и могут приводить к кумулятивному сдвигу макета (CLS), даже когда используются оптимизированные решения, такие как lite-youtube, особенно для контента, находящегося в начальной области просмотра. Автор предлагает инновационный подход, использующий нативные HTML-элементы <details> и <summary> для ленивой загрузки видео без использования JavaScript, даже для элементов "выше сгиба". Элемент <details> по умолчанию скрывает свое содержимое (кроме <summary>), раскрывая его только после взаимодействия пользователя, что делает его идеальным для отложенной загрузки ресурсов.

Когда пользователь нажимает на <summary>, браузер добавляет атрибут open к <details>, тем самым отображая скрытое содержимое. Это позволяет избежать негативного влияния на LCP (Largest Contentful Paint), поскольку видео не загружается до фактического взаимодействия.

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

<details>
  <summary class="video-summary">
    <img src="https://example.com/thumbnail.webp" class="video-thumbnail">
    <svg class="video-playicon" viewBox="0 0 32 32"><path d="m11.167 5.608 ..."></path></svg>
  </summary>
  <!-- Здесь будет iframe с видео -->
</details>

Сам видеоплеер (например, <iframe> YouTube или Vimeo) размещается внутри <div> сразу после <summary>, внутри контейнера <details>. При клике на миниатюру, когда <details> получает атрибут open, CSS скрывает <summary>, и на его месте появляется iframe с видео. Это достигается с помощью следующего CSS:

.video-embed {
  position: relative;
  &[open] {
    .video-summary {
      visibility: hidden;
    }
  }
}

Для YouTube-видео можно добавить ?autoplay=1 к URL, чтобы оно начинало воспроизводиться сразу после раскрытия, если это разрешено настройками браузера пользователя. Сравнительные тесты показывают, что данный паттерн на основе <details> значительно превосходит lite-youtube-embed по времени загрузки, FCP, LCP, объему переданных данных и количеству ресурсов, демонстрируя до 6,4 раза более быстрый FCP и 1,6 раза более быстрый LCP.

Основное преимущество — полное отсутствие JavaScript, что исключает точки отказа, связанные со скриптами. Этот универсальный паттерн подходит не только для YouTube, но и для Vimeo, самохостинговых видео, анимированных GIF, CodePen-вставок, карт и любых других тяжелых встраиваемых элементов, которые нужно загружать по требованию. Использование нативных возможностей браузера, таких как <details> (с 2011 года) и ленивая загрузка iframe (с 2019 года), обеспечивает производительное, доступное и надежное решение без дополнительных усилий по разработке.

Оригинал статьи: Performance-Optimized Video Embeds with Zero JavaScript