Как сделать отложенную загрузку YouTube видео на сайте

Когда вы на странице сайта встраиваете видео с YouTube, скорость загрузки и отображения этой страницы становится ниже. Проблема возникает не из-за самого видео, а из-за размера JavaScript файла, который подгружается для воспроизведения видео. Пока этот JS файл не загрузится, отрисовка страницы «ставится на паузу».

Избавиться от этого негативного эффекта можно сделав отложенную загрузку видео (еще ее называют «ленивой» загрузкой). Благодаря отложенной загрузке видео, браузер будет в первую очередь загружать необходимые для отрисовки страницы файлы, что положительно скажется на скорости отображения страницы в целом.

Как добавить отложенную загрузку видео YouTube

Для реализации ленивой загрузки видео YouTube на странице сайта мы будем использовать простой javascript и html код самого видео, с внесенными в него небольшими правками.

Наш js-код:

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
    if(vidDefer[i].getAttribute('data-src')) {
        vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
        }
    } 
}
window.onload = init;
</script>

Данный код необходимо разместить на странице вашего сайта с видео. Если вы используете WordPress, то поместите этот скрипт в подвал сайта перед закрывающим тегом </body>.

Теперь можно добавлять и html код видео:

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/ваше_видео" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Как я ранее и говорил, в данный код внесено одно небольшое, но очень важное изменение – атрибут src заменен на data-src. Будьте здесь очень внимательны!

Если вы сделали все правильно, то добавленное YouTube видео на вашем сайте теперь будет работать в режиме отложенной загрузки.