Бывает PageSpeed Insights отображает предупреждение — Предотвратите чрезмерную нагрузку на сеть. И развернув список можно увидеть ссылки на youtube.
Или gtmetrix ругается что «Optimize the order of styles and scripts»:
Такая ситуация бывает на сайтах, у которых на страницах вставлены фреймы с видео youtube. Все стили и скрипты плеера подтягиваются с youtube на сайт во время загрузки страницы. Такое происходит в любом случае, даже когда посетитель не собирается смотреть видео.
Итак, есть следующий выход из этой ситуации — вместо фрейма ставим этот код:
1 2 3 4 5 6 7 8 | <img class="videothumb" src="урл-изображения" alt="" data-src="https://www.youtube.com/embed/ilrkeqtmd84?rel=0&autoplay=1" /> <script> jQuery(".videothumb").click( function() { var source = jQuery(this).attr("data-src"); jQuery(this).replaceWith('<div class="widescreen flex-video"><iframe width="100%" height="315" src="'+source+'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>'); }); </script> |
Значения
1 | src="" |
и
1 | data-src="" |
вы естественно подставляете свои.
И в футер, перед
, ставим такой скриптик:
1 2 3 4 5 6 7 8 9 10 11 | <script defer> 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 4.9.8.