Performance do vídeo

No módulo anterior, você aprendeu algumas técnicas de performance relacionadas a imagens, que são um tipo de recurso amplamente utilizado na Web que podem consumir largura de banda significativa se não for tomado cuidado para otimizá-los e levar o usuário janela de visualização de dados em consideração.

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

Arquivos de origem do vídeo

Ao trabalhar com arquivos de mídia, o arquivo que você reconhece em seu sistema operacional (.mp4, .webm e outros) é chamado de contêiner. Um contêiner tem um ou mais streams. Na maioria dos casos, é 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 arquivo de áudio stream compactado usando o Vorbis.

Entender a diferença entre contêineres e codecs é útil, porque ele ajuda a compactar os arquivos de mídia usando muito menos largura de banda, o que leva a tempos gerais de carregamento da página mais baixos, bem como potencialmente melhorar uma Maior exibição de conteúdo (LCP) da 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 tão básico quanto seja ao usar o FFmpeg, toma a Arquivo input.mov e gera um arquivo output.webm usando o FFmpeg padrão . O comando anterior gera um arquivo de vídeo menor que funciona em todas navegadores mais recentes. Ajustar o vídeo ou as opções de áudio do FFmpeg pode ajudam a reduzir ainda mais o tamanho do arquivo de 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 você quiser ajustar um pouco as coisas, o FFmpeg oferece a flag -crf quando Compactação de vídeos sem usar a codificação de taxa de bits variável. -crf significa Fator de taxa constante. Essa configuração ajusta o nível de compactação e faz isso aceitando um número inteiro dentro de um determinado intervalo.

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

Vários formatos

Ao trabalhar com arquivos de vídeo, especificar vários formatos funciona como substituto. para navegadores que não aceitam 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 um suporte tão amplo, ou o codec VP9 anterior, que é é melhor com suporte do que o AV1, mas normalmente não tem uma compactação tão boa quanto o AV1.

O atributo poster

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

<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 da Web incluem o autoplay. autoplay é usado quando um vídeo precisa ser reproduzido imediatamente, como quando usado como plano de fundo do vídeo ou como substituto de GIFs animados.

Os GIFs animados podem ser muito grandes, especialmente se tiverem muitos frames com detalhes complexos. É comum que GIFs animados consumam diversos megabytes de dados, o que pode ser um grande consumo de largura de banda que precisa ser gasta em busca de mais recursos críticos. Em geral, evite formatos de imagem animada, como 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 para seu site, use o 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, é possível configure sua página para fazer o download de vídeos somente quando eles estiverem na janela de visualização. A imagem poster pode ser um marcador de imagem de baixa qualidade, como a primeira frame do vídeo. Quando o vídeo aparecer na janela de visualização, o navegador começará fazer o download do vídeo. Isso pode melhorar o tempo de carregamento do conteúdo na janela de visualização inicial. A desvantagem é que, ao usar uma imagem poster para autoplay, seus usuários recebem uma imagem que é exibida rapidamente até que o vídeo seja carregado e começa a ser reproduzido.

Reprodução iniciada pelo usuário

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

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

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

Definir preload="none" é provavelmente o caso mais desejável ao carregar vídeos em que os usuários precisam iniciar a reprodução.

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

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

Incorporações

Dada toda a complexidade na otimização e veiculação eficiente de conteúdo de vídeo, faz sentido transferir o problema para serviços de vídeo dedicados, como YouTube ou Vimeo. Esses serviços otimizam a entrega de vídeos para você, mas a incorporação de um vídeo de um serviço de terceiros pode ter efeitos específicos sobre já que os players de vídeo incorporados podem oferecer como JavaScript.

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

Demonstrações em vídeo

Teste seus conhecimentos

A seguir: otimizar fontes da Web

O próximo tópico da nossa cobertura sobre otimização de tipos de recursos específicos são as fontes. Otimizar as fontes do seu site é algo que muitas vezes é negligenciado, mas pode têm um impacto significativo na velocidade geral de carregamento do site e em métricas como como LCP e Cumulative Layout Shift (CLS).