Разработчики и сайтбилдеры, которые внедряли видео с youtube на сайт, знают, что стандартные embed-скрипты YouTube могут весить более 300 килобайт, При этом подгружаются они сразу, и могут сильно тормозить загрузку страниц, из-за чего ухудшается пользовательский опыт и снижается оценка PageSpeed.
Расскажу о легковесном youtube-embed, который даст вам следующее:
- Маленький размер скриптов — не более 15 Кбайт!
- Возможность указывать картинку для обложки видео
- Загружать скрипты не сразу, а через указанное время
- Указывать параметры для видео
Установка
Установить скрипт на сайт можно несколькими способами. Выбирайте тот, который вам больше нравится. Я использую пакет npm, а можно просто скачать архив с гитхаба
Подключение
Здесь, как и с установкой, подключайте так, как вам удобнее. Я использую Gulp и SCSS, поэтому подключаю скрипты и стили через эти инструменты.
Использование
Минимальный вариант
Добавляем собственную обложку для видео
Загружаем скрипт с задержкой в 2 секунды
const elem = document.createElement('script');
elem.src = '../src/lite-yt-embed.js';
document.head.append(elem);
document.querySelector('#done').textContent = 'Script complete.'
}, 2000);
Добавляем параметры для плеера
Итоги
У меня есть небольшой 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 на своих проектах и поделитесь результатами в комментариях.
Комментарии
Здравствуйте, полезная вещь. Давно такой скрипт искал. Подскажите куда добавили код?
const elem = document.createElement('script');
elem.src = '../src/lite-yt-embed.js';
document.head.append(elem);
document.querySelector('#done').textContent = 'Script complete.'
}, 2000);
Такой скрипт можно запихнуть или в кастомный блок или в js-файл вашей темы оформления. Но по опыту скажу, что даже без задержки всё прекрасно работает и pagespeed доволен
Я просто тоже разницы особой не заметил с этим скриптом или без. Поэтому решил спросить. Спасибо еще раз.
Здравствуйте.
Столкнулся с проблемой.
Если выводить несколько видео во flex контейнере, они визуально пропадают. Это как-то связано с расчетом ширины элементов в браузере и флексами.
То есть, если явно указать ширину в css для элементов lite-youtube, все работает. Но мне нужен именно автоматический расчет ширины для элемнтов flex контейнера.
Как решить эту задачу?
То есть, проблема в самой библиотеке. Видимо, это как-то связано с тем, что используется не стандартный HTML элемент, а кастомный, созданный через метод define()