Как включить Lazy Load для видео и уменьшить нагрузку на страницу

Автор: Вера Полякова | Опубликовано: 15.10.2026

Если на странице несколько видео, встроенные плееры почти всегда тянут за собой лишние запросы, скрипты и тяжёлые iframe. Из-за этого страдает не только скорость загрузки, но и поведение страницы на мобильных устройствах. Lazy Load для видео решает именно эту задачу: плеер не подгружается сразу, а появляется только после клика пользователя или когда блок попадает в область видимости.

На практике это полезно для YouTube, ВК Видео, RuTube, Дзена и других встраиваемых плееров, а также для собственных HTML5-видео. Но включать отложенную загрузку нужно не вслепую: если видео должно сразу быть доступно поисковому роботу, участвует в SEO-выдаче или находится выше первого экрана, lazy load может навредить сильнее, чем помочь.

Когда Lazy Load для видео действительно нужен

Отложенная загрузка оправдана там, где видео не является главным содержимым первого экрана. Типичный пример — статья с одним-двумя роликами ниже текста, карточка товара с демонстрацией, блок «смотрите также», подборка инструкций или галерея кейсов. В таких сценариях браузеру не нужно сразу загружать внешний плеер и все его ресурсы.

Особенно заметен эффект, если на странице несколько iframe с YouTube, ВК Видео или RuTube. Каждый такой блок может подтягивать собственные скрипты, стили, куки и дополнительные запросы к доменам платформы. Для пользователя это выглядит как более тяжёлая страница, а для метрик — как лишняя нагрузка на LCP, INP и общий вес страницы.

Lazy Load полезен и для мобильных устройств. На телефоне экран меньше, сеть часто медленнее, а лишний iframe вверху страницы мешает быстрее добраться до текста. Если вместо немедленной загрузки плеера показать постер с кнопкой воспроизведения, страница обычно ощущается легче.

Когда отложенная загрузка мешает

Не стоит включать lazy load для видео автоматически везде. Если ролик находится в начале страницы и должен быть виден сразу, задержка загрузки ухудшит пользовательский опыт. Читатель увидит заглушку вместо видео и будет ждать лишний клик или прокрутку.

Есть и SEO-ограничение. Если видео — важная часть страницы и вы рассчитываете на его индексируемость, не прячьте его слишком агрессивно. Поисковым системам важны не только сам iframe, но и контекст: заголовок, описание, постер, разметка VideoObject, доступность контента на странице. Если видео появляется только после сложного взаимодействия, робот может обработать его хуже, чем обычный встроенный блок.

Ещё один практический момент — аналитика и автозапуск. Некоторые сервисы и плагины считают просмотр только после реальной загрузки плеера. Если вы заменяете iframe на заглушку, проверьте, не ломается ли отслеживание событий, не исчезают ли предпросмотры и не страдает ли доступность для пользователей с отключённым JavaScript.

Самый надёжный способ: заглушка вместо iframe

Для большинства сайтов лучший вариант — не грузить настоящий iframe сразу, а показывать постер с кнопкой «Play». После клика подставляется реальный код встраивания. Это работает и с YouTube, и с ВК Видео, и с RuTube, и с другими платформами, где видео вставляется через iframe.

Логика простая: на старте страницы загружается только лёгкая картинка и минимальная разметка. Сам плеер появляется позже, когда пользователь уже проявил интерес. Такой подход обычно даёт больший выигрыш, чем попытка «ускорить» уже тяжёлый iframe через мелкие настройки.

Для WordPress это можно сделать несколькими способами:

через плагин, который умеет подменять iframe заглушкой;
через блоки или шаблон темы, если у вас уже есть собственная реализация;
через ручную вставку HTML и JavaScript, если нужен полный контроль.

Если на сайте много видео с разных платформ и важно единообразное оформление, удобнее использовать специализированный инструмент. Например, OmniVideo от WPShop подходит для вставки роликов с YouTube, ВК, RuTube и других сервисов в одном стиле, включая сценарии с отложенной загрузкой плеера. Это не обязательное решение, но в проектах с большим количеством видео оно экономит время на ручной настройке каждого блока.

Как включить Lazy Load в WordPress без лишней сложности

В WordPress есть несколько рабочих путей, и выбирать нужно по типу видео.

1. Если видео вставлено через iframe

Самый частый случай — код встраивания от YouTube, ВК Видео или RuTube. Здесь lazy load обычно делают через подмену iframe заглушкой. Суть в том, что в HTML хранится не сам iframe, а данные для его создания: адрес ролика, постер и кнопка запуска.

Если вы используете плагин, проверьте, что он:

не загружает внешний плеер до клика;
поддерживает адаптивную ширину;
не ломает отображение на мобильных;
не конфликтует с кэшем и оптимизаторами JavaScript.

Если делаете вручную, важно не вставлять iframe в DOM заранее. Иначе браузер всё равно начнёт тянуть ресурсы платформы, даже если блок визуально скрыт.

2. Если видео — это собственный MP4 через HTML5 video

Для собственного видео lazy load тоже возможен, но здесь есть нюанс: большие файлы не стоит бездумно хранить на обычном виртуальном хостинге. Нужны место на диске, трафик и понятное поведение сервера при отдаче медиафайлов. Если файл тяжёлый, лучше использовать CDN, объектное хранилище или видеоплатформу, а не надеяться, что сайт выдержит нагрузку сам.

Для HTML5-видео обычно откладывают не только сам файл, но и постер, если он тяжёлый, а также автозапуск. На практике безопаснее показывать постер и загружать видео только после клика. Это снижает нагрузку на страницу и не создаёт лишнего трафика для посетителей, которые ролик не смотрят.

3. Если видео вставляется через блоки редактора

В Gutenberg часть задач решается штатно, но не во всех темах и не для всех платформ. Стандартный блок «Вставка» удобен для простого embed, однако сам по себе он не делает полноценный lazy load. Если тема или плагин не подменяют iframe, видео всё равно загрузится сразу.

Поэтому в редакторе важно не путать визуальную обёртку с реальной отложенной загрузкой. Если в коде страницы уже есть iframe, значит плеер загружается. Если же на старте есть только картинка и кнопка, а iframe появляется после действия пользователя, lazy load работает как надо.

Минимальная схема для ручной реализации

Если нужен простой и понятный вариант без плагина, можно использовать заглушку с кнопкой и подставлять iframe по клику. Ниже пример для YouTube, но сама схема одинаковая и для других платформ: меняется только URL в iframe.

Сначала выводится контейнер с постером и кнопкой, а сам iframe создаётся только после клика:

<div class="video-lazy" data-src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1">
  <button type="button" class="video-lazy__play" aria-label="Воспроизвести видео">
    <img src="poster.jpg" alt="Постер видео">
  </button>
</div>

<script>
document.addEventListener('click', function (e) {
  const btn = e.target.closest('.video-lazy__play');
  if (!btn) return;

  const wrap = btn.closest('.video-lazy');
  const src = wrap.getAttribute('data-src');
  const iframe = document.createElement('iframe');

  iframe.src = src;
  iframe.loading = 'lazy';
  iframe.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
  iframe.allowFullscreen = true;
  iframe.title = 'Видео';

  wrap.innerHTML = '';
  wrap.appendChild(iframe);
});
</script>

Этот пример показывает сам принцип. На реальном сайте лучше добавить стили для адаптивного соотношения сторон, чтобы плеер не «ломал» верстку на мобильных. Если у вас несколько видео на странице, скрипт должен работать для каждого блока отдельно.

Обратите внимание: атрибут loading="lazy" для iframe поддерживается не всеми сценариями одинаково и не заменяет полноценную подмену плеера. Если iframe уже присутствует в HTML, браузер может всё равно начать часть загрузки раньше, чем вы ожидаете. Поэтому для заметного снижения нагрузки надёжнее именно отложенное создание iframe.

Что проверить после включения Lazy Load

После настройки не ограничивайтесь визуальной проверкой. Откройте страницу в режиме инкогнито и посмотрите исходную загрузку в DevTools. До клика не должно быть запросов к доменам видеоплатформы, если именно этого вы добивались.

Проверьте ещё три вещи:

видео запускается по клику на десктопе и на мобильном;
постер не растягивается и не съезжает при смене ширины экрана;
после подмены iframe не ломается верстка и не появляется горизонтальный скролл.

Если вы используете кэш-плагин, CDN или оптимизацию JavaScript, тестируйте страницу после очистки кэша. Иногда lazy load ломается не из-за самого кода, а из-за объединения скриптов, отложенного выполнения или минификации, которая меняет порядок загрузки.

Как не испортить SEO и доступность

Lazy Load не должен превращать видео в невидимый объект для пользователя и поисковика. Если ролик важен для страницы, оставьте рядом нормальный заголовок, краткое описание и, при необходимости, структурированные данные VideoObject. Это помогает поисковым системам понять, что именно находится на странице, даже если сам плеер загружается позже.

Постер тоже имеет значение. Он должен быть осмысленным, не слишком тяжёлым и соответствовать содержанию видео. Пустая серая заглушка хуже и для кликабельности, и для восприятия страницы.

Если видео размещено на YouTube, ВК Видео, RuTube или Дзене, не переносите ограничения одной платформы на другую. Где-то удобнее использовать стандартный embed, где-то — собственную заглушку, а где-то — плагин, который умеет единообразно работать с несколькими источниками. Универсального рецепта нет: ориентируйтесь на то, сколько видео на странице, насколько они важны для SEO и насколько критична скорость первого экрана.

Что выбрать на практике

Сценарий	Что делать
Видео ниже первого экрана, плееров много	Использовать заглушку и подгружать iframe по клику или при появлении в зоне видимости
Видео на первом экране и оно важно для контента	Не прятать плеер агрессивно, ограничиться лёгкой оптимизацией постера и размеров
Несколько платформ на одном сайте	Выбрать единый способ вставки, чтобы не держать разные шаблоны для YouTube, ВК Видео и RuTube
Собственное MP4-видео	Проверить нагрузку на сервер и по возможности отдавать файл через CDN или видеоплатформу

Если коротко, Lazy Load для видео нужен не ради модной галочки, а чтобы не заставлять страницу платить за плеер раньше времени. Когда он настроен аккуратно, сайт быстрее открывается, меньше грузит браузер и лучше ведёт себя на мобильных. Когда его включают без разбора, можно получить обратный эффект: скрытое видео, проблемы с доступностью и потерю смысла самого блока.