Embeds do YouTube são pesados demais, e dá para corrigir isso

• Os embeds do YouTube têm cerca de 1,3 MB e não compartilham recursos entre vários embeds
• Usar o web component <lite-youtube> reduz isso para cerca de 100 kB, compartilha recursos e não sacrifica funcionalidades

Embed de vídeo do YouTube

• É possível incorporar vídeos do YouTube em um site
• No menu Share do YouTube, ao selecionar a opção < > Embed, é fornecido um código HTML com <iframe>
• <iframe> não é bom para desempenho, mas é adequado para conteúdo protegido de terceiros

Sugestões para melhorar o desempenho

• Adicionar o atributo loading="lazy" para que o vídeo não seja carregado imediatamente quando não estiver visível
• Adicionar estilos inline para manter a proporção original do vídeo e deixá-lo responsivo

Problemas do embed atual do YouTube

• Em uma página com apenas um embed do YouTube, são necessárias 32 requisições, 1,3 MB de transferência de dados e 2,76 segundos de carregamento
• Como os recursos não são compartilhados entre vários embeds, o volume de dados transferidos cresce linearmente à medida que o número de embeds aumenta

Aparência e funcionalidade

• O embed do YouTube fornece a imagem de "pôster" do vídeo, o título do vídeo e um grande botão de reprodução
• Esses recursos podem ser implementados sem consumir muitos recursos

Por que é assim?

• Há relatos de que embeds mais leves foram testados, mas reduziram o engajamento
• Porém, esse resultado contraria a intuição e precisa de uma análise mais profunda
• O uso intenso de recursos também é um problema ambiental

Solução: replicar a experiência de embed de outra forma

• Existe o web component lite-youtube-embed, criado por Paul Irish, do Google
• Esse componente foca em desempenho visual e renderiza cerca de 224 vezes mais rápido
• Ele oferece as mesmas funções do embed padrão, ao mesmo tempo em que melhora velocidade, eficiência e privacidade padrão

Como usar o Lite YouTube Embed

1. Vincule o JavaScript que inicializa o web component
2. Use-o

• É possível instalar via npm ou copiar para o projeto
• Também é possível usar por meio de link via CDN

Alternativas

• Versão com Shadow DOM (protege estilos, mas dificulta a estilização)
• Implementação própria
  • Raymond Camden: criação de web component para embed do YouTube (versões em vanilla e WebC)
  • Adrian Roselli: web components para YouTube e Vimeo
• Mux: <youtube-video> (compatível com a DOM API)
• Port para React e versão oficial para Next.js

Resumo do GN⁺

• Os embeds do YouTube consomem muitos recursos e impactam negativamente o desempenho
• Usar web components como lite-youtube-embed pode melhorar bastante o desempenho
• Também pode haver um impacto positivo do ponto de vista ambiental
• Vale considerar outros web components com funcionalidades semelhantes

[xguru]

lite-youtube-embed - incorporação do YouTube mais rápida

[GN⁺]

Comentários do Hacker News

• Em plataformas de fóruns comunitários, detecta-se embeds do YouTube e eles são substituídos por miniaturas em proxy que não carregam até o clique

  • Só porque uma pessoa compartilha um vídeo do YouTube não significa que todos os usuários precisem baixar mais de 1 MB de JavaScript do YouTube e ter seus IPs rastreados pelo Google

• O autor não acredita que uma versão leve reduza o engajamento

  • Já eu acredito completamente nisso
  • Na demo da página do projeto lite-youtube-embed recomendado, a versão leve demora mais para reproduzir o vídeo
  • À medida que o tempo de carregamento aumenta em milissegundos, o engajamento diminui

• Não é surpreendente que outros players tratem o usuário de forma diferente

  • O lite-youtube-embed impede clicar para ir à página real do YouTube
  • Isso pode parecer uma tentativa de impedir que a pessoa vá até a fonte real do conteúdo
  • Quase nunca reproduzo vídeos embutidos, mas quando reproduzo, prefiro a experiência normal do YouTube
  • Se parecer que existe uma camada extra, a chance de eu clicar diminui

• Este é um exemplo da crença equivocada de que desenvolvedores não conseguem saber exatamente como os usuários usam o software

  • Quero reduzir o uso de vídeos e do Google, e diminuir os megabytes de JavaScript
  • Para uma web melhor, deveríamos parar de embutir vídeos do YouTube

• É preciso forçar blogueiros a não usarem embeds do GitHub Gist

  • Geradores de sites estáticos como Hugo oferecem suporte a trechos de código com realce de sintaxe
  • Sites dinâmicos podem usar highlight.js

• Uma forma de reduzir o peso total dos embeds e melhorar a UX é bloquear anúncios

  • É possível usar Content Security Policies para bloquear anúncios na página

• Como solução do lado do usuário para quem usa uBlock, pode-se usar click 2 load

  • Isso pode deixar de funcionar, já que o Chrome está migrando para manifest v3

• Há resultados de testes mostrando que embeds leves reduzem o engajamento

  • Tempos de carregamento mais rápidos deveriam melhorar o engajamento, mas se o engajamento caiu com embeds leves, é provável que alguma funcionalidade tenha sido sacrificada

• Um vídeo embutido poderia ser um elemento <video> apontando para arquivos nos servidores do YouTube

  • O interesse comercial atrapalhou isso

• À medida que o número de embeds aumenta, o peso cresce linearmente

  • A política de mesma origem deveria permitir o uso de recursos em cache

• Compartilho minha solução como alternativa ao lite youtube embed

  • Ela oferece um compromisso melhor em termos de possibilidade total de personalização