Как ускорить загрузку страниц сайта с встроенным видео? Этим вопросом задаются тысячи, если не миллионы веб-мастеров по всему миру. Видео отлично дополняет контент, повышает его ценность и ускоряет продвижение, но при этом сильно замедляет загрузку сайта. Каждая секунда загрузки страницы сайта отдаляет её от ТОП-10 поисковой выдаче. Так что же делать?
Надо ускорять сайт по тесту PageSpeed Insights. Ускорять мы будем сайт на WordPress мы не будем как все встраивать видео в стандартный плеер и замедлять свои страницы, а просто изменим подход. Зачем грузить страницы сайта сразу загрузкой видео, если можно загружать превью видео которое весит до 50 кб. И как же это будет выглядеть. Вот видео как реализовать ускорение страниц сайта.
Видео как ускорить загрузку страниц сайта на WordPress содержащих видео вставки.
Для реализации задачи по ускорению страниц сайта, нам надо добавить перед закрывающим тегом </body> следующий код.
Первое. JS-код предоставляемый youtube.com который будет загружать превью вместо самого видео.
Код вставляется в файл footer.php вашей темы. Не забудьте пожалуйста!
<script>
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
</script>
Далее нам надо добавить стили css для блока с превью, чтобы у нас была кнопка для проигрывания и само видео смотрелось красиво и удобно. Стили css к слову, можно переделать по себя.
<style>
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
width: 100%;
}
.youtube img {width: 100%; top: -16.82%; left: 0; opacity: 0.7;}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img, .youtube .play-button {cursor: pointer;}
.youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before {position: absolute;}
.youtube .play-button, .youtube .play-button:before {top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}
.youtube iframe {height: 100%; width: 100%; top: 0; left: 0;}
</style>
Добавив стили, нам остается лишь добавить блок с вызовом нашего видео в любое место на странице. Не забывайте вписывать id своего видео. При открытии страницы вашего сайта будет загружаться легкая картинка, а не тяжелое видео с плеером.
<div class="youtube" data-embed="idвидео">
<div class="play-button"></div>
</div>
Готово, пример работы по ускорению WordPress сайта вы можете видеть на этой странице. Если вам требуется помощь или консультация, обращайтесь на указанную почту. Оставляйте свои комментарии. Интересен ваш опыт использования кода для ускорения страниц с видео на CMS: OpenCart, Bitrix, Modx, Joomla. Удачи!