Самым популярным и востребованным видом контента сегодня является видео. Подавляющее большинство видеороликов представлены в виде включаемых элементов какого-либо видеохостинга. Лидером среди видеохостингов является YouTube, который предоставляет свой стандартный виджет плеера в виде iframe для размещения на страницах сайта. Выбор этого метода размещения обычно оправдан и оптимален, так как позволяет достичь корректной работы видеоплеера на любых устройствах и скоростях интернет-каналов.

Но, как часто бывает, достоинства решения не приходят одни. За удобство и отсутствием проблем приходится платить загрузкой большого количества кода и дополнительными подключениями браузера.

Ускорение виджетов YouTube

Сначала разберемся с сутью проблемы: при загрузке страницы мы, помимо необходимых для самой страницы элементов, грузим большое количество JS-кода YouTube (460 Кб в сжатом виде, 1,5 Мб в распакованном). Даже если этот код грузится в асинхронном режиме, мы получаем торможение при отрисовке страницы из-за загрузки CPU и заполненности канала при загрузке кода. Если учитывать мобильные устройства, такое количество JS-кода может серьезно затормозить сайт.

При этом видео не требуется проигрывать сразу же при посещении страницы. Как правило, перед этим видео есть сопроводительный текст, другие элементы, требующие внимания. Получается, что загрузку тяжеловесного плеера можно отложить до момента начала просмотра этого видео. Логично привязать момент загрузки плеера к клику по картинке-заставке для видеоролика. Задержка загрузки плеера не будет критичной для пользователя, потому что он готов к задержке из-за буферизации самого видео.

Реализация

Для реализации отложенной загрузки можно использовать YouTube JS API или jQuery-плагин отложенной загрузки lazyYT.

Использование YouTube JS API позволяет полностью контролировать поведение видео-плеера на странице, но требует довольно сложных манипуляций для использования на сайте.

Второй вариант с lazyYT намного проще в реализации. Для использования нужно скачать и подключить плагин на странице (js- и css-код) с видео (также требуется jQuery).

Далее, вместо получаемого кода iframe вставляем такой элемент:

Параметры, которые требуются для создания плеера передаются в виде атрибутов тега div вида «data-». Например, data-youtube-id – это идентификатор ролика в YouTube, data-parameters – это параметры плеера.

Этот слой получит картинку-миниатюру для видео с YouTube и покажет в виде фона блока. По клику на картинку загрузится обычный плеер и начнётся воспроизведение видео.

Использование такого несложного приёма позволит значительно повысить ощущение скорости сайта у пользователей. Особенно актуально при включении большого количества роликов на одной странице.

К недостаткам указанного решения можно отнести нестабильное поведение YouTube по отношению к миниатюрам видео (заставкам). Плагин, в зависимости от размеров слоя, пытается взять качественную версию картинки, которая может отсутствовать на YouTube. В этом случае на месте заставки мы увидим неказистую заглушку, растянутую до размеров блока. Решить эту проблему можно небольшой модификацией плагина и передавать ему свой адрес картинки (и убрать таким образом необходимость соединения с YouTube до начала воспроизведения).

За профессиональным ускорением сайтов обращайтесь к нам.

Экспертное ускорение сайтов

Ускорение сайтов
Цена от 69 900 Р