Оптимизация видео контента на веб сайте

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

Все началось с того как я открыл страничку своего блога, в которую было встроено больше 5 видео роликов с ютуба, в следствии чего я заметил что страничка загружается несколько дольше чем по идее должна была прогрузиться, И вот я решил разобраться в этом вопросе и провести тестирование, кто знает возможно это бесполезно :D

РЕАЛИЗАЦИЯ

    В качестве фреймворка мой взор пал на ReactJS (потому что я с ним много работал, на данным момент), в итоге я написал компонент который берет код ютубовского видео ролика или ссылку, после принимает управление на себя, на странице разместил 10 видео роликов. Естественно была написана демка га которой мы и будем все проверять.

С исходниками проекта можно ознакомится на GitHub.

В данной статье я буду использовать копию демки и компонента, что-бы стать я не теряла своей актуальности со временем, а на гитхабе будет всегда новая версия с новыми демками (есть планы в развитии компонента).

Собственно говоря сами демки оптимизированная версия, не оптимизированная версия и компонент (на страницах по 10 ютубовских видеороликов).

ТЕСТЫ

    Теперь перейдем к тестам, в качестве тестировщика у нас выступит 

Google Speed.

Первым делом посмотрим на не оптимизированную версию:

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

Теперь посмотри на оптимизированную версию:

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

Теперь посмотрим что у нас там по трафику.

Не оптимизированную версия:

197 запросов и ресурсов на 22.8 мегабайта.

Теперь посмотри на оптимизированную версию:

17 запросов и ресурсов на 1,8 мегабайта.

Естественно мы видим и экономию трафика, что как-бы тоже очень хорошо.

Чем отличается оптимизированная версия от не оптимизированной версии? - в оптимизированной версии за выводи видеоролика на страницу отвечает написанный компонент, в не оптимизированной версии видеоролики выводятся через iframe (как обычно это делается).

КАК ЭТО РАБОТАЕТ

    Такой компонент можно написать на любом фреймворке. Рассмотрим принципы работы компонента.

Что мы сообщаем компоненту и как выполняем:

в VideoContentYT мы передаем код ютубовского видео ролика и параметры (подробная информация о том что можно передавать, есть в шапке компонента)

При первом рендере компонент возвращает нам вот такое:

Рисует картинку видеоролика и ютубовскую кнопку, при нажатии на кнопку воспроизведения видеоролика, выполняется второй рендер в котором содержимое меняется на iframe, вот что мы получаем:

Вот на этом весть принцип работы компонента заканчивается.

ВЫВОДЫ

    В целом эксперимент удался, даже такой контент можно легко оптимизировать. Написано все на отдельном компоненте, который легко использовать в любом другом проекте на ReactJS.

Идея не нова, вполне себе обсуждаемая во всем интернете но к сожалению такие подходы редко используются. Я просто реализовал это на реакте в виде компонента для своего удобства, решил все это дело протестировать и поделится с вами.

Спасибо за внимание! :)