Стаття також доступна російською (перейти до перегляду).

Зміст:

• Як працює стандартна вставка YouTube
• Методи оптимізації вставки відео
• Завантаження з прев’ю-картинкою (thumb + click-to-load). Як працює вставка YouTube-відео на сайті Freehost
• Використання статичного прев’ю (thumbnail без плеєра)
• Lazy load для iframe
• А чи існують інші відеосервіси?
• Використання готових бібліотек та плагінів
• Використання власного відеохостингу (self-hosted video)
• Технічне рішення від FREEhost.UA
• Порівняння методів оптимізації вставки відео
• Як це впливає на Core Web Vitals та SEO
• Приклад на практиці
• Висновки

Вбудоване відео YouTube може значно знизити швидкість завантаження сайта. Це негативно впливає на SEO-показники та юзабіліті: сторінка і надалі відображає контент, але показники Core Web Vitals падають, а разом з ними — і пошукові позиції.

Навіть з якісним VPS, якщо вставка реалізована неправильно, швидкість може просісти, через зайве завантаження скриптів та медіа з зовнішніх ресурсів.

У цій статті ми розглянемо основні способи оптимізації швидкості завантаження відео на сайті. А саме: компонент Lite YouTube Embed, Статичне прев’ю (thumbnail), Lazy load для iframe, готові плагіни, Self-hosted video.

Детальніше про те, від чого залежить швидкість завантаження сайту ми вже писали  тут.

Як працює стандартна вставка YouTube

Найрозповсюдженіший спосіб додати відео на сайт, вставити готовий код <iframe>, який пропонує YouTube. Виглядає так:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/ID"
  title="YouTube video"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Такий метод дійсно дуже простий: достатньо вказати ID ідентифікатор потрібного ролика. Плеєр одразу з'явиться на сторінці.

Однак у цьому методі є серйозні недоліки:

• Велика кількість HTTP-запитів. При завантаженні сторінки браузер підтягує сам плеєр YouTube: скрипт, стилі та трекінги - десятки додаткових запитів.

• Гальмування завантаження. Важкий JavaScript і сторонні бібліотеки починають вантажитися відразу при відкритті сторінки, навіть якщо користувач не дивиться відео. Це негативно впливає на показник LCP (Largest Contentful Paint).

• Важливий зсув контенту (CLS). Якщо розміри <iframe> не задані жорстко, то при завантаженні може стрибати верстка сторінки, що погіршує Cumulative Layout Shift.

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

Методи оптимізації вставки відео

Розглянемо три основні методи.

Завантаження з прев’ю-картинкою (thumb + click-to-load). Як працює вставка YouTube-відео на сайті Freehost

На нашому сайті, зокрема на сторінці VPS-хостинг ми використовуємо більш сучасний та швидкий підхід з використанням JavaScript-бібліотеки Lite YouTube Embed. Підключення дуже просте і не потребує зайвого коду.

Підключення бібліотеки:

<!-- Стилі для коректного відображення -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.3/src/lite-yt-embed.css" />
<!-- Скрипти -->
<script src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.3/src/lite-yt-embed.js"></script>
Після цього можна вставляти HTML-розмітку:
<section class="video-wrapper">
  <lite-youtube videoid="lHkcOrkKGXk" playlabel="Дивитися відео" class="youtube-inline">
  </lite-youtube>
</section>

У lite-youtube videoid="lHkcOrkKGXk" треба підставити свої значення ідентифікатора відео.

Замість того, щоб відразу завантажувати важкий плеєр, цей компонент відображає легку прев’ю-картинку. Справжній iframe завантажується лише після того, як користувач клікне кнопку “Дивитися відео”.

Таким чином, навіть на швидкісному хостингу, можна зробити сайт швидшим, просто оптимізувавши простий код завантаження відео.

Для кого це зручно

• Інформаційні портали та медіа, де на одній сторінці може бути 5-10 відео.

• Сайти з високою конкуренцією в видачі, де дуже важливі показники Core Web Vitals.

• Освітні програми та онлайн-курси, де часто розміщують десятки роликів.

Використання статичного прев’ю (thumbnail без плеєра)

Цей метод відрізняється від того, що реалізовано на сайті  Freehost.

• На Freehost використовується Lite YouTube Embed - відображається прев’ю-картинка, а після кліку завантажується сам плеєр (iframe).

• У статичному прев’ю iframe взагалі не завантажується. Користувач клікає по картинці та його перекидає на сам  YouTube.

Приклад коду статичного прев’ю:

<a href="https://www.youtube.com/watch?v=lHkcOrkKGXk" target="_blank" rel="nofollow noopener noreferrer">
  <img src="https://img.youtube.com/vi/lHkcOrkKGXk/hqdefault.jpg" 
       alt="Дивитися відео на YouTube" width="560" height="315">
</a>

Міні-порада: для статичних картинок краще за все використовувати hqdefault.jpg(висока якість), але можна брати і mqdefault.jpg (середня якість) - вона менше важить та прискорює завантаження для мобільних.

Вставте свої посилання та дані.

Для кого це зручно

Проекти, де не критично утримувати користувача на сайті.

• Невеликі блоги та лендінги.

• Сторінки з окремими відео на новинних та інформаційних сайтах (не головні ролики).

Lazy load для iframe

Ліниве завантаження (lazy loading) - це відкладене завантаження тільки у той момент, коли він реально потрібен користувачу.

Наглядно означає наступне: плеєр завантажується лише при появі у зоні видимості браузера, а не одразу при завантаженні сторінки.

В HTML5 це можна реалізувати наступним атрибутом loading="lazy".

<iframe 
    src="https://www.youtube.com/embed/ID" 
    loading="lazy"
    width="560" height="315"
    title="YouTube video"
    frameborder="0" 
    allowfullscreen>
</iframe>

Як це працює: браузер відстежує, коли елемент <iframe> потрапляє у зону видимості та лише після цього завантажує його вміст, це зменшує кількість запитів та прискорює LCP.

Для реалізації достатньо просто відредагувати HTML.

Для кого це зручно

• Невеликі корпоративні сайти та лендінги, де 1-2 відео на сторінці.

• Прості блоги, де важливо не перевантажувати сторінку зайвими скриптами. Сайти-візитки, де відео — допоміжний елемент.

А чи існують інші відеосервіси?

Vimeo, Dailymotion також використовують код вставки через <iframe>. Однак на практиці саме YouTube зустрічається найчастіше, тому що він є головним відеохостингом для більшості сайтів. Тому більшість методів оптимізації орієнтовані саме на  YouTube, але частково підходить і до інших сервісів.

Використання готових бібліотек та плагінів

Використовуйте готові бібліотеки та плагіни для різноманітних CMS: WordPress, Drupal.

Для WordPress

• Lazy Load for Videos - замінює iframe на прев'ю з кнопкою відтворення.

• WP YouTube Lyte – реалізує принцип «легкого» завантаження плеєра.

Для Drupal

• Lazyload YouTube — підтримка  lazy load для Drupal-сайтів.

Для кого це зручно

• Якщо немає можливості правити HTML вручну.

• Для масового оновлення матеріалів, що вже опубліковані.

• Корпоративні блоги, WIKI-розділи або маркетингові сторінки, де відео зустрічаються часто.

Використання власного відеохостингу (self-hosted video)

Іноді компанії віддають перевагу зберіганню відео у на власному сервері.

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

Для вставки достатньо тега <video>:

<video width="560" height="315" controls>
  <source src="video.mp4" type="video/mp4">
  Ваш застарілий браузер не підтримує тег video. <a href="video.mp4">Завантажити відео</a>
</video>

Одна з найрозповсюдженіших проблем при вставці  — фіксовані  <iframe> або<video>.

На мобільних пристроях може вилазити за межі екрану.

Рішення - зробити контейнер з адаптивним співвідношенням сторін.

При використанні відео з власного хостингу <video> вставляється напряму, без зовнішнього плеєра та питання адаптивності стає особливо актуальним, тому що відео буде сторчати фіксоваим блоком.
Приклад з використанням CSS aspect-ratio:

<div class="video-container">
  <iframe 
    src="https://www.youtube.com/embed/lHkcOrkKGXk" 
    title="YouTube video"
    loading="lazy"
    allowfullscreen>
  </iframe>
</div>

 
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Для кого це зручно

• Корпоративних сайтів та внутрішніх порталів, де важливий повний контроль над контентом.

• Компанії, що не ставлять собі за мету просування через канал на YouTube.

• Онлайн курси та освітні платформи з власними відео-бібліотеками. 

• Сайти, де потрібно прибрати  рекламу та логотипи сторонніх сервісів.

• Проекти з невеликою кількістю відео або тих, хто використовує VPS/CDN для масштабування.

Порівняння методів оптимізації вставки відео

Як це впливає на Core Web Vitals та SEO

Оптимізація вставки безпосередньо впливає на  Core Web Vitals,  якіGoogle використовує як фактор ранжування.

Ми також докладно розглядали оптимізацію зображень як частину комплексної стратегії прискорення сайту. 

Рекомендуємо ознайомитися зі статтею: “SEO оптимізація зображень та оптимізація швидкості завантаження” тут.

Приклад на практиці

Розглянемо показники сторінки нашого VPS-хостингу.

Після впровадження методу Lite YouTube Embed у комплексі з іншими методами технічної оптимізації ми отримали наступні показники

Ці показники потрапляють у зелену зону Google та підтверджують, що використання компонента <lite-youtube> дійсно покращує швидкість завантаження та стабільність сторінки. Звісно, якщо використовувати його у комплексі з іншими методами оптимізації.

В результаті сайт не тільки працює швидше для користувачів, але й отримує перевагу в SEO: пошукові системи вище ранжують ресурси з хорошими метриками Core Web Vitals.

Висновки

Ми розглянули основні методи оптимізації швидкості завантаження відео на сайті.

Підібємо підсумки, які методи та для яких сайтів краще обирати.

• Lite YouTube Embed  — рекомендований для сайтів з великою кількістю відео, а також пов'язаних з IT сферою. Де важлива швидкість та Core Web Vitals.

• Статичне прев’ю (thumbnail)  — підходить для блогів, лендінгів та сторінок, де не критично утримувати користувачів.

• Lazy load для iframe  —просте рішення для сайтів з1–2 роликами на сторінці.

• Готові плагіни — зручні для WordPress, Drupal та інших CMS при масовому використанні відео.

• Self-hosted video — вибір для корпоративних проектів та онлайн-курсів, де важливим є повний контроль над контентом.

Підписуйтесь на наш телеграм-канал https://t.me/freehostua, щоб бути в курсі нових корисних матеріалів.

Дивіться наш канал Youtube на https://www.youtube.com/freehostua.

Ми у чомусь помилилися, чи щось пропустили?

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

Автор: Яременко Владислав за редакцією Євгена Шермана #seo#seo-audit#seo-services

Голосування 1 2 3 4 5