Блог l-io.ru

Как оптимизировать видео из YouTube и Vimeo на страницах сайта

Такие сервисы как YouTube, Vimeo и другие предоставляют пользователям возможности для встраивания видео на свои сайты. Хотя это очень удобно, такое встраивание может привести к значительным задержкам в загрузке страницы.

В статье рассказывается о том, каким образом встраиваемое видео замедляет загрузку сайта и как с этим можно бороться. А также будут разобраны плагины к CMS, которые могут помочь в решение этой задачи.

Встраивание YouTube-видео на сайте

Для того чтобы встроить видео из YouTube на страницу своего сайта достаточно всего лишь загрузить видео на YouTube и выбрать «Поделиться». Далее выбираете «HTML-код», и у вас появляется возможность изменить размер встраиваемого видео и задать другие настройки. В итоге вы получаете небольшой кусочек кода, который вам нужно вставить на вашу страницу:

Код

< 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-запросов и соответствующих загрузок файлов.

Отображение статического «баннера» на месте видео с 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 секунд.

Альтернативное внедрение видео 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, которые упомянуты выше.

Проверка на живом сайте

А вот конкретный эксперимент. Сохранил одну и туже страницу на диск с выключенным плагином и с включенным. Смотрите сами:

 Уменьшено: 83% от [ 770 на 510 ] — нажмите для просмотра полного изображения

Helena V.Как оптимизировать видео из YouTube и Vimeo на страницах сайта

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *