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
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.
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>
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>
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.
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.
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">
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.
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.
O atributo poster
do elemento <video>
é considerado um candidato à LCP.
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).