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

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

РЕАЛИЗАЦИЯ
    В качестве фреймворка мой взор пал на ReactJS (потому что я с ним много работал, на данным момент), в итоге я написал компонент который берет код ютубовского видео ролика или ссылку, после принимает управление на себя, на странице разместил 10 видео роликов. Естественно была написана демка га которой мы и будем все проверять.
С исходниками проекта можно ознакомится на GitHub.
В данной статье я буду использовать копию демки и компонента, что-бы стать я не теряла своей актуальности со временем, а на гитхабе будет всегда новая версия с новыми демками (есть планы в развитии компонента).
Собственно говоря сами демки оптимизированная версия, не оптимизированная версия и компонент (на страницах по 10 ютубовских видеороликов).

ТЕСТЫ
    Теперь перейдем к тестам, в качестве тестировщика у нас выступит 
Первым делом посмотрим на не оптимизированную версию:
Как видим мобильным устройствам сложно загружать страничку, компьютерам конечно проще в этом плане, но все равно так себе.
Теперь посмотри на оптимизированную версию:
Как видим результат есть, причем солидный. А это значит что я не зря старался :). При это мы не потеряли функциональности мы все еще можем адаптивно выводить видео контент и воспроизводить его прямо на страничке. Из минусов: потеряли название видео ролика на заставке (это в будущем постараюсь поправить этот недочет).
Теперь посмотрим что у нас там по трафику.
Не оптимизированную версия:
197 запросов и ресурсов на 22.8 мегабайта.
Теперь посмотри на оптимизированную версию:
17 запросов и ресурсов на 1,8 мегабайта.
Естественно мы видим и экономию трафика, что как-бы тоже очень хорошо.
Чем отличается оптимизированная версия от не оптимизированной версии? - в оптимизированной версии за выводи видеоролика на страницу отвечает написанный компонент, в не оптимизированной версии видеоролики выводятся через iframe (как обычно это делается).

КАК ЭТО РАБОТАЕТ
    Такой компонент можно написать на любом фреймворке. Рассмотрим принципы работы компонента.
Что мы сообщаем компоненту и как выполняем:
в VideoContentYT мы передаем код ютубовского видео ролика и параметры (подробная информация о том что можно передавать, есть в шапке компонента)
При первом рендере компонент возвращает нам вот такое:
Рисует картинку видеоролика и ютубовскую кнопку, при нажатии на кнопку воспроизведения видеоролика, выполняется второй рендер в котором содержимое меняется на iframe, вот что мы получаем:
Вот на этом весть принцип работы компонента заканчивается.

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

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


Комментарии