Чому не можна вставляти відео youtube через iframe або як прискорити завантаження сторінок сайту

При створенні сайту під замовлення або просто для свого проекту виникає проблема зі швидкістю завантаження відео. Часто Google PageSpeed Insights на дану проблему не реагує, але при завантаженні в браузері швидкість завантаження сторінки помітно падає. Я зараз говорю саме про відео. Про тих відео, які ми беремо з сервісу Youtube. У цій статті я розгляну спосіб, який дійсно прискорить завантаження сторінки, на якій знаходиться багато вставок відео з Youtube.

Тему швидкості завантаження сторінки я раніше вже торкався в наступних статтях і відео:

• PageSpeed Insights на 100% - Частина 1
• PageSpeed Insights на 100%. Частина 2 - «Скоротіть HTML»
• Ще один спосіб підвищити швидкість завантаження сторінок сайту (іконочние шрифти)

Щоб порівняти швидкість завантаження сторінки, перейдіть за наступними кнопок:

Звичайна вставкаЗагрузка при кліці

Як це використовувати і результати експериментів

Спочатку я хотів просто розповісти про спосіб, який дозволяє прискорити завантаження відео, які веб-майстри беруть з сервісу YouTube. Тому що, спочатку сервіс YouTube пропонує використовувати для вставки відео саме iframe. Але, як в будь-якій ситуації, завжди можна знайти ще краще рішення.

Потім я вирішив просто порівняти кількість HTTP запитів на сторінці, де немає вставок iframe, зі сторінкою, де я для прикладу вставив кілька відеороликів. Я розумів, що цей спосіб дійсно зменшує час завантаження сторінки, але був приємно здивований, коли побачив, що завантаження зменшується в десятки разів.

Про це експерименті з відеороликами ви можете прочитати нижче. Я часто користуюся своїми ж статтями, які написав досить давно, тому для зручності я наведу скрипти, стилі і розмітку, яка необхідна для вставки відео цим способом. Щоб коли ви зайдете на дану статтю вдруге (з закладок, наприклад), могли відразу скористатися необхідними матеріалами.

Блок "скопіювати-вставити"

Автор цього коду Alexis Ulrich (посилання на оригінал в кінці статті). А зараз, власне, сам код з невеликими поясненнями.

1 етап. HTML розмітка

1

lt;div class="Youtube" id="0wCC3aLXdOw" style="Width: 500px; height: 281px;"gt; lt;/divgt;

ВАЖЛИВО: в атрибут id необхідно вставити ідентифікатор вашого відео на YouTube. Якщо не знаєте, де воно знаходиться то дивіться відео інструкцію до цієї статті нижче.

2 етап. CSS стилі

Завантажити зображення кнопки "Play" можна тут - скачати кнопку "Play".

1234567891011121314151617181920212223242526272829

.youtube {background-position: center-background-repeat: no-repeat-position: relative-display: inline-block-overflow: hidden-transition: all 200ms ease-out-cursor: pointer-}.youtube .play {background: url(`../img/youtube-play-btn.jpg`) no-repeat- / * ВАЖЛИВО: тут вкажіть адресу до зображення * /background-position: 0 -50px--webkit-background-size: 100% auto-background-size: 100% auto-position: absolute-height: 50px-width: 69px-transition: none-top:0-left:0-right:0-bottom:0-margin:auto-}.youtube: hover .play {background-position: 0 0-}

3 етап. javascript

123456789101112131415161718192021222324252627282930313233343536373839404142434445

`Use strict`-function r(f){/in/.test(document.readyState)?setTimeout(`R (`+f+`)`,9):f()}r(function(){if (!document.getElementsByClassName) {// Підтримка IE8var getElementsByClassName = function(node, classname)  ) `+classname+`( var videos = getElementsByClassName(document.body,"Youtube")-} else {var videos = document.getElementsByClassName("Youtube")-}var nb_videos = videos.length-for (var i=0- ilt;nb_videos- i++) {// Знаходимо постер для відео, знаючи ID нашого відеоvideos[i].style.backgroundImage = `Url (https://i.ytimg.com/vi/` + videos[i].id + `/sddefault.jpg)`-// Розміщуємо над постером кнопку Play, щоб створити ефект плеєраvar play = document.createElement("Div")-play.setAttribute("Class","Play")-videos[i].appendChild(play)-videos[i].onclick = function() {// Створюємо iFrame і відразу починаємо програвати відео, тобто атрибут autoplay у відео в значенні 1var iframe = document.createElement("Iframe")-var iframe_url = "Https://youtube.com/embed/" + this.id + "? Autoplay = 1autohide = 1"-if (this.getAttribute("Data-params")) iframe_url+=``+this.getAttribute("Data-params")-iframe.setAttribute("Src",iframe_url)-iframe.setAttribute("Frameborder",`0`)-// Висота і ширина iFrame буде як у елемента-батькаiframe.style.width= this.style.width-iframe.style.height = this.style.height-// Замінюємо початкове зображення (постер) на iFramethis.parentNode.replaceChild(iframe, this)-}}})-

[ВІДЕО] Як використовувати даний спосіб підвищити швидкість завантаження сторінок на своїх проектах?

Можливо, для когось не до кінця ясно, куди необхідно вставити ту чи іншу ділянку коду. У невеликому відео я показав, як користуватися матеріалами даної статті на практиці.

Експеримент зі швидкістю завантаження сторінки на практиці

Нижче я описав 2 невеликих експерименту зі швидкістю завантаження сторінки в залежності від способу завантаження відео YouTube. Зверніть увагу, наскільки сильно відрізняються цифри. Всі тести я проводив в браузері Chrome (версія 52.0.2743.116 m).

Для тестів я створив дві сторінки:

• Сторінка # 1 - тут завантаження реалізована тим способом, про який розказано в статті. Тобто відео завантажується тільки при кліці.
• Сторінка # 2 - на цій сторінці я вставив відео звичайним способом - через тег iFrame.

Протягом двох тестів на сторінках будуть лише додаватися відео.

ТЕСТ # 1 - Кількість відео на сторінці: 1

Докладне зображення з усіма запитами можна подивитися за посиланнями:

• Скріншот запитів сторінки # 1
• Скріншот запитів сторінки # 2

Як видно з скріншоту, на першій сторінці час завантаження менше половини секунди. Воно й зрозуміло, адже на другій сторінці вдвічі більше запитів. Навіть на сторінці з одним відео помітна істотна різниця. Якщо проаналізувати запити, то можна помітити, що на першій сторінці лише 7 запитів, в той час як на другий їх 15.

Але що ж станеться, якщо буде не одне відео, а кілька? Дивіться результати другого експерименту далі ...

ТЕСТ # 2 - Кількість відео на сторінці: 5

Кількість запитів для кожної зі сторінок:

• Скріншот запитів сторінки # 1
• Скріншот запитів сторінки # 2

Тут різниця колосальна. Як в часі завантаження, так і за кількістю запитів.

Я думаю стає зрозуміло, що чим більша кількість відео використовується на сторінці, тим довше буде здійснюватися завантаження сторінки.

висновок

Швидкість завантаження сторінок - це постійно болюче питання. Багато пишуть про те, що це питання гостро стоїть саме в наш час. Але вивчаючи літературу по створенню сайтів, яка написана на початку 2000-х, я зробив для себе висновок: навіть в той час, коли сторінка завантажувалася приблизно 10 секунд, про швидкість завантаження турбувалися точно також, а може навіть сильніше. Причина - доводилося відмовлятися від графічної інформації та інших медіа на сторінці.

Спосіб вставки відео з YouTube, який ми розглянули в цій статті, дійсно дозволяє прискорити завантаження сторінок сайту. Це видно навіть на око. Тому спробуйте один раз застосувати це на своєму сайті, і ви зрозумієте всю красу даного способу.

На жаль, прочитавши статтю, багато веб-майстри розчаруються. Можливо, вони чекали саме плагіна для будь-якої CMS (WordPress, Joomla і т.д). Адже набагато простіше встановити один плагін і насолоджуватися результатом. Але на жаль, дійсно оптимізовані речі робляться найчастіше вручну. Тому даний спосіб відмінно підійде для Лендінзі. Але хто забороняє на основі цього JS коду написати свій плагін для WordPress, наприклад? # 128521;

Успіхів!

джерело