Как повысить производительность медиа с ограниченным бюджетом

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

Американский ученый Мейсон Кули ловко описал суровый факт жизни: «Бюджет лишает деньги удовольствия». Бесспорно, средства массовой информации оживляют веб-сайты, добавляя им привлекательности, волнения и интриги, не говоря уже о том, что побуждают оставаться на странице и часто возвращаться к ней. Однако, как неконтролируемые расходы в долгосрочной перспективе предвещают плохое, так и не предусмотренные бюджетом цифровые медиа снижают производительность сайта.

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

Бюджеты производительности

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

— Тим Кадлек

Бюджет производительности как механизм планирования веб-опыта и предотвращения снижения производительности может состоять из следующих критериев:

• Общий вес страницы,
• Общее количество HTTP-запросов,
• время загрузки страницы в определенной мобильной сети,
• Задержка первого ввода (FID)
• Первая содержательная краска (FCP),
• Совокупный сдвиг макета (CLS),
• Самая большая содержательная краска (LCP).

У Виталия Фридмана есть отличный контрольный список, в котором описаны компоненты, влияющие на производительность сети, а также полезные советы по методам оптимизации. Знакомство с этими компонентами позволит вам установить цели производительности .

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

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

Эффективность бизнеса

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

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

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

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

По словам неврологов Массачусетского технологического института, наш мозг может усваивать и понимать визуальную информацию менее чем за 13 миллисекунд, в то время как для понимания текста среднему читателю требуется более 3,3 минуты, часто после повторного чтения и перекрестных ссылок на другие места. Неудивительно, что микровидеоконтент (обычно продолжительностью всего 10–20 секунд) часто вызывает большое вовлечение и увеличивает конверсию.

Привлекательность видео

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

Помимо моего личного опыта, многие исследования подтверждают важность видеоконтента:

• 96% потребителей считают видео полезными при принятии решений о покупках в Интернете.
• 79% онлайн-покупателей предпочитают смотреть видео для получения информации о продукте, а не читать текст на веб-странице.
• Правильно подобранное видео о продукте может повысить конверсию более чем на 80%.

Говоря о доставке видео в Интернете,

«Средний вес видео резко увеличивается с каждым годом, в большей степени на мобильных устройствах, чем на настольных компьютерах. В некоторых случаях это может быть оправдано, поскольку мобильные устройства часто имеют экраны с высоким разрешением, но это также может быть связано с отсутствием возможности предлагать видео разных размеров с использованием только HTML. Многие большие видеоролики в Интернете вручную размещаются на маркетинговых страницах и не имеют сложных медиасерверов для доставки соответствующих размеров, поэтому я надеюсь, что в будущем мы увидим такие же простые HTML-функции для доставки видео, которые мы видим в адаптивных изображениях. ”

— Скотт Джел

То же мнение было выражено в отчете о состоянии потоковой передачи Conviva за четвертый квартал 2020 года (требуется регистрация), в котором отмечалось, что на мобильных телефонах возникало на 20 % больше проблем с буферизацией , на 19 % чаще сбои при запуске видео и на 5 % дольше время запуска, чем на других устройствах.

Помимо проблем с рендерингом, доставка видео также может увеличить затраты на пропускную способность, особенно если вы не можете доставлять оптимальные форматы браузера. Кроме того, если вы не используете сеть доставки контента (CDN) или несколько сетей CDN для сопоставления пользователей с ближайшими пограничными регионами для сокращения задержек — практика, называемая субоптимальной маршрутизацией, — вы можете замедлить начало видео.

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

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

Искусство совмещать производительность с медиаконтентом

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

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

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

Поймите свое текущее использование

Изучите вес своих веб-страниц и размер их медиаресурсов. Эксперт по веб-исследованиям Тэмми Эвертс рекомендует убедиться, что размер страниц не превышает 1 МБ для мобильных устройств и менее 2 МБ для всего остального. Кроме того, определите ресурсы, которые отображаются на критических страницах.

Например, можете ли вы заменить абзац текста и связанные с ним изображения коротким видео? Как это решение повлияет на ваши бизнес-цели? На этом этапе вам, возможно, потребуется просмотреть свой мониторинг реальных пользователей (RUM) и аналитику и определить критические страницы, которые приводят к более высоким коэффициентам конверсии и вовлеченности.

Кроме того, не забудьте синтетически отслеживать Core Web Vitals (CWV) Google как часть своего набора инструментов с помощью таких инструментов, как LightHouse. Вы также можете измерять CWV с помощью мониторинга реальных пользователей (RUM), такого как CrUX. Поскольку CWV также будут сигналом для поисковых роботов Google, имеет смысл отслеживать и оптимизировать эти показатели: наибольшая отрисовка контента (LCP), задержка первого ввода (FID) и совокупное смещение макета (CLS).

Подавать в правильном формате

Подавайте изображения или видео в наиболее подходящем формате с точки зрения размера и разрешения для устройства просмотра или браузера. Для этой цели вам может понадобиться образ CDN. Кроме того, создавайте варианты, такие как WebM, AVIF, JPEG-XL, HEIC и т. д., и выборочно обслуживайте нужный тип контента на основе запрашиваемых заголовков User-Agent и Accept.

Для одноразовых конверсий вы можете попробовать такие инструменты, как Squoosh.app или avif.io. Связанная с этим практика заключается в преобразовании анимированных GIF-файлов в видео. Дополнительные сведения см. в этой статье Web.dev. Хотите попробовать настроить рабочий процесс для публикации видео? Смотрите отличные советы в статье Оптимизация видео по размеру и качеству.

Подавайте правильный размер

Более 41% изображений на мобильных устройствах имеют неправильный размер. Таким образом, вместо того, чтобы использовать фиксированную ширину, обрезайте изображения и видео в соответствии с размером контейнера с помощью таких инструментов, как Lazysizes. Более того, инструменты искусственного интеллекта, которые могут обнаруживать области интереса при обрезке изображений, могут сэкономить вам массу времени и усилий. Вы также можете использовать встроенную ленивую загрузку для изображений, которые находятся ниже сгиба.

Добавляйте субтитры к своим видео

Почти 85% видео воспроизводятся без звука. Добавление к ним субтитров не только обеспечивает доступность, но и привлекает внимание аудитории и повышает вовлеченность. Однако расшифровка видео может быть утомительной работой; вы можете работать со службой транскрипции на основе ИИ и улучшать ее, чтобы автоматизировать рабочий процесс.

Доставка через несколько CDN

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

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

Поэтапный рендеринг видео

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

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

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

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

Подведение итогов

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

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

— Тим Кадлек

Это здравый совет, который нужно иметь в виду.