Під час вставки коду Youtube або будь-якого іншого плеєра на кшталт Vimeo на свій сайт, ми отримуємо завантаження самого плеєра, кодів відстеження сервісу, аналітику сервісу, величезні бандли JavaScript, а в деяких випадках і частину відео, навіть якщо людина його не запускає.
Наприклад, заходить на сторінку 1000 осіб на день, а відео запускає тільки 20, але все “добро” від відеохостингу “прилітає” всім. Подивімося на прикладі плеєра Youtube, який розмір коду отримує користувач навіть не запускаючи відео:
HTML: 64 кілобайти
CSS: 346 кілобайт
Зображення: приблизно 150 кілобайт (залежно від відео та його прев’ю)
Шрифти: 17 кілобайт
JavaScript: 2.47 мегабайта
XHR-запити: приблизно 100 кілобайт
Разом: приблизно 3,5 мегабайта
Але що найстрашніше: 10 нових з’єднань!
Ми тільки підключили одне відео через код YouTube, а користувач завантажив 3,5 мегабайта і встановив 10 з’єднань. Жах!
Нумо розв’язувати цю проблему.
Можна використовувати властивість тега iframe під назвою srcdoc (обов’язково дивіться підтримку. Усередині цієї властивості просто задаємо розмітку з посиланням на плеєр ютуба з параметром автоплей. Ніякого JS (#nojs), тільки стандартний функціонал браузера.
У результаті отримуємо завантаження плеєра тільки для тих, хто клікнув на плей, що нам і було потрібно. І всього одне з’єднання для завантаження прев’ю відео (картинку можна також зберегти собі на хостинг і виключити це єдине з’єднання).
Так, до речі, за такою ж технологією можна відкладати до кліка будь-який сторонній код, який підключається за допомогою iframe, зокрема й карти.
Код на CodePen: