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

Содержание:

• Как работает стандартная вставка 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" нужно подставить свои значения идентификатора видео.

Вместо того чтобы сразу загружать тяжелый плеер, этот компонент отображает превью-картинку (thumbnail). Настоящий iframe загружается только после того, как пользователь щелкнет кнопку "Смотреть видео".

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

Для кого это удобно

• Информационные порталы и медиа, где на одной странице может быть 5-10 видео.

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

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

Использование статического превью(thumbnail без плеера)

Этот метод отличается от того, что реализовано на сайте Freehost.

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

• В статическом превью iframe вообще не загружается. Пользователь кликает по картинке и его перенаправляет на сам  Ютуб.

Пример кода статического превью:

<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

Оптимизация вставки оказывает непосредственное влияние на Основные веб-показатели, какойGoogle использует в качестве фактора ранжирования.

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

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

Пример на практике

Рассмотрим характеристики страницы нашего VPS-хостинга.

После внедрения метода Lite YouTube Embed в комплексе с другими методами технической оптимизации получили следующие показатели.

Эти показатели попадают в зеленую зону Google и подтверждают, что использование компонента <lite-youtube>действительно улучшает скорость загрузки и стабильность страницы. Конечно, если использовать его в комплексе с другими методами оптимизации.

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

Выводы

Мы рассмотрели основные методы оптимизации скорости загрузки видео на сайте.

Подведем итоги, какие методы Lite YouTube Embed

• 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