Используем легковесный Lite YouTube Embed вместо обычного YouTube iFrame

Главные вкладки

ivnish 10 декабря 2021 в 10:01
3

Разработчики и сайтбилдеры, которые внедряли видео с youtube на сайт, знают, что стандартные embed-скрипты YouTube могут весить более 300 килобайт, При этом подгружаются они сразу, и могут сильно тормозить загрузку страниц, из-за чего ухудшается пользовательский опыт и снижается оценка PageSpeed.

Расскажу о легковесном youtube-embed, который даст вам следующее:

  • Маленький размер скриптов — не более 15 Кбайт!
  • Возможность указывать картинку для обложки видео
  • Загружать скрипты не сразу, а через указанное время
  • Указывать параметры для видео

Установка

Установить скрипт на сайт можно несколькими способами. Выбирайте тот, который вам больше нравится. Я использую пакет npm, а можно просто скачать архив с гитхаба

Подключение

Здесь, как и с установкой, подключайте так, как вам удобнее. Я использую Gulp и SCSS, поэтому подключаю скрипты и стили через эти инструменты.

Использование

Минимальный вариант

<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

Добавляем собственную обложку для видео

<lite-youtube videoid="ogfYd705cRs" style="background-image:url(https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg);"></lite-youtube>

Загружаем скрипт с задержкой в 2 секунды

setTimeout(_ => {
  const elem = document.createElement('script');
  elem.src = '../src/lite-yt-embed.js';
  document.head.append(elem);

  document.querySelector('#done').textContent = 'Script complete.'
}, 2000);

Добавляем параметры для плеера

<lite-youtube videoid="ogfYd705cRs" params="controls=0" style="background-image: url(https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg);"></lite-youtube>

Итоги

У меня есть небольшой pet-проект https://thiswarofmine.ru/ — сайт по игре «This War of Mine». При использовании обычного youtube iframe главная страница сайта загружалась с ощутимой задержкой, а PageSpeed был 33 на мобильных и 78 на десктопе.

После замены youtube iframe на lite-youtube-embed сайт стал грузиться ощутимо быстрее, а PageSpeed стал 92 на мобильных и 100 на десктопе.

Планирую внедрить этот метод и на drupal.ru, здесь тоже немало страниц с видео из YouTube. О результатах позже напишу.

Попробуйте Lite YouTube Embed на своих проектах и поделитесь результатами в комментариях.

Автор

ivnish Drupal FullStack Developer

Комментарии

Аватар пользователя Babich Babich 21 декабря 2021 в 11:23

Здравствуйте, полезная вещь. Давно такой скрипт искал. Подскажите куда добавили код?

setTimeout(_ => {
  const elem = document.createElement('script');
  elem.src = '../src/lite-yt-embed.js';
  document.head.append(elem);
  document.querySelector('#done').textContent = 'Script complete.'
}, 2000);
Аватар пользователя ivnish ivnish 21 декабря 2021 в 11:32

Такой скрипт можно запихнуть или в кастомный блок или в js-файл вашей темы оформления. Но по опыту скажу, что даже без задержки всё прекрасно работает и pagespeed доволен

Аватар пользователя Babich Babich 21 декабря 2021 в 11:35

Я просто тоже разницы особой не заметил с этим скриптом или без. Поэтому решил спросить. Спасибо еще раз.

Аватар пользователя Alex_web Alex_web Сегодня в 16:43

Здравствуйте.
Столкнулся с проблемой.
Если выводить несколько видео во flex контейнере, они визуально пропадают. Это как-то связано с расчетом ширины элементов в браузере и флексами.
То есть, если явно указать ширину в css для элементов lite-youtube, все работает. Но мне нужен именно автоматический расчет ширины для элемнтов flex контейнера.
Как решить эту задачу?

Аватар пользователя Alex_web Alex_web Сегодня в 17:03

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