Как добавить «ленивую загрузку» (lazy loading) для видео WordPress

Опубликовано: ADv Дата 20.07.2015 в рубрике Плагины WP Комментировать

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

Как работает Lazy Loading для видео контента?

Мучаетесь вопросом, что же такое «ленивая загрузка» и как она работает?

Когда вы встраиваете видео на свой сайт, то добавляются дополнительные внешние скрипты и файлы, которые нужно загружать. В виду того, что нужно загружать больше содержимого, ваш сайт начинает, в свою очередь, медленнее загружаться.

Ленивая загрузка видео заменяет встроенные видео Youtube и Vimeo на кликабельные картинки предпросмотра. Когда посетители кликают на изображение, начинается загрузка и воспроизведение видео.

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

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

Добавляем ленивую загрузку для видео в WordPress

Первым делом вам необходимо установить и активировать плагин Lazy Load for Videos.

Плагин работает «из коробки», и вам не придется редактировать ни один скрипт jQuery lazy loading или любой другой код.

Для того, чтобы увидеть ленивую загрузку в работе, вам нужно лишь перейти на страницу или запись, которая содержит видео с YouTube или Vimeo.Вы заметите, что стандартные плееры заменены на миниатюру видеозаписи и кнопку воспроизведения.

Когда вы кликните на изображение, оно загрузит видео и начнет его проигрывать.

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

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

На странице редактора записей вы можете задать качество миниатюры для встроенных видео YouTube.

Помимо качества миниатюры, также есть еще несколько опций, доступных вам в разделе Настройки » Lazy Load for Videos.

На вкладке Общие (general) вы можете настроить внешний вид миниатюр. Также можно активировать режим адаптивности, выбрать стиль кнопки воспроизведения, использовать собственный CSS или даже активировать поддержку разметки schema.org.

Плагин поддерживает как YouTube, так и Vimeo. Настройки под соответствующего провайдера можно найти на одноименной вкладке.

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

Аналогично, на вкладке настроек Vimeo вы можете выбрать цвета элементов управления, скрыть или отобразить название видео, а также отключить ленивую загрузку для видео с Vimeo.