Самый эффективный метод встраивания видео в WordPress

Ах, помните ли вы времена, когда коммутируемое соединение и подключение Edge (2G) были роскошью, а просмотр видео на YouTube, казалось, проверял наше терпение?

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

Но самое лучшее сейчас то, что этого больше не происходит, и быстрое подключение к Интернету стало новой нормой. Благодаря технологии 5G люди теперь могут без проблем смотреть видео на YouTube даже в разрешении 4K.

Текущий сценарий использования видео на веб-сайте

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

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

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

Но дело в том, что не все делают это правильно. Большинство из них не знают, как правильно вставлять видео в WordPress, и в результате скорость их сайта замедляется.

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

WordPress с видео: тест Core Web Vital

Перейдем сразу к тестам и результатам, не затягивая и не хвастаясь дальше.

Во-первых, в целях тестирования мы взяли простой и базовый веб-сайт WordPress без каких-либо видео и графики и протестировали его.

Результаты были следующими:

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

Но когда мы добавили видео YouTube на домашнюю страницу сайта WordPress и снова запустили тест. Результаты были удивительными;

• Только для одного видео показатель упал до 65%, и все остальные показатели остались такими же. Он был резко снижен на 35%, и эта тенденция может ухудшиться с добавлением большего количества видео.

Теперь вы можете подумать, в чем же решение?

Что вам нужно, чтобы это исправить?

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

1. Выберите известную платформу видеохостинга.

Во-первых, было бы здорово, если бы вы размещали или загружали видео на платформу бесплатного видеохостинга, например YouTube, Vimeo или Wistia, а не размещали его на своем веб-сервере. Это не только сэкономит ресурсы вашего сервера, но и снизит нагрузку на него и не повлияет на скорость сервера.

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

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

2. Встраивайте видео YouTube без файлов cookie.

Вы можете быть удивлены, узнав, что помимо стандартной вставки YouTube существует также специальная версия под названием youtube-nocookie.com.

Встраивание видео YouTube из стандартной версии влечет за собой множество других нежелательных элементов, таких как файлы cookie, скрипты и т. д., которые не являются обязательными. Поэтому, чтобы сделать это более эффективным, YouTube представил версию youtube-nocookie.com, которая легче и не оказывает существенного влияния на показатель скорости вашей страницы.

Вот несколько интересных фактов о Youtube-nocookie.com

• Это альтернативный домен для встраивания видео с YouTube.
• Этот домен используется для встраивания видео без установки файлов cookie в целях отслеживания.
• Обычное встраивание YouTube (youtube.com) может устанавливать файлы cookie в браузере зрителя.
• Домен «youtube-nocookie.com» обслуживает встроенный проигрыватель без установки файлов cookie.
• Это полезно для веб-сайтов, которые уделяют приоритетное внимание конфиденциальности пользователей и стремятся свести к минимуму использование файлов cookie.
• Использование «youtube-nocookie.com» гарантирует, что встроенные видео не будут способствовать ненужному отслеживанию посетителей сайта.

Все, что вам нужно, просто изменить URL-адрес видео YouTube, заменив «youtube.com» на «youtube-nocookie.com», и все готово.

3. Используйте плагины LazyLoad

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

Вот как это происходит:

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

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

Читайте: 22 лучших способа ускорить производительность WordPress

4. Фасадная техника

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

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

Для справки и лучшего понимания вот пример.

Этот подход весьма эффективен и не нагружает ваш сайт WordPress видео YouTube, если в этом нет необходимости.

Если этот подход с лайтбоксом вам не подходит, используйте популярный плагин WordPress под названием «LazyLoad Plugin». Он работает с oEmbed и заменяет встроенные видео YouTube и Vimeo кликабельным изображением предварительного просмотра.

Краткое содержание

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

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

Рахул

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