Отложенная загрузка плеера

2 min read

Аудиоплеер загружается отложенно по умолчанию. Его JavaScript и CSS не загружаются до тех пор, пока посетитель не прокрутит страницу достаточно близко к нему. Это сохраняет высокую скорость Largest Contentful Paint (LCP) вашей страницы.

Что делает отложенная загрузка

  • При загрузке страницы на месте плеера отображается небольшой заполнитель
  • JavaScript и CSS полного плеера ещё НЕ загружены
  • Когда посетитель прокручивает страницу в пределах 500 пикселей от плеера, полный плеер загружается и заменяет заполнитель
  • Переход визуально плавный (обычно менее 100 мс)

Почему это улучшает Core Web Vitals

Без отложенной загрузки каждая страница с плеером платит ценой загрузки JS и CSS плеера при первоначальной загрузке. С отложенной загрузкой:

  • LCP: не затронут - плеер не входит в контент выше линии сгиба
  • INP: не затронут - тяжёлый JS не выполняется при загрузке
  • CLS: не затронут - заполнитель имеет ту же высоту, что и готовый плеер

Когда отключать отложенную загрузку

Отложенная загрузка включена по умолчанию. Отключите её, если:

  • Ваш плеер всегда находится выше линии сгиба (редко)
  • Вы используете автовоспроизведение и хотите, чтобы плеер был готов мгновенно (очень редко)
  • Вы хотите протестировать страницу без отложенной загрузки в целях отладки

Как отключить отложенную загрузку

  1. Перейдите в Синтез речи - TTSWP → Расширенные.
  2. Переключите Отложенная загрузка плеера в положение «выкл».
  3. Сохраните.

Как это работает технически

  • Плагин использует IntersectionObserver для определения момента, когда плеер попадает в область видимости
  • При пересечении динамически загружаются необходимые JS и CSS
  • После загрузки скрипты остаются кэшированными в браузере до конца сессии

Браузеры без поддержки IntersectionObserver (очень старые) откатываются к загрузке скриптов при загрузке страницы.

Известные пограничные случаи

Плеер внутри скрытого элемента

Если ваш плеер находится внутри секции display: none (например, в свёрнутом аккордеоне), отложенная загрузка не срабатывает до тех пор, пока секция не станет видимой. Обычно это желаемое поведение - нет смысла загружать то, что не отображается.

Автовоспроизведение аудио

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

Связанные страницы