к.е.н. Лавлинский Н. Е., технічний директор ТОВ «Метод Лаб» 
Самим популярним і затребуваним видом контенту сьогодні є відео. Переважна більшість відеороликів представлені у вигляді включаються елементів будь-якого відеохостингу. Лідером серед місць для розміщення відеофайлів є YouTube, який надає свій стандартний віджет плеєра у вигляді iframe для розміщення на сторінках сайту. Вибір цього методу розміщення зазвичай виправданий і оптимальний, так як дозволяє досягти коректної роботи відеоплеєра на будь-яких пристроях і швидкостях інтернет-каналів.
Але, як часто буває, гідності рішення не приходять одні. За зручність і відсутністю проблем доводиться платити завантаженням великої кількості коду і додатковими підключеннями браузера.
Прискорення віджетів YouTube
Спочатку розберемося з суттю проблеми: при завантаженні сторінки ми, крім необхідних для самої сторінки елементів, вантажимо велику кількість JS-коду YouTube (460 Кб в стислому вигляді, 1,5 Мб в розпакованому). Навіть якщо цей код вантажиться в асинхронному режимі, ми отримуємо гальмування при відображенні сторінки через завантаження CPU і заповнювання каналу при завантаженні коду. Якщо враховувати мобільні пристрої, така кількість JS-коду може серйозно загальмувати сайт.
При цьому відео не потрібно програвати відразу ж при відвідуванні сторінки. Як правило, перед цим відео є супровідний текст, інші елементи, що потребують уваги. Виходить, що завантаження великовагового плеєра можна відкласти до моменту початку перегляду цього відео. Логічно прив'язати момент завантаження плеєра до кліку по картинці-заставці для відеоролика. Затримка завантаження плеєра не буде критичною для користувача, тому що він готовий до затримки через буферизації самого відео.
Реалізація
Для реалізації відкладеної завантаження можна використовувати YouTube JS API або jQuery-плагін відкладеної завантаження lazyYT.
Використання YouTube JS API дозволяє повністю контролювати поведінку відео-плеєра на сторінці, але вимагає досить складних маніпуляцій для використання на сайті.
Другий варіант з lazyYT набагато простіше в реалізації. Для використання потрібно завантажити і підключити плагін на сторінці (js- і css-код) з відео (також потрібно jQuery).
Далі, замість одержуваного коду iframe вставляємо такий елемент:
Параметри, які потрібні для створення плеєра передаються у вигляді атрибутів тега div виду «data-». Наприклад, data-youtube-id - це ідентифікатор ролика в YouTube, data-parameters - це параметри плеєра.
Цей шар отримає картинку-мініатюру для відео з YouTube і покаже у вигляді фону блоку. По кліку на картинку завантажиться звичайний плеєр і почнеться відтворення відео.
Використання такого нескладного прийому дозволить значно підвищити відчуття швидкості сайту у користувачів. Особливо актуально при включенні великої кількості роликів на одній сторінці.
До недоліків зазначеного рішення можна віднести нестабільна поведінка YouTube по відношенню до мініатюр відео (заставок). Плагін, в залежності від розмірів шару, намагається взяти якісну версію картинки, яка може бути відсутнім на YouTube. У цьому випадку на місці заставки ми побачимо непоказну заглушку, розтягнуту до розмірів блоку. Вирішити цю проблему можна невеликою модифікацією плагіна і передавати йому свою адресу картинки (і прибрати таким чином необхідність з'єднання з YouTube до початку відтворення).
за професійним прискоренням сайтів звертайтеся до нас.