Neste codelab, melhore o desempenho substituindo um GIF animado por um vídeo.
Medir primeiro
Primeiro meça o desempenho do site:
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Lighthouse.
- Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
- Clique no botão Gerar relatório.
Quando terminar, o Lighthouse vai sinalizar o GIF como um problema na auditoria "Usar formatos de vídeo para conteúdo animado".
Instalar o FFmpeg
Há várias maneiras de converter GIFs em vídeo. Este guia usa o FFmpeg (em inglês). Ele já está instalado na VM do Glitch. Se quiser, siga estas instruções para instalá-lo na sua máquina local também.
Abra o console
Verifique se o FFmpeg está instalado e funcionando:
- Clique em Remix to Edit para tornar o projeto editável.
- Clique em Terminal. Se o botão "Terminal" não aparecer, talvez seja necessário usar a opção "Tela cheia".
- No console, execute:
which ffmpeg
Você vai receber um caminho de arquivo:
/usr/bin/ffmpeg
Mudar GIF para vídeo
- No console, execute
cd images
para entrar no diretório de imagens. - Execute
ls
para conferir o conteúdo.
Você verá algo como:
$ ls
cat-herd.gif
- No console, execute:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Isso informa ao FFmpeg para usar o input, indicado pela flag -i
, de
cat-herd.gif e convertê-lo em um vídeo chamado cat-herd.mp4. Isso deve levar um
segundo para ser executado. Quando o comando for concluído, você poderá digitar ls
novamente
e conferir dois arquivos:
$ ls
cat-herd.gif cat-herd.mp4
Criar vídeos WebM
O MP4 existe desde 1999, mas o WebM é um novato, tendo sido
lançado inicialmente em 2010. Os vídeos WebM podem ser muito menores do que os MP4, então
faz sentido gerar os dois. Felizmente, o elemento <video>
permite
adicionar várias fontes. Portanto, se um navegador não oferecer suporte ao WebM, ele poderá usar o
MP4.
- No console, execute:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Para verificar o tamanho dos arquivos, faça o seguinte:
ls -lh
Você precisa ter um GIF e dois vídeos:
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
O GIF original é 3, 7M, enquanto a versão MP4 é 551K e a versão do WebM é de apenas 341K. É uma grande economia!
Atualizar o HTML para recriar o efeito do GIF
Os GIFs animados têm três características principais que os vídeos precisam replicar:
- Eles são reproduzidos automaticamente.
- Eles são executados continuamente (geralmente, mas é possível evitar o looping).
- Eles são silenciosos.
Felizmente, é possível recriar esses comportamentos usando o elemento <video>
.
- No arquivo
index.html
, substitua a linha com<img>
por:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Um elemento <video>
que usa esses atributos será reproduzido automaticamente, em loop
sem fim, não vai tocar áudio e será reproduzido inline (ou seja, não em tela cheia), todos os
comportamentos esperados de GIFs animados. 🎉
Especifique suas origens
Agora, basta especificar suas fontes de vídeo. O elemento <video>
requer
um ou mais elementos filhos <source>
que apontam para diferentes arquivos de vídeo que o
navegador pode escolher, dependendo do suporte ao formato.
Atualize o <video>
com elementos <source>
que vinculam aos vídeos de cat-herd:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Visualizar
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
A experiência precisa ser a mesma. Até agora, tudo bem.
Verificar com o Lighthouse
Com o site aberto:
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Lighthouse.
- Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
- Clique no botão Gerar relatório.
Você verá que a auditoria "Usar formatos de vídeo para conteúdo animado" foi aprovada. Uhuuu! 💪