Como aumentar o desempenho da mídia em um orçamento

Este artigo foi gentilmente apoiado por nossos queridos amigos da Cloudinary, que ajudam a comunidade a criar, gerenciar e entregar de forma rápida e fácil suas experiências digitais em qualquer navegador, dispositivo e largura de banda. Obrigado!

O estudioso americano Mason Cooley descreveu habilmente um fato difícil da vida: “Um orçamento tira a graça do dinheiro”. Inquestionavelmente, a mídia anima os sites, adicionando apelo, entusiasmo e intriga, sem falar nas tentações para permanecer em uma página e revisitá-la com frequência. No entanto, assim como os gastos fora de controle são um mau presságio a longo prazo, a mídia digital não orçada dizima o desempenho do site.

Um caso em questão: uma desaceleração de carregamento de página de apenas um segundo pode custar à Amazon US$ 1,6 bilhão em vendas anuais. Dos muitos fatores que afetam a velocidade de carregamento da página, a mídia é um fator significativo. Daí a extrema necessidade de priorizar a otimização da mídia. Ao gastar seu dinheiro exatamente nessa tarefa e orçamentar sua mídia, você obterá economias e benefícios significativos a longo prazo.

Orçamentos de desempenho

“Um orçamento de desempenho é '... exatamente o que parece: você define um 'orçamento' em sua página e não permite que a página ultrapasse isso. Esse pode ser um tempo de carregamento específico, mas geralmente é uma conversa mais fácil quando você divide o orçamento em número de solicitações ou tamanho da página.”

— Tim Kadlec

Um orçamento de desempenho como mecanismo para planejar uma experiência na Web e evitar a queda de desempenho pode consistir nos seguintes critérios:

• Peso total da página,
• Número total de solicitações HTTP,
• Tempo de carregamento da página em uma rede móvel específica,
• Atraso da primeira entrada (FID)
• Primeira pintura de conteúdo (FCP),
• Mudança de layout cumulativa (CLS),
• Maior pintura de conteúdo (LCP).

Vitaly Friedman tem uma excelente lista de verificação que descreve os componentes que afetam o desempenho da web, juntamente com dicas úteis sobre técnicas de otimização. Familiarizar-se com esses componentes permitirá que você defina metas de desempenho .

Com metas de desempenho claramente documentadas, várias equipes podem ter conversas significativas sobre a entrega ideal de conteúdo. Por exemplo, um orçamento pode ajudá-los a decidir se uma página deve conter cinco imagens — ou três imagens e um vídeo — e ainda permanecer dentro dos limites planejados.

No entanto, ter um orçamento de desempenho como uma métrica independente pode não ajudar muito. É por isso que devemos correlacionar o desempenho aos objetivos organizacionais.

Desempenho dos negócios

Se você gastar muitos bytes em vídeos e imagens não ideais, a experiência de mídia avançada não será mais tão rica. Uma organização existe para alcançar resultados , como atrair as pessoas para comprar, educá-las, motivá-las ou buscar ajuda e voluntários. Qualquer pessoa com presença na web apreciaria a relação entre o efeito de várias medidas de desempenho nas métricas de negócios.

O WPOStats destaca literalmente centenas de estudos de caso mostrando como uma queda no desempenho – de algumas centenas de milissegundos a segundos – pode resultar em uma queda maciça nas vendas anuais. Desenhar esse tipo de relacionamento ajuda muito a rastrear o efeito do desempenho nos negócios e, em última análise, construir uma cultura de desempenho para as organizações.

Da mesma forma, sites lentos podem ter um impacto dramático na conversão. Um grande desafio que as empresas on-line enfrentam é encontrar o equilíbrio certo entre envolver o público e permanecer dentro do orçamento de desempenho.

Não é surpreendente, então, que um componente crítico para o envolvimento do público seja a mídia visual otimizada , por exemplo, um vídeo cativante que tece uma história sobre seu produto ou serviço junto com recursos visuais relevantes, interessantes e atraentes.

De acordo com neurocientistas do MIT, nosso cérebro pode absorver e entender a mídia visual em menos de 13 milissegundos, enquanto o texto pode levar mais de 3,3 minutos para o leitor médio compreender, muitas vezes depois de reler e fazer referências cruzadas em outros lugares. Não é à toa que o conteúdo de microvídeo (geralmente apenas 10 a 20 segundos) geralmente oferece grandes engajamentos e ganhos de conversão.

Apelo de vídeos

Ao fazer compras online, esperamos ver imagens detalhadas do produto . Durante anos, passei a preferir navegar em produtos que são complementados por vídeos que mostram, por exemplo, como usar o produto ou talvez como montá-lo, ou que demonstram casos de uso da vida real.

Além da minha experiência pessoal, muitas pesquisas atestam a importância do conteúdo de vídeo:

• 96% dos consumidores consideram os vídeos úteis ao tomar decisões de compra online.
• 79% dos compradores online preferem assistir a um vídeo para obter informações sobre um produto em vez de ler o texto em uma página da web.
• O vídeo do produto certo pode aumentar as conversões em mais de 80%.

Falando sobre a entrega de vídeos na web,

“O peso médio do vídeo está aumentando dramaticamente a cada ano, mais em dispositivos móveis do que em computadores. Em alguns casos, isso pode ser garantido, pois os dispositivos móveis geralmente têm telas de alta resolução, mas também pode ser devido à falta de capacidade de oferecer diferentes tamanhos de vídeo usando apenas HTML. Muitos vídeos grandes na web são colocados manualmente em páginas de marketing e não possuem servidores de mídia sofisticados para fornecer tamanhos apropriados, então espero que no futuro vejamos recursos HTML simples semelhantes para entrega de vídeo que vemos em imagens responsivas. ”

— Scott Jehl

O mesmo sentimento foi transmitido pelo Conviva's Q4 2020 State of Streaming (registro necessário), que observou que os telefones celulares tiveram 20% mais problemas de buffer , uma falha de inicialização de vídeo 19% maior e 5% mais tempo de início do que outros dispositivos.

Além de problemas de renderização, a entrega de vídeo também pode aumentar os custos de largura de banda, especialmente se você não puder fornecer os formatos ideais do navegador. Além disso, se você não estiver usando uma rede de entrega de conteúdo (CDN) ou várias CDNs para mapear os usuários para as regiões de borda mais próximas para latências reduzidas — uma prática chamada roteamento abaixo do ideal — você pode retardar o início do vídeo.

Da mesma forma, imagens não otimizadas foram a principal causa do inchaço da página. De acordo com o Web Almanac, o diferencial em bytes de imagem enviados para dispositivos móveis ou desktops é muito pequeno, o que representa um desperdício adicional de largura de banda para dispositivos que realmente não precisam de todos os bytes extras.

Sem dúvida, exagerar com um conteúdo envolvente, mas não otimizado, prejudica os objetivos de negócios, e é aí que a arte do equilíbrio entra em jogo.

A arte de equilibrar desempenho com conteúdo de mídia

Embora a mídia avançada possa promover o envolvimento do usuário, precisamos equilibrar o custo de fornecê-la com o desempenho do seu site e as metas de negócios. Uma alternativa é hospedar e entregar vídeos por meio de terceiros, como YouTube ou Vimeo.

Apesar da economia de largura de banda, no entanto, essa abordagem tem um custo. Como proprietário do conteúdo, você não pode criar uma experiência de marca totalmente personalizada ou oferecer personalização. E, claro, você precisa hospedar e entregar suas imagens.

Você não precisa descarregar seu conteúdo. Há também outras opções disponíveis. Considere renovar seu sistema para entrega de mídia ideal fazendo o seguinte:

Entenda seu uso atual

Estude o peso de suas páginas da web e o tamanho de seus ativos de mídia. A especialista em pesquisa na Web Tammy Everts recomenda garantir que as páginas tenham menos de 1 MB de tamanho para dispositivos móveis e menos de 2 MB para todo o resto. Além disso, identifique os recursos que são exibidos em páginas críticas.

Por exemplo, você pode substituir um parágrafo de texto e as imagens associadas por um vídeo curto? Como essa decisão afetaria seus objetivos de negócios? Nesse estágio, talvez seja necessário revisar seu Real User Monitoring (RUM) e Analytics e identificar as páginas críticas que levam a taxas mais altas de conversão e engajamento.

Além disso, certifique-se de rastrear sinteticamente os Core Web Vitals (CWVs) do Google como parte de seu kit de ferramentas com ferramentas como o LightHouse. Você também pode medir CWVs por meio de monitoramento de usuário real (RUM) como CrUX. Como os CWVs também serão um sinal para o Google para os rastreadores, faz sentido monitorar e otimizar essas métricas: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).

Sirva o formato certo

Exiba imagens ou vídeos no formato mais adequado em termos de tamanho e resolução para o dispositivo de visualização ou navegador. Você pode precisar de uma CDN de imagem para essa finalidade. Como alternativa, crie variantes como WebM, AVIF, JPEG-XL, HEIC, etc. e forneça seletivamente o tipo de conteúdo correto com base nos cabeçalhos User-Agent e Accept.

Para conversões pontuais, você pode experimentar ferramentas como Squoosh.app ou avif.io. Uma prática relacionada é converter GIFs animados em vídeos. Para obter mais informações, consulte este artigo Web.dev. Quer tentar configurar um fluxo de trabalho para lidar com a publicação de vídeos? Veja as ótimas dicas no artigo Otimizando o tamanho e a qualidade do vídeo.

Sirva do tamanho certo

Mais de 41% das imagens em dispositivos móveis estão dimensionadas incorretamente. Portanto, em vez de servir uma largura fixa, corte suas imagens e vídeos para caber no tamanho do contêiner com ferramentas como Lazysizes. Melhor ainda, as ferramentas de IA que podem detectar áreas de interesse enquanto cortam imagens podem economizar muito tempo e esforço. Você também pode aproveitar o carregamento lento nativo para imagens que estão abaixo da dobra.

Adicione legendas aos seus vídeos

Quase 85% dos vídeos são reproduzidos sem som. Adicionar legendas a eles não fornece apenas uma experiência acessível, mas captura a atenção do público e aumenta o engajamento. No entanto, transcrever vídeos pode ser um trabalho tedioso; você pode trabalhar com um serviço de transcrição baseado em IA e melhorá-lo para automatizar o fluxo de trabalho.

Entregue por meio de vários CDNs

As CDNs podem aliviar a latência de última milha, diminuir o tempo de início de um vídeo e potencialmente reduzir os problemas de buffer. De acordo com um estudo da Citrix, uma estratégia multi-CDN pode reduzir ainda mais a latência e oferecer disponibilidade contínua em caso de interrupções localizadas nos nós de borda da CDN.

Em vez de aproveitar várias ferramentas discretas, você pode explorar um produto como o Media Optimizer da Cloudinary, que otimiza a mídia de maneira eficaz e eficiente, oferecendo o formato e a qualidade certos por meio de nós de borda multi-CDN. Em outras palavras, o Media Optimizer otimiza tanto a qualidade quanto o tamanho, oferecendo alta fidelidade visual em arquivos pequenos.

Renderizar vídeo progressivamente

A reprodução automática de vídeos de visualização no YouTube mostrou aumentar o tempo de exibição do vídeo em mais de 90%. A reprodução automática de vídeo tem poucos benefícios e muitas desvantagens, por isso é importante ter cuidado quando usar e quando não usá-lo. É importante ter a opção de pausar o vídeo no mínimo.

Uma boa maneira de equilibrar o orçamento do tamanho da página seria veicular primeiro apenas visualizações de vídeo criadas por IA e imagens de pôsteres , carregando o vídeo completo somente se o usuário clicar no vídeo. Dessa forma, você pode eliminar downloads desnecessários e acelerar o carregamento de páginas.

Como alternativa, carregue um vídeo de visualização no início e deixe o player reproduzir automaticamente a versão completa. Após a conclusão da visualização, o player verifica o tipo de conexão do dispositivo com a API de conexão de rede e, se o usuário tiver boa conectividade, troca a fonte da visualização para o vídeo real.

Você pode verificar uma página de amostra para uma demonstração. Aqui está uma dica : como os CDNs podem detectar tipos de conexão de rede de forma mais confiável, seu código de qualidade de produção pode aproveitar o CDN para detectar a velocidade da rede, com base no qual o código do cliente pode carregar progressivamente o vídeo de formato longo.

Empacotando

No futuro, graças à sua notável capacidade de contar histórias de uma maneira que as palavras não podem, a mídia visual continuará a ser um elemento dominante para sites e aplicativos móveis. No entanto, determinar o conteúdo certo a ser entregue depende da sua estratégia de negócios e do desempenho do site.

“Um orçamento de desempenho não orienta suas decisões sobre qual conteúdo deve ser exibido. Em vez disso, trata-se de como você escolhe exibir esse conteúdo. A remoção completa de conteúdo importante para diminuir o peso de uma página não é uma estratégia de desempenho.”

— Tim Kadlec

Esse é um bom conselho para se manter em mente.