Оптимизация страницы с 50+ видео-iframe — нативного lazy loading недостаточно. Что посоветуете?

Question

[Faveplus]

Привет.
Я работаю над сайтом-каталогом, где на некоторых страницах может быть до 50 видео-iframe. Сейчас я использую стандартный подход:

<iframe src="url/ifr/4854766?muted=1&hd=0"                            
title="Video Title"                            
loading="lazy"                            
class="w-full h-full"                            
allowfullscreen></iframe>

Хотя атрибут loading="lazy" помогает, такое количество iframe все равно создает значительную нагрузку (потребление памяти и лишние сетевые запросы по мере скролла).

Можете ли вы порекомендовать какие-то конкретные приемы с использованием Intersection Observer, чтобы отложить установку src для iframe до нужного момента?

Как вы справляетесь с таким количеством элементов, не нанося вреда SEO и UX?

Ищу любые библиотеки, паттерны JS или CSS-фишки (например, content-visibility: auto), которые помогут разгрузить основной поток (main thread) браузера. Спасибо!

Comments

[rPman]

вместо iframe с тяжелым проигрывателем, размещайте img превью такого же размера, а при наведении мыши или по другим критериям, заменяйте на iframe (а предыдущие обратно возвращайте).