Cómo aumentar el rendimiento de los medios con un presupuesto

Este artículo ha sido amablemente respaldado por nuestros queridos amigos de Cloudinary, quienes ayudan a la comunidad a crear, administrar y entregar sus experiencias digitales de manera rápida y sencilla en cualquier navegador, dispositivo y ancho de banda. ¡Gracias!

El erudito estadounidense Mason Cooley describió hábilmente un duro hecho de la vida: “Un presupuesto le quita diversión al dinero”. Incuestionablemente, los medios animan los sitios web, agregando atractivo, emoción e intriga, por no hablar de incentivos para permanecer en una página y volver a visitarla con frecuencia. Sin embargo, así como el gasto fuera de control es un mal augurio a largo plazo, los medios digitales no presupuestados diezman el rendimiento del sitio.

Un ejemplo de ello: una ralentización de la carga de una página de un segundo podría costarle a Amazon 1600 millones de dólares en ventas anuales. De los muchos factores que afectan la velocidad de carga de la página, los medios son importantes. De ahí la imperiosa necesidad de priorizar la optimización de los medios. Al gastar su dinero en esa tarea y al presupuestar sus medios, obtendrá importantes ahorros y beneficios a largo plazo.

Presupuestos de desempeño

“Un presupuesto de desempeño es '... justo lo que parece: usted establece un 'presupuesto' en su página y no permite que la página lo exceda. Este puede ser un tiempo de carga específico, pero por lo general es una conversación más fácil de tener cuando desglosas el presupuesto en la cantidad de solicitudes o el tamaño de la página".

—Tim Kadlec

Un presupuesto de rendimiento como mecanismo para planificar una experiencia web y prevenir el deterioro del rendimiento podría consistir en los siguientes criterios:

• Peso total de la página,
• Número total de solicitudes HTTP,
• Tiempo de carga de la página en una red móvil en particular,
• Primera demora de entrada (FID)
• Primera pintura con contenido (FCP),
• Cambio de diseño acumulativo (CLS),
• Pintura con contenido más grande (LCP).

Vitaly Friedman tiene una excelente lista de verificación que describe los componentes que afectan el rendimiento web junto con consejos útiles sobre técnicas de optimización. Familiarizarse con esos componentes le permitirá establecer objetivos de rendimiento .

Con objetivos de rendimiento claramente documentados, varios equipos pueden tener conversaciones significativas sobre la entrega óptima de contenido. Por ejemplo, un presupuesto puede ayudarlos a decidir si una página debe contener cinco imágenes, o tres imágenes y un video, y aun así permanecer dentro de los límites planificados.

Sin embargo, tener un presupuesto de desempeño como una métrica independiente podría no ser de mucha ayuda. Es por eso que debemos correlacionar el desempeño con las metas de la organización.

El rendimiento del negocio

Si derrocha una gran cantidad de bytes en videos e imágenes no óptimos, la experiencia de medios enriquecidos ya no será tan rica. Una organización existe para lograr resultados , como atraer a las personas a comprar, educarlas, motivarlas o buscar ayuda y voluntarios. Cualquier persona con presencia en la web apreciaría la relación entre el efecto de varias medidas de rendimiento en las métricas comerciales.

WPOStats destaca literalmente cientos de estudios de casos que muestran cómo una caída en el rendimiento, de unos pocos cientos de milisegundos a segundos, podría resultar en una caída masiva en las ventas anuales. Dibujar ese tipo de relación ayuda en gran medida a rastrear el efecto del desempeño en el negocio y, en última instancia, a construir una cultura de desempeño para las organizaciones.

De manera similar, los sitios lentos pueden tener un impacto dramático en la conversión. Un desafío difícil que enfrentan las empresas en línea es encontrar el equilibrio adecuado entre atraer a la audiencia y mantenerse dentro del presupuesto de rendimiento.

Entonces, no sorprende que un componente crítico para la participación de la audiencia sean los medios visuales optimizados , por ejemplo, un video cautivador que entreteje una historia sobre su producto o servicio junto con imágenes relevantes, interesantes y atractivas.

Según los neurocientíficos del MIT, nuestro cerebro puede absorber y comprender los medios visuales en menos de 13 milisegundos, mientras que el lector promedio puede tardar más de 3,3 minutos en comprender el texto, a menudo después de volver a leerlo y hacer referencias cruzadas en otros lugares. No es de extrañar entonces que el contenido de microvideo (generalmente de solo 10 a 20 segundos de duración) a menudo genere grandes interacciones y ganancias de conversión.

Apelación de videos

Al comprar en línea, esperamos ver imágenes detalladas del producto . Durante años, he llegado a preferir buscar productos que se complementen con videos que muestren, por ejemplo, cómo usar el producto o tal vez cómo ensamblarlo, o que demuestren casos de uso de la vida real.

Además de mi experiencia personal, muchas investigaciones dan fe de la importancia del contenido de video:

• El 96% de los consumidores encuentran útiles los videos cuando toman decisiones de compra en línea.
• El 79% de los compradores en línea prefieren ver un video para obtener información sobre un producto en lugar de leer el texto en una página web.
• El video del producto correcto puede aumentar las conversiones en más del 80%.

Hablando de la entrega de videos en la web,

“El peso promedio de los videos aumenta dramáticamente cada año, más en dispositivos móviles que en computadoras de escritorio. En algunos casos, eso puede estar justificado, ya que los dispositivos móviles suelen tener pantallas de alta resolución, pero también puede deberse a la falta de capacidad para ofrecer diferentes tamaños de video solo con HTML. Muchos videos grandes en la web se colocan a mano en páginas de marketing y no tienen servidores de medios sofisticados para entregar tamaños apropiados, por lo que espero que en el futuro veamos funciones HTML simples similares para la entrega de videos que vemos en imágenes receptivas. ”

—Scott Jehl

El mismo sentimiento fue transmitido por Conviva's Q4 2020 State of Streaming (se requiere registro), que señaló que los teléfonos móviles experimentaron un 20 % más de problemas de almacenamiento en búfer , un 19 % más de errores de inicio de video y un 5 % más de tiempo de inicio que otros dispositivos.

Además de los problemas de renderizado, la entrega de video también puede aumentar los costos de ancho de banda, especialmente si no puede entregar los formatos óptimos del navegador. Además, si no está utilizando una red de entrega de contenido (CDN) o múltiples CDN para asignar a los usuarios a las regiones de borde más cercanas para reducir las latencias, una práctica llamada enrutamiento subóptimo, puede ralentizar el inicio del video.

Del mismo modo, las imágenes no optimizadas fueron la causa principal de la hinchazón de la página. Según Web Almanac, la diferencia en los bytes de imagen enviados a dispositivos móviles o de escritorio es muy pequeña, lo que equivale a un mayor desperdicio de ancho de banda para dispositivos que en realidad no necesitan todos los bytes adicionales.

Sin duda, exagerar con un contenido atractivo pero no optimizado perjudica los objetivos comerciales, y ahí es donde entra en juego el fino arte del equilibrio.

El arte de equilibrar el rendimiento con el contenido multimedia

Si bien los medios enriquecidos pueden promover la participación de los usuarios, debemos equilibrar el costo de entregarlos con el rendimiento de su sitio web y los objetivos comerciales. Una alternativa es alojar y entregar videos a través de un tercero como YouTube o Vimeo.

Sin embargo, a pesar de los ahorros de ancho de banda, ese enfoque tiene un costo. Como propietario del contenido, no puede crear una experiencia de marca totalmente personalizada ni ofrecer personalización. Y, por supuesto, debe alojar y entregar sus imágenes.

No tienes que descargar tu contenido. También hay otras opciones disponibles. Considere renovar su sistema para una entrega de medios óptima haciendo lo siguiente:

Comprender su uso actual

Estudie el peso de sus páginas web y el tamaño de sus recursos multimedia. La experta en investigación web Tammy Everts recomienda asegurarse de que las páginas tengan menos de 1 MB de tamaño para dispositivos móviles y menos de 2 MB para todo lo demás. Además, identifique los recursos que se muestran en las páginas críticas.

Por ejemplo, ¿puede reemplazar un párrafo de texto y las imágenes asociadas con un video corto? ¿Cómo afectaría esa decisión a sus objetivos comerciales? En esta etapa, es posible que deba revisar su Real User Monitoring (RUM) y Analytics e identificar las páginas críticas que conducen a mayores tasas de conversión y participación.

Además, asegúrese de realizar un seguimiento sintético de Core Web Vitals (CWV) de Google como parte de su conjunto de herramientas con herramientas como LightHouse. También puede medir los CWV a través del monitoreo de usuarios reales (RUM) como CrUX. Dado que los CWV también serán una señal para Google para los rastreadores, tiene sentido monitorear y optimizar esas métricas: pintura con contenido más grande (LCP), primer retraso de entrada (FID) y cambio de diseño acumulativo (CLS).

Sirve el formato correcto

Servir imágenes o videos en el formato más apropiado en términos de tamaño y resolución para el dispositivo de visualización o navegador. Es posible que necesite una CDN de imagen para ese propósito. Alternativamente, cree variantes como WebM, AVIF, JPEG-XL, HEIC, etc. y entregue de manera selectiva el tipo de contenido correcto en función de los encabezados de aceptación y de agente de usuario solicitados.

Para conversiones únicas, puede probar herramientas como Squoosh.app o avif.io. Una práctica relacionada es convertir GIF animados en videos. Para obtener más información, consulte este artículo de Web.dev. ¿Quiere intentar configurar un flujo de trabajo para manejar la publicación de videos? Vea los excelentes consejos en el artículo Optimización de video para tamaño y calidad.

Sirve el tamaño adecuado

Más del 41% de las imágenes en dispositivos móviles tienen un tamaño inadecuado. Entonces, en lugar de mostrar un ancho fijo, recorte sus imágenes y videos para que se ajusten al tamaño del contenedor con herramientas como Lazysizes. Mejor aún, las herramientas de inteligencia artificial que pueden detectar áreas de interés mientras recortan imágenes podrían ahorrarle mucho tiempo y esfuerzo. También puede aprovechar la carga diferida nativa para las imágenes que están en la mitad inferior de la página.

Agrega subtítulos a tus videos

Casi el 85% de los videos se reproducen sin sonido. Agregarles subtítulos no solo proporciona una experiencia accesible, sino que captaría la atención de la audiencia y aumentaría la participación. Sin embargo, transcribir videos puede ser un trabajo tedioso; puede trabajar con un servicio de transcripción basado en IA y mejorarlo para automatizar el flujo de trabajo.

Entrega a través de múltiples CDN

Los CDN pueden aliviar la latencia de última milla, acortar el tiempo de inicio de un video y reducir potencialmente los problemas de almacenamiento en búfer. Según un estudio de Citrix, una estrategia multi-CDN puede reducir aún más la latencia y ofrecer disponibilidad continua en caso de interrupciones localizadas en los nodos de borde de la CDN.

En lugar de aprovechar múltiples herramientas discretas, podría explorar un producto como Media Optimizer de Cloudinary, que optimiza de manera efectiva y eficiente los medios, brindando el formato y la calidad correctos a través de nodos perimetrales de múltiples CDN. En otras palabras, Media Optimizer optimiza tanto la calidad como el tamaño, brindando una alta fidelidad visual en archivos pequeños.

Procesar video progresivamente

Se ha demostrado que la reproducción automática de videos de vista previa en YouTube aumenta el tiempo de visualización de videos en más del 90%. La reproducción automática de video tiene pocos beneficios y muchos inconvenientes, por lo que es importante tener cuidado cuando se usa y cuando no se usa. Es importante tener la opción de pausar el video como mínimo.

Una buena manera de equilibrar el presupuesto del tamaño de la página sería ofrecer primero vistas previas de video creadas por IA e imágenes de póster únicamente , cargando el video completo solo si el usuario hace clic en él. De esa manera, puede eliminar las descargas innecesarias y acelerar la carga de la página.

Alternativamente, cargue un video de vista previa al principio y deje que el reproductor reproduzca automáticamente la versión completa. Una vez que se completa la vista previa, el reproductor verifica el tipo de conexión del dispositivo con la API de conexión de red y, si el usuario tiene buena conectividad, cambia la fuente de la vista previa al video real.

Puede consultar una página de muestra para ver una demostración. Aquí hay un consejo : dado que las CDN pueden detectar tipos de conexión de red de manera más confiable, su código de calidad de producción podría aprovechar la CDN para detectar la velocidad de la red, en función de lo cual su código de cliente podría cargar progresivamente el video de formato largo.

Terminando

En el futuro, gracias a su notable capacidad para contar historias de una manera que las palabras no pueden, los medios visuales seguirán siendo un elemento dominante para los sitios web y las aplicaciones móviles. Sin embargo, determinar el contenido correcto para entregar depende tanto de su estrategia comercial como del rendimiento del sitio.

“Un presupuesto de rendimiento no guía sus decisiones sobre qué contenido debe mostrarse. Más bien, se trata de cómo elige mostrar ese contenido. Eliminar contenido importante por completo para disminuir el peso de una página no es una estrategia de rendimiento”.

—Tim Kadlec

Ese es un buen consejo a tener en cuenta.