Performance do vídeo

No módulo anterior, você aprendeu algumas técnicas de desempenho relacionadas a imagens, que são um tipo de recurso amplamente usado na Web e que pode consumir uma largura de banda significativa se não tiver cuidado para otimizá-las e considerar a janela de visualização do usuário.

No entanto, as imagens não são o único tipo de mídia comumente visto na Web. Vídeos são outro tipo de mídia popular com frequência usado em páginas da Web. Antes de analisar algumas das possíveis otimizações, é importante entender como o elemento <video> funciona.

Arquivos de origem do vídeo

Ao trabalhar com arquivos de mídia, o arquivo que você reconhece no sistema operacional (.mp4, .webm e outros) é chamado de contêiner. Um contêiner tem um ou mais fluxos. Na maioria dos casos, seria o stream de vídeo e áudio.

É possível compactar cada stream usando um codec. Por exemplo, um video.webm pode ser um contêiner WebM contendo um stream de vídeo compactado usando VP9 e um stream de áudio compactado usando Vorbis.

Entender a diferença entre contêineres e codecs é útil, porque ajuda você a compactar seus arquivos de mídia usando uma largura de banda significativamente menor, o que reduz os tempos gerais de carregamento da página e pode melhorar a Maior exibição de conteúdo (LCP) de uma página, que é uma métrica centrada no usuário e uma das três Core Web Vitals.

Uma forma de compactar arquivos de vídeo envolve o uso do FFmpeg:

ffmpeg -i input.mov output.webm

O comando anterior, embora básico ao usar o FFmpeg, recebe o arquivo input.mov e gera um arquivo output.webm usando as opções padrão do FFmpeg. O comando anterior gera um arquivo de vídeo menor que funciona em todos os navegadores mais recentes. Ajustar o vídeo ou as opções de áudio que o FFmpeg oferece pode ajudar a reduzir ainda mais o tamanho do arquivo de um vídeo. Por exemplo, se você estiver usando um elemento <video> para substituir um GIF, remova a faixa de áudio:

ffmpeg -i input.mov -an output.webm

Importante:a flag -an remove todos os streams de áudio do arquivo de saída. Essa é uma otimização importante se o caso de uso do seu vídeo não exigir áudio (por exemplo, em que vídeos são usados para substituir GIFs animados), já que a remoção do stream de áudio reduz o tamanho do arquivo de vídeo, mesmo que ele já esteja presente no arquivo de vídeo de origem que esteja silencioso.

Se você quiser ajustar um pouco mais as coisas, o FFmpeg oferece a flag -crf ao compactar vídeos sem usar uma codificação de taxa de bits variável. -crf significa Fator de taxa constante. Essa configuração ajusta o nível de compactação aceitando um número inteiro dentro de um determinado intervalo.

Codecs como H.264 e VP9 oferecem suporte à sinalização -crf, mas o uso dela depende do codec que você está usando. Para mais informações, leia sobre o fator de taxa constante para codificar vídeos em H.264 e a qualidade constante ao codificar vídeos em VP9.

Vários formatos

Ao trabalhar com arquivos de vídeo, a especificação de vários formatos funciona como uma alternativa para navegadores que não oferecem suporte a todos os formatos modernos.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Como todos os navegadores modernos são compatíveis com o codec H.264, o MP4 pode ser usado como substituto de navegadores legados. A versão WebM pode usar o codec AV1 mais recente, que ainda não tem uma compatibilidade tão ampla, ou o codec VP9 anterior, que tem melhor suporte do que o AV1, mas normalmente não compacta tão bem quanto o AV1.

Observação:de forma semelhante ao elemento <picture>, a ordem em que você lista os elementos filhos <source> no elemento <video> determina a prioridade para o navegador. Se você especificar uma fonte de MP4 primeiro, o navegador vai selecionar esse formato, independentemente da compatibilidade com formatos mais eficientes que possam ser especificados.

O atributo poster

A imagem do pôster de um vídeo é adicionada usando o atributo poster no elemento <video>, que indica aos usuários qual pode ser o conteúdo do vídeo antes que a reprodução seja iniciada:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Observação:antes, um elemento <video> sem uma imagem poster não era um candidato à LCP. Esse problema já foi resolvido, e o primeiro frame de um arquivo de vídeo, depois de pintado, será considerado um candidato à LCP. Portanto, se o site usa arquivos de vídeo de forma significativa, é importante usar o atributo poster caso seus vídeos não sejam reproduzidos automaticamente ou garantir que os candidatos à LCP de vídeo sejam otimizados para que sejam exibidos o mais rápido possível se o atributo poster não for usado.

Reprodução automática

De acordo com o HTTP Archive, 20% dos vídeos na Web incluem o atributo autoplay. O autoplay é usado quando um vídeo precisa ser reproduzido imediatamente, por exemplo, quando usado como plano de fundo ou como substituição de GIFs animados.

Os GIFs animados podem ser muito grandes, especialmente se tiverem muitos frames com detalhes complexos. Não é incomum que GIFs animados consumam vários megabytes de dados, o que pode ser um dreno significativo de largura de banda melhor gasta em recursos mais importantes. Em geral, evite formatos de imagem animada, já que os equivalentes de <video> são muito mais eficientes para esse tipo de mídia.

Se a reprodução automática de vídeos for um requisito do seu site, use o atributo autoplay diretamente no elemento <video>:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Cuidado:os elementos <video> com o atributo autoplay especificado começam o download imediatamente, mesmo que estejam fora da janela de visualização inicial.

Ao combinar o atributo poster com a API Intersection Observer, você pode configurar sua página para fazer o download de vídeos apenas quando eles estiverem na janela de visualização. A imagem poster pode ser um marcador de imagem de baixa qualidade, como o primeiro frame do vídeo. Quando o vídeo aparece na janela de visualização, o navegador começa a fazer o download. Isso pode melhorar os tempos de carregamento do conteúdo na janela de visualização inicial. No lado negativo, ao usar uma imagem poster para autoplay, seus usuários recebem uma imagem que é mostrada apenas brevemente até que o vídeo seja carregado e comece a ser reproduzido.

Observação:a reprodução automática de vídeos no carregamento da página pode ser uma experiência desagradável para os usuários, especialmente se o vídeo tiver um stream de áudio, o que pode ser um arremesso se o volume do dispositivo estiver alto. A reprodução automática só deve ser usada quando necessário e como resultado de uma necessidade prevista para o usuário. Para minimizar as experiências ruins do usuário devido à reprodução automática de vídeos, os navegadores têm critérios diferentes que classificam um vídeo qualificado para reprodução automática. Para mais detalhes, consulte as políticas de reprodução automática do Chrome e do WebKit.

Reprodução iniciada pelo usuário

Geralmente, o navegador começa a fazer o download de um arquivo de vídeo assim que o analisador HTML descobre o elemento <video>. Se você tiver elementos <video> em que o usuário inicia a reprodução, provavelmente não vai querer que o download do vídeo comece até que o usuário interaja com ele.

É possível afetar o que é transferido por download para recursos de vídeo usando o atributo preload do elemento <video>:

• A definição de preload="none" informa ao navegador que nenhum conteúdo do vídeo precisa ser pré-carregado.
• Definir preload="metadata" busca apenas metadados do vídeo, como a duração e outras informações possivelmente claras.

A configuração preload="none" é provavelmente o melhor caso se você estiver carregando vídeos para os quais os usuários precisam iniciar a reprodução.

Observação:o atributo preload é uma dica. O navegador pode optar por não obedecê-lo e pode se comportar de maneira diferente em navegadores distintos ou ao comparar um dispositivo móvel com um computador.

Nesse caso, é possível melhorar a experiência do usuário adicionando uma imagem poster. Isso dá ao usuário um contexto sobre o que é o vídeo. Além disso, se a imagem do pôster for seu elemento da LCP, será possível aumentar a prioridade da imagem poster usando a dica <link rel="preload"> com fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Observação:se o vídeo não for o maior elemento na janela de visualização, o pré-carregamento da imagem poster poderá atrasar sua LCP por meio da contenção de largura de banda, em que a largura de banda disponível seria alocada para outros recursos mais importantes.

Incorporações

Considerando toda a complexidade de otimizar e veicular conteúdo de vídeo de maneira eficiente, faz sentido transferir o problema para serviços de vídeo dedicados, como o YouTube ou o Vimeo. Esses serviços otimizam o envio de vídeos para você, mas a incorporação de um vídeo de um serviço de terceiros pode ter o próprio efeito no desempenho, já que os players de vídeo incorporados geralmente disponibilizam muitos recursos extras, como JavaScript.

Considerando essa realidade, as incorporações de vídeos de terceiros podem afetar significativamente o desempenho da página. De acordo com o HTTP Archive, as incorporações do YouTube bloqueiam a linha de execução principal por mais de 1,7 segundo no site médio. Bloquear a linha de execução principal por longos períodos é um problema sério de experiência do usuário que pode afetar a Interaction to Next Paint (INP) de uma página. No entanto, é possível chegar a um comprometimento não carregar a incorporação imediatamente durante o carregamento de página inicial e, em vez disso, criar um marcador para a incorporação que será substituída pela incorporação de vídeo quando o usuário interagir com ela.

Importante:para saber mais sobre fachadas, leia a seção sobre fachadas no módulo que aborda imagens de carregamento lento e elementos <iframe>.

Demonstrações em vídeo

teste seus conhecimentos

A ordem dos elementos <source> dentro de um elemento <video> pai não determina qual recurso de vídeo será transferido por download.

Verdadeiro

Tente de novo.

Falso

Correto.

O atributo poster do elemento <video> é considerado um candidato à LCP.

Verdadeiro

Correto.

Falso

Tente de novo.

A seguir: otimizar fontes da Web

Em seguida, na nossa cobertura de otimização de tipos de recursos específicos são as fontes. A otimização das fontes do seu site é algo que costuma ser negligenciado, mas pode ter um impacto significativo na velocidade de carregamento geral do site e em métricas como LCP e Cumulative Layout Shift (CLS).