Зачем делать отложенную загрузку видео?

Когда вы вставляете видео с Yputube, Vimeo, Facebook и других видеохостингов на свои странички – вы замедляете скорость её загрузки и отображения.

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

Когда вы делаете отложенную загрузку видеофайлов вы даёте возможность браузеру загрузить более необходимые для отрисовки страницы файлы, увеличиваете скорость сайта в целом. Проблема не в самом видео, а больше замедляете загрузку блокирующий отрисовку javascript, вы можете увидеть это например в GMetrix или Chrome DevToools

Как добавить отложенную загрузку видео

Для этого нам понадобится небольшой и очень простой javascript. Я покажу вам метод, который я использую чаще всего. Для начала разберем html:

<iframe width=”560″ height=”315″ src=”” data-src=”//www.youtube.com/embed/OMOVFvcNfvE” frameborder=”0″ allowfullscreen></iframe>
Это код видео из ютуба с двумя небольшими изменениями
Первое – убрана ссылка на видео в атрибудет src=””
второе – я добавил ссылку на видео в атрибут data-src
data-src=”//www.youtube.com/embed/OMOVFvcNfvE”

Ну а теперь javascript:

<script>
function init() {
var vidDefer = document.getElementsByTagName(‘iframe’);
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute(‘data-src’)) {
vidDefer[i].setAttribute(‘src’,vidDefer[i].getAttribute(‘data-src’));
} } }
window.onload = init;
</script>

Как использовать отложенную загрузку

  1. Возьмите код дял вставки любого видео, которое вам нравится
  2. Измените немного код как указано выше
  3. Добавьте скрипт на вашу страничку и вставьте видео

Эта штука будет работать для большинства сайтов и не нужны никакие специальные библиотеки

оригинал статьи

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

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

четыре + четыре =