Como otimizar e comprimir vídeo para o seu site

Principais conclusões

• Exporte MP4 (H.264/AAC) em 1080p ou menos com fast start; adicione WebM opcionalmente.

• Transmita tudo o que dure mais de um ou dois minutos a partir de uma plataforma ou CDN.

• Use posters, preload="metadata" e carregamento diferido abaixo da zona visível.

• Reserve espaço para evitar mudanças de layout; carregue os scripts do leitor apenas quando necessário.

• Adicione dados estruturados VideoObject para que os motores de pesquisa compreendam os seus vídeos.

Formato e codec

O MP4 com vídeo H.264 e áudio AAC reproduz-se em todos os navegadores modernos. O WebM (VP9/AV1) é mais pequeno; ofereça-o como <source> adicional, se quiser.

Tamanho e bitrate

Comprimir antes de carregar

Ferramentas gratuitas como o HandBrake ou o ffmpeg podem reduzir drasticamente o tamanho do ficheiro. Remova a faixa de áudio dos ciclos de fundo.

Carregar o vídeo de forma diferida

Use preload="metadata" ou none, uma imagem de poster e carregue os leitores apenas quando entrarem na área visível. A Elfsight Video Gallery usa carregamento diferido por predefinição.

Adicionar schema de vídeo

Ajude os motores de pesquisa a compreender os seus vídeos com dados estruturados VideoObject — gere-os com o nosso gerador de schema de vídeo.

Receitas de exportação prontas para a web

# General web MP4: H.264 + AAC, fast start
ffmpeg -i input.mov -c:v libx264 -crf 23 -preset slow -c:a aac -b:a 128k -movflags +faststart out.mp4

# Downscale to 720p
ffmpeg -i input.mp4 -vf "scale=-2:720" -c:v libx264 -crf 24 -c:a copy out-720p.mp4

# Remove audio (for loops)
ffmpeg -i input.mp4 -an -c:v copy silent.mp4

+faststart move o índice para o início do ficheiro, para que a reprodução comece antes de a transferência terminar.

Transferência progressiva vs. streaming

Um único MP4 é transferido de forma progressiva: o navegador obtém um só ficheiro com uma só qualidade. Isso serve para clipes com menos de um ou dois minutos. Os vídeos mais longos devem ser transmitidos com formatos adaptativos, como o HLS: o vídeo é dividido em pequenos blocos com várias qualidades e o leitor muda consoante a ligação do espectador. O YouTube, o Vimeo e as CDN de vídeo fazem isto por si.

Vídeo e Core Web Vitals

Dicas para WordPress

• Não carregue vídeos longos para a Biblioteca de multimédia — use o YouTube, o Vimeo ou uma CDN de vídeo.

• Certifique-se de que o seu plugin de carregamento diferido também trata de iframes.

• Raramente precisa de um plugin de pré-carregamento de vídeo; um poster e o carregamento diferido bastam.

• Verifique se os plugins de cache ou de otimização não atrasam os scripts de que o leitor de vídeo precisa.

Lista de verificação de otimização

1. 1.

   Formato certo

   MP4 (H.264/AAC), WebM opcional.

2. 2.

   Tamanho certo

   1080p ou menos, comprimido, fast start.

3. 3.

   Entrega certa

   Transmita vídeos longos a partir de uma plataforma ou CDN.

4. 4.

   Carregamento certo

   Poster, preload="metadata", carregamento diferido abaixo da zona visível.

5. 5.

   Sem mudanças de layout

   Reserve espaço com aspect-ratio.

6. 6.

   Dados estruturados

   Adicione marcação VideoObject para que os motores de pesquisa compreendam o vídeo.