Ленивая загрузка видео на WordPress

Нужно лениво загружать видео на WordPress?

Медиа — это очень эффективная стратегия, позволяющая сделать ваш контент захватывающим.

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

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

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

Что такое ленивая загрузка?

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

Существует множество доступных плагинов WordPress, которые позволяют лениво загружать изображения на каждой странице вашего сайта. Это означает, что если у вас есть изображения, расположенные ниже на веб-странице, они не будут полностью загружаться до тех пор, пока посетитель не соприкоснется с этой областью страницы.

Этот процесс чрезвычайно эффективен для ускорения времени загрузки URL-адреса на вашем веб-сайте.

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

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

Что такое время загрузки?

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

После завершения страница запустит window.onload для завершения результатов скорости. Время загрузки — это верное представление о том, насколько быстро ваш сайт будет правильно загружаться.

Тем не менее, один из серьезных недостатков, обнаруженный в Onload Time, заключается в том, что некоторые элементы загрузки страницы могут не успеть до того, как сработает триггерное событие, например, файлы Javascript, карусели изображений или функции/контент, установленные на временную задержку, поэтому нагрузки в определенном порядке.

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

Что такое время полной загрузки?

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

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

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

Вы полностью контролируете время загрузки?

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

Как вы можете видеть на этом изображении выше, есть некоторые вещи, которые находятся вне вашего контроля. Например, скорость интернет-провайдера человека, посещающего ваш веб-сайт, полностью находится вне вашего контроля.

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

Оптимизация скорости WordPress: вещи, которые вы можете контролировать

1. Хостинг-среда
2. Обновления программного обеспечения
3. Активная тема
4. Активные плагины
5. Оптимизация контента

Вернемся к ленивой загрузке видео на WordPress

Таким образом, в приведенном выше списке по оптимизации скорости WordPress вы можете контролировать последний элемент в списке — это оптимизация контента.

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

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

Эксперимент начинается здесь

Мы пошли дальше и создали установку WordPress по умолчанию, а внутри нее отдельные страницы.

На одной странице есть встроенное видео YouTube, которое было встроено с использованием встроенной опции ядра WordPress путем простого размещения ссылки на видео YouTube в редакторе Gutenberg. Это создает встроенное видео YouTube на странице.

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

Взгляните ниже на ошеломляющие различия между двумя процессами отображения видео в вашем контенте WordPress.

Пример страницы встроенного видео

На изображении ниже показан тест визуализации скорости, проведенный в GTmetrix для страницы с традиционным встроенным видео YouTube.

Пожалуйста, обратите особое внимание на время загрузки и время полной загрузки ниже.

Изображение ниже представляет собой список процессов, которые произошли во время загрузки этой страницы. Пожалуйста, обратите внимание на общее количество запросов.

Пример страницы с отложенной загрузкой видео

Изображение ниже представляет собой тест визуализации скорости, проведенный в GTmetrix для страницы со встроенным видео с отложенной загрузкой.

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

Время полной загрузки также составляет менее 1 секунды по сравнению с более чем 3-секундным временем полной загрузки традиционно встроенного видео.

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

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

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

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

Теперь вы знаете, что отложенная загрузка видео в WordPress — это хорошо… ЧТО ДАЛЬШЕ?

Ранее мы уже объясняли, что существует множество плагинов WordPress, которые позволяют вам лениво загружать изображения на ваш веб-сайт, но не так много плагинов, позволяющих делать это для видео.

Единственными реальными БЕСПЛАТНЫМИ плагинами, ориентированными на ленивую загрузку видео на вашем веб-сайте WordPress, являются плагин Lazy Load for Videos и a3 Lazy Load, о которых вы можете узнать больше, нажав на изображения ниже.

Есть несколько дополнительных плагинов для оптимизации скорости, которые включают эту функцию, которая позволит вам лениво загружать видео с YouTube или iFrames. См. названия этих плагинов ниже.

1. Быстрая производительность Pro
2. WP Ракета

Плагины позволяют не лениво загружать видео на WordPress

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

Эти плагины WordPress для отложенной загрузки видео часто интегрируются только с YouTube и Vimeo. Есть много других решений для видеохостинга, которые вы можете использовать.

Именно здесь у нас есть альтернативное решение, которое позволит вам взять любой фрагмент кода iFrame и превратить его в шедевр ленивой загрузки на вашем веб-сайте.

СУПЕР КРУТОЙ БЕСПЛАТНЫЙ инструмент для ленивой загрузки видео на WordPress

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

Этот сбор называется IFRAMELY, и его можно использовать бесплатно по адресу https://iframely.com/embed.

На изображении ниже показан скриншот инструмента для встраивания IFRAMELY, который поможет вам сгенерировать код для встраивания, необходимый для размещения на вашем веб-сайте и отложенной загрузки видео в WordPress.

Просто подведение итогов

Мы надеемся, что этот пост был полезен и помог вам понять увеличение скорости, которое может быть достигнуто на вашем веб-сайте WordPress, когда вы решите ленивую загрузку любых видео, которые вы используете в своем контенте.

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