Vídeos no site: cuidados com a performance

O dilema dos vídeos na web

Vídeos são um dos formatos de conteúdo mais engajadores da internet. Páginas com vídeo têm taxas de conversão até 80% maiores que páginas sem. Porém, vídeos também são um dos maiores vilões da performance, podendo adicionar segundos ao tempo de carregamento se não forem implementados corretamente.

O desafio é encontrar o equilíbrio perfeito: usar vídeos para engajar e converter, sem sacrificar a velocidade do site. Este artigo mostra como conseguir isso.

Self-hosted vs. plataformas externas

A primeira decisão é onde hospedar seus vídeos. Hospedar diretamente no seu servidor (self-hosted) pode parecer mais simples, mas geralmente é a pior opção para performance.

Plataformas como YouTube, Vimeo ou Wistia oferecem vantagens significativas: CDN global para entrega rápida, transcodificação automática para diferentes dispositivos, streaming adaptativo que ajusta a qualidade conforme a conexão do usuário e infraestrutura otimizada para servir vídeos.

A regra de ouro é: nunca hospede vídeos pesados no mesmo servidor do seu site. Isso consome bandwidth, memória e pode tornar todo o site lento.

Lazy loading de vídeos

Mesmo usando embeds de plataformas externas, cada embed carrega scripts, estilos e pré-carrega dados do vídeo. Um embed do YouTube, por exemplo, pode adicionar mais de 500KB de recursos à sua página.

A solução é implementar lazy loading: o vídeo só carrega quando o usuário interage com ele ou quando ele entra na viewport. Técnicas populares incluem:

• Facade pattern: Exiba uma thumbnail estática do vídeo com um botão de play. O embed real só é carregado quando o usuário clica.
• Intersection Observer: Use a API do navegador para detectar quando o vídeo entra na área visível e só então carregar o embed.
• lite-youtube-embed: Componente leve que substitui o embed padrão do YouTube, reduzindo o impacto inicial de 500KB para menos de 10KB.

Otimização de vídeos self-hosted

Se você realmente precisa hospedar vídeos no seu próprio servidor, siga estas práticas para minimizar o impacto na performance:

Use o formato MP4 com codec H.264 para máxima compatibilidade, ou WebM com VP9 para melhor compressão. Ofereça múltiplas resoluções e use o atributo preload="none" ou preload="metadata" na tag vídeo para evitar download automático.

Nunca use autoplay com vídeos pesados. Se precisar de um vídeo de fundo (hero vídeo), use versões altamente comprimidas, curtas (5-15 segundos) e sem áudio. Considere substituir por GIFs otimizados ou animações CSS para impacto visual semelhante.

Impacto nós Core Web Vitals

Vídeos mal implementados afetam principalmente duas métricas: o LCP (Largest Contentful Paint), se o vídeo é o maior elemento visível, e o CLS (Cumulative Layout Shift), se o espaço do vídeo não é reservado corretamente.

Para evitar CLS, sempre defina width e height no container do vídeo, mantendo o aspect ratio correto. Use CSS com aspect-ratio: 16/9 para garantir que o espaço seja reservado antes do vídeo carregar.

Para proteger o LCP, evite que o vídeo seja o elemento principal acima da dobra. Se precisar de um vídeo hero, considere usar um poster (imagem estática) que carrega instantaneamente enquanto o vídeo é baixado em segundo plano.