Отложенная загрузка сторонних ресурсов с помощью фасадов

По умолчанию сторонние ресурсы загружаются сразу после загрузки страницы, однако такой подход может излишне ее замедлить. Если сторонний контент не критичен, затраты на производительность можно снизить за счет отложенной загрузки.

Фасад — это статический элемент, который выглядит как реальный встроенный объект, при этом не работает и, следовательно, существенно снижает нагрузку на страницу.

Например, загрузка видео с YouTube дополнительно загружает несколько скриптов, свой видео плеер. А зачем нам сразу грузить то, что может и не понадобиться. Сделаем загрузку видео только при наведении курсора на наш фасад – изображение-заглушку

1. Создаем HTML блок-фасад
   <div class="fasad-youtube">
  <img src="/images/fasad-youtube.webp" loading="lazy" alt="Заглушка для видео" width="644" height="362">
</div>
2. Добавляем скрипт, лучше в конце страницы
   <script type="text/javascript">
    window.addEventListener('load', ()=>{
        const youtubeFasad = document.querySelector('.fasad-youtube');
        const listener = ()=> {
            youtubeFasad.innerHTML = "";
            // create iframe
            const iframeYoutube = document.createElement("iframe");
            // Add attributes
            iframeYoutube.src = "https://www.youtube.com/embed/3GAwS4B75jY?controls=0";
            iframeYoutube.width = "644";
            iframeYoutube.height = "362";
            iframeYoutube.frameBorder ="0";
            iframeYoutube.scrolling = "0";
            iframeYoutube.style.border= "none";
            
          youtubeFasad.appendChild(iframeYoutube);
          youtubeFasad.removeEventListener("mousemove", listener, false);
        };
        youtubeFasad.addEventListener("mousemove", listener, false);
    })    
</script>
3. Все