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 podem consumir uma largura de banda significativa se não forem otimizadas e se não considerarem a janela de visualização do usuário.

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

Arquivos de origem de vídeo

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

É possível compactar cada stream usando um codec. Por exemplo, um video.webm pode ser um contêiner WebM com uma transmissão de vídeo compactada usando VP9 e uma transmissão de áudio compactada usando Vorbis.

Entender a diferença entre contêineres e codecs é útil porque ajuda a compactar seus arquivos de mídia usando muito menos largura de banda, o que leva a tempos de carregamento de página gerais mais baixos, além de melhorar potencialmente a Maior exibição de conteúdo (LCP) de uma página, que é uma métrica centrada no usuário e um dos três Core Web Vitals.

Uma maneira de compactar arquivos de vídeo é usar o FFmpeg:

ffmpeg -i input.mov output.webm

O comando anterior, embora seja o mais básico possível ao usar o FFmpeg, pega 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 modernos. Ajustar o vídeo ou as opções de áudio oferecidas pelo FFmpeg pode ajudar você 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

Se quiser ajustar ainda mais, o FFmpeg oferece a flag -crf ao comprimir vídeos sem usar a codificação de taxa de bits variável. -crf significa Fator de taxa constante. Essa é uma configuração que ajusta o nível de compressão, aceitando um número inteiro em um determinado intervalo.

Codecs como H.264 e VP9 são compatíveis com a flag -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 sobre a qualidade constante ao codificar vídeos em VP9.

Vários formatos

Ao trabalhar com arquivos de vídeo, especificar vários formatos funciona como um substituto para navegadores que não são compatíveis com 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 o fallback para navegadores legados. A versão WebM pode usar o codec AV1 mais recente, que ainda não é tão amplamente compatível, ou o codec VP9 anterior, que tem mais suporte que o AV1, mas geralmente não comprime tão bem quanto o AV1.

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 o conteúdo do vídeo antes do início da reprodução:

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

Reprodução automática

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

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

Se a reprodução automática de vídeo 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>

Ao combinar o atributo poster com a API Intersection Observer, você pode configurar sua página para baixar vídeos somente quando eles estiverem na janela de visualização. A imagem poster pode ser um marcador de posição 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. Por outro lado, 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.

Reprodução iniciada pelo usuário

Geralmente, o navegador começa a baixar 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 vídeo comece a ser baixado até que o usuário interaja com ele.

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

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

Definir preload="none" provavelmente é o caso mais desejável se você estiver carregando vídeos que os usuários precisam iniciar a reprodução.

Para melhorar a experiência do usuário nesse caso, adicione uma imagem poster. Isso dá ao usuário um contexto sobre o assunto do vídeo. Além disso, se a imagem de pôster for seu elemento LCP, você poderá 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">

Incorporações

Considerando toda a complexidade de otimizar e veicular conteúdo de vídeo com eficiência, faz sentido querer transferir o problema para serviços de vídeo dedicados, como o YouTube ou o Vimeo. Esses serviços otimizam a entrega de vídeos para você, mas incorporar um vídeo de um serviço de terceiros pode ter um efeito próprio na performance, já que os players de vídeo incorporados geralmente veiculam muitos recursos extras, como JavaScript.

Diante dessa realidade, as incorporações de vídeo de terceiros podem afetar significativamente a performance 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 para o site médio. Bloquear a linha de execução principal por longos períodos é um problema grave 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 meio-termo não carregando a incorporação imediatamente durante o carregamento inicial da página e, em vez disso, criando um marcador de posição para a incorporação que é substituído pela incorporação de vídeo real quando o usuário interage com ela.

Vídeos de demonstração

Teste seus conhecimentos

Próxima etapa: otimizar fontes da Web

Em seguida, na nossa cobertura sobre como otimizar tipos de recursos específicos, vamos falar sobre fontes. Otimizar as fontes do seu site é algo que geralmente é ignorado, mas pode ter um impacto significativo na velocidade geral de carregamento do site e em métricas como LCP e mudança de layout cumulativa (CLS).