Использование видео становится все более распространенным, а такие сервисы как YouTube, Vimeo и другие предоставляют пользователям возможности для встраивания видео на свои сайты. Хотя это очень удобно, такое встраивание может привести к значительным задержкам в загрузке страницы.
В заметке я разберу, каким образом встраиваемое видео замедляет загрузку сайта и как с этим можно бороться. А также будут разобраны плагины к CMS, которые могут помочь в решение этой задачи.
Встраивание YouTube-видео на сайте
Для того чтобы встроить видео из YouTube на страницу своего сайта достаточно всего лишь загрузить видео на YouTube и выбрать «Поделиться».
Рис. 1. Как вставить видео на сайт.
Далее выбираете «HTML-код», и у вас появляется возможность изменить размер встраиваемого видео и задать другие настройки.
Рис. 2. Встраивание видео с YouTube.
В итоге вы получаете небольшой кусочек кода, который вам нужно вставить на вашу страницу:
<iframe width="560" height="315" src="https://www.youtube.com/embed/filenamehere" frameborder="0" allowfullscreen class="c large aligncenter"></iframe>
Но внедрение видео через использование этого кода сопряжено проблемой: браузер скачивает при обращении к странице более, чем 500 КБ файлов Javascript. Это происходит в любом случае, даже если пользователь и не взаимодействует с встроенным на страницу проигрывателем видео.
Проблемы с несколькими видео
Что будет, если у вас на странице расположены несколько видео? Совсем не трудно предположить такие сценарии: например, несколько видео на странице с отзывами о компании. Или различные видео-инструкции, показывающие этапы настройки ПО на странице помощи.
YouTube загружает несколько файлов для каждого видео в iframe (осуществляется 8 запросов). Поэтому страницы, где есть несколько встроенных видео, могут загружаться намного медленнее из-за этих http-запросов и соответствующих загрузок файлов.
Рис. 3. Страница видео-отзывов на PhillyDentistry.com
Например, для страницы с видео-отзывами на сайте PhillDentistry.com были заметны существенные проблемы с загрузкой по мере того, как количество видео-отзывов росло.
Отображение статического «баннера» на месте видео с YouTube
Решение было найдено в том, чтобы получить статический «баннер» с YouTube и отображать его вместо встроенного видео. Когда пользователь кликает на кнопку проигрывания видео, начинается показ этого видео.
Это можно сделать с помощью Javascript-кода, указанного ниже:
<script>function youTubes_makeDynamic() {
var $ytIframes = $('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = $('<div class="ytLoader">');
$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
$ytLoader.append($('<img class="playBtn" src="play_button.png">'));
$ytLoader.data('$ytFrame',$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () {
var $ytFrame = $ytLoader.data('$ytFrame');
$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
$ytLoader.replaceWith($ytFrame);
});
});
};
$(document).ready(function () {youTubes_makeDynamic()});
</script>
<script>
function youTubes_makeDynamic() {
var $ytIframes = $('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = $('<div class="ytLoader">');
$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
$ytLoader.append($('<img class="playBtn" src="play_button.png">'));
$ytLoader.data('$ytFrame',$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () {
var $ytFrame = $ytLoader.data('$ytFrame');
$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
$ytLoader.replaceWith($ytFrame);
});
});
};
$(document).ready(function () {youTubes_makeDynamic()});
</script>
Эффект от такого решения оказался очень существенным. Время загрузки страницы сократилось с 17,38 секунд до 3,6 секунд.
Рис. 4. Результаты Webpagetest после оптимизации страницы.
Рис. 5. Оптимизация страницы с видео-отзывами PhillyDentistry.com
Альтернативное внедрение видео YouTube
Стандартный код внедрения видео YouTube не только увеличивает время загрузки страницы за счет скачивания дополнительных файлов и множественных запросов. Габариты видео на странице также внедрены в код, и делают проигрыватель неадаптивным.
Можно внедрить видео на страницу по-другому. Не будем использовать iframe, а воспользуемся тэгом div, не будем указывать размер и разместим iframe на страницу только, если пользователь кликнет на кнопку проигрывания видео.
Поскольку габариты проигрывателя не указаны, он займет по ширине весь родительский контейнер, а высота будет подобрана автоматически. Можно также вставлять несколько таких тэгов div с разными идентификаторами видео, если их нужно разместить на странице несколько.
Далее вставим следующий код в шаблон вашей страницы. Он найдет все такие внедренные тэги и заменит их на миниатюры видео.
<script>/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
<script>
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
.youtube-player img:hover {
-webkit-filter: brightness(75%);
}
Обратите внимание, что браузеры Chrome и Safari на устройствах iOS и Android разрешают проигрывание HTML5 видео только по действию пользователя. Они блокируют автоматическое проигрывание внедренного видео, чтобы предотвратить скачивание больших объемов по сотовой связи.
Готовые решения для CMS
Выше был рассмотрен возможный вариант решения проблемы, если владелец сайта понимает Javascript в достаточной степени, чтобы применить это решение у себя на сайте.
Это может оказаться не так просто на сайтах с различными популярными CMS, но, как правило, для них существуют отдельные плагины, которые также помогают ускорить страницы с большим количеством видео.
Ниже мы рассмотрим 4 плагина для WordPress, которые позволяют загружать видео из YouTube по принципу lazy-load, то есть, не блокируя отображение остальных элементов страницы.
Плагин Lazy Load for Videos
Этот плагин ускоряет страницы, заменяя встроенное видео на кликабельную картинку с превью этого видео.
Плагин a3 Lazy Load
Плагин позволяет загружать в режиме lazy-load изображения и видео на сайте. Можно также исключить изображения и видео из действия плагина по их имени класса. Плагин совместим с WooCommerce.
Плагин Lazy Load XT
Этот плагин позволяет загружать в режиме lazy-load изображения, видео из YouTube или Vimeo и содержимое iframe-ов. Легкий и быстрый плагин.
Плагин WP YouTube Lyte
Этот плагин вместо полноценных видео внедряет на сайт «легкие» элементы, которые запускают проигрыватель видео, если кликнуть по ним.
В заключение отметим еще раз, что стандартный способ внедрения видео из YouTubе через iframe негативно сказывается на скорости загрузки страницы. Проблема возрастает многократно, если на странице представлены несколько видео.
Для решения этой проблемы можно воспользоваться приведенным решением на Javascript. Если вы используете какую-либо популярную CMS, стоит поискать соответствующие плагины для нее, аналогичные 4-м плагинам для WordPress, которые упомянуты выше.
