Ускоряем Youtube Iframe под Google Pagespeed

При вставке iframe с видео ютуба всегда возникает проблема со скоростью загрузки сайта. Особенно, если таких видео несколько. Для этого решения будем использовать скрипт, который будет подгружать превью видео по id видео и загружать iframe только по клику на превью.

<div class="youtube" id="0wCC3aLXdOw"></div>

Пишем данную строку в месте, где должно выводится видео. Т.е. на месте вашего iframe. В id добавляем id видео. Его можно взять из ссылки на видео. Далее добавляем стили:

.youtube {
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    width: 500px; 
    height: 281px;
}
.youtube .play {
    background: url('../img/play.png') no-repeat; /*укажите адрес до изображения*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 50px;
    width: 69px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
.youtube:hover .play {
    background-position: 0 0;
}

Конечно, вам нужна иконка play для ютуб. Можете взять эту. Далее добавляем скрипт, который будет обрабатывать наши элементы с классом youtube:

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |§)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i < j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
    var nb_videos = videos.length;
    for (var i=0; i < nb_videos; i++) {
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi_webp/' + videos[i].id + '/sddefault.webp)';
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);
        videos[i].onclick = function() {
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
            this.parentNode.replaceChild(iframe, this);
        }
    }
});

Как мы видим в коде js, превьюшка подгружается в формате webp и определенного размера. Вы можете изменить данный параметр сами. Вот таблица размеров всех превьюшек, который создает ютуб:

Ссылки в формате JPG:

Ссылки в формате WEBP: