От этого никуда не деться – видеофайлы большие. На самом деле настолько большой, что они составляли 81% интернет-трафика в 2021 году. Видео, загруженные на любую веб-страницу, вероятно, будут самым большим активом, с которым придется иметь дело браузеру. Если вы не делаете что-то чрезвычайно необычное (и, вероятно, нежелательное) с изображениями JavaScript, то есть.
Это может привести к тому, что некоторые неопытные веб-разработчики и SEO-специалисты посмотрят на каскадную диаграмму инструмента измерения скорости сайта и заявят, что «видео плохо влияет на скорость сайта». Хотя это неверно в широком применении, есть определенные рекомендации, о которых вам следует знать. Правильная настройка гарантирует, что видео не замедлит работу вашего сайта, а ваш сайт не замедлит работу вашего видео.
Цель состоит в том, чтобы обеспечить плавное воспроизведение видео без буферизации и невероятно быстрое время загрузки всех ресурсов на вашем веб-сайте. В этом начинании вы должны следить за своими основными веб-жизненными показателями — наибольшей отрисовкой содержимого (LCP), задержкой первого ввода (FID) и кумулятивным смещением макета (CLS).
Совет 1. Размещайте свои видео через CDN
Самый простой способ получить видео на своем веб-сайте WordPress — просто загрузить его в свою медиатеку. После этого вы можете включить его на страницу или в публикацию с помощью видеоблока Гутенберга.
Это также, вероятно, худший способ добавления видео. Это рецепт гарантированной буферизации, как только пользователь нажимает кнопку воспроизведения. И это негативно влияет на задержку первого ввода (FID). Такая настройка требует, чтобы браузер загружал полный (неоптимизированный) видеофайл непосредственно с вашего сервера по клику, без каких-либо откатов из-за проблем с сервером, местоположения пользователя или низкой скорости соединения.
Ознакомьтесь с руководством Yoast по CDN для получения полной информации о том, как лучше настроить это. Обратите внимание, что если вы встраиваете видео из таких сервисов, как YouTube или Wistia, они управляют доставкой видеоресурсов из своей собственной сети CDN.
Совет 2. Используйте адаптивную потоковую передачу
Тег HTML5
Проблема здесь со скоростью сайта заключается в том, что вы хотите загрузить большой видеофайл или видеофайл с высоким разрешением. При менее чем звездном соединении все, что происходит, — это огромная буферизация, в то время как браузер пытается загрузить достаточно файла, чтобы начать воспроизведение. Это очень плохо для FID.
Лучший способ решить эту проблему — использовать так называемую адаптивную потоковую передачу. Адаптивная потоковая передача — это когда серверу доступны несколько различных вариантов одного видео с разным разрешением и битрейтом. Затем сервер предоставляет версию видео с наилучшим качеством, которое может обработать любое данное соединение. При адаптивной потоковой передаче, если ваш пользователь использует мобильное устройство на вершине удаленного холма и работает только с соединением 500 кбит/с, сервер предоставит SD-видео с битрейтом около 300 кбит/с, а не идеальный вариант 4K со скоростью 35 Мбит/с.
Как вы можете это сделать? Ну, ты можешь настройте его самостоятельно, используя MPEG-DASH. Или перейдите на стороннюю платформу видеохостинга, например YouTube или же Вистия; они используют адаптивную потоковую передачу как часть стека технологий доставки видео.
Совет 3. Экспортируйте видеофайлы с переменным битрейтом
Еще один совет для повышения скорости воспроизведения — максимально уменьшить размер видеофайла(ов) в процессе экспорта. Переменный битрейт (VBR) — это средство сжатия, которое адаптирует битрейт видеофайла в зависимости от сложности цветов и движения в любой точке видео. Целью этого является сохранение его как можно ниже без заметного ухудшения качества. Например, быстро движущиеся последовательности действий с большим количеством сложных цветов требуют гораздо более высокого битрейта. Но более статичная говорящая голова, снятая на простом фоне, отлично работает с более низким битрейтом. VBR позволит вашему видеокомпрессору разумно принимать решения о соответствующих битрейтах во время экспорта, что уменьшит размер файла видео.
VBR можно использовать с наиболее распространенными кодеками веб-видео, такими как VP9 и h.264.
Совет 3. Избегайте зацикливания автоматически воспроизводимых видео (или, по крайней мере, делайте их короткими и беззвучными)
Автовоспроизведение видео остается популярным, особенно в качестве фона на домашних страницах. Но плохо реализованные они могут вызвать всевозможные проблемы со скоростью сайта.
На мой взгляд, их лучше избегать. Они почти всегда значительно увеличивают время до самой крупной отрисовки содержимого (LCP). Вынуждая воспроизведение видео одновременно с загрузкой основных элементов HTML, изображений и JavaScript страницы, вы требуете от браузера одновременного выполнения огромного количества операций. Он будет делать это вяло, если скорость соединения плохая.
Если у вас должны быть зацикленные видео с автоматическим воспроизведением, делайте их как можно короче (в идеале менее 10 секунд). Также экспортируйте файлы без звука, чтобы размер файла был как можно меньше.
Совет 4. Загружайте видеоконтент асинхронно
Есть два преимущества использования асинхронного JavaScript в доставке видео. Во-первых, вы можете запретить видео блокировать рендеринг других элементов страницы. И, во-вторых, вы можете загрузить ресурсы, наиболее важные для самого большого содержимого (LCP) и кумулятивного смещения макета (CLS), перед загрузкой самого большого видеофайла.
Если вы используете AJAX для загрузки вашего видеоплеера, как только клиент отрисовывает основной исходный сценарий (обычно всего несколько сотен килобайт), все остальное может быть быстро загружено в фоновом режиме. Тем временем клиент отображает остальные элементы страницы. Кроме того, кадр и миниатюра видеоплеера — те элементы, которые видны до того, как пользователь нажмет кнопку «Воспроизвести», — могут быть установлены по приоритету и загружены немедленно, чтобы положительно повлиять на основные жизненно важные функции сети.
Это именно то, что делает плагин Yoast Video SEO для WordPress, чтобы ускорить доставку видео, гарантируя, что даже самые большие видеофайлы не будут негативно влиять на работу пользователя или производительность поиска.
Совет 5: не размещайте видео за JS, блокирующим рендеринг
Иногда скроллеры или карусели содержат видео в качестве альтернативы изображениям.
К сожалению, плагины, которые работают с ними, часто заканчивают тем, что загружают каждое изображение по срабатыванию триггера. Это может означать, что другой JavaScript блокирует загрузку видео. Когда это происходит, клиенту необходимо полностью загрузить все видеоактивы, когда видео появляется в карусели, а не выполнять часть тяжелой работы до того, как пользователь или поисковый робот доберется туда.
Это снижает скорость сайта и задержку первого ввода, но не только это. Это также может повредить SEO, поскольку робот Googlebot не может найти и проиндексировать видео.
Чтобы проверить, может ли робот Googlebot анализировать вашу реализацию видео, вы можете проверить новый Отчет о страницах видео в Google Search Console.
Резюме
В отношении скорости видео и сайта следует помнить следующие основные принципы:
- Используйте настройку сервера специально для работы с большими медиафайлами (CDN).
- Убедитесь, что загружаемый видеофайл адаптирован к скорости соединения клиента (адаптивная потоковая передача).
- Сохраняйте видеофайлы как можно меньшего размера без ущерба для качества (переменный битрейт).
- Загрузите основные визуальные элементы перед загрузкой фактического видеофайла (асинхронная доставка).
- Не запрещать загрузку видео с другими ресурсами страницы (JavaScript, блокирующий рендеринг)
Для получения дополнительной информации о скорости сайта ознакомьтесь с остальными нашими сообщениями и руководствами!
Фил Ноттингем — маркетолог, специализирующийся на видео SEO, стратегии бренда и поисковой оптимизации.
