- O embed padrão do YouTube, mesmo sozinho em uma página vazia, gera 32 requisições e 1,3 MB de transferência, o que é um peso excessivo para uma UI pequena de vídeo
- Ao inserir vários vídeos, os recursos não são compartilhados e o peso cresce linearmente; nas medições de Zach Leatherman, 2 embeds chegaram a 2,4 MB e 3 embeds a 3,6 MB
- Os recursos visíveis no primeiro momento são basicamente a imagem de pôster, o título e um grande botão de reproduzir, então a mesma experiência pode ser recriada de forma mais leve com um Web Component como ``
lite-youtube-embed fica na faixa de 100 KB e compartilha recursos entre vários embeds, melhorando velocidade e eficiência sem perda de funcionalidade- Como embeds do YouTube são amplamente usados, reduzir dados na casa de megabytes por embed é uma otimização prática que também diminui o consumo de energia e as emissões de carbono
O custo do embed padrão ``
- No menu de compartilhamento do YouTube, ao selecionar
Embed, é fornecido um HTML baseado em ``
- O código padrão não inclui
loading="lazy", então até vídeos fora da tela podem ser carregados imediatamente
- Só de o YouTube adicionar lazy loading ao iframe padrão já haveria um ganho imediato de desempenho
- Para tornar o iframe responsivo e manter a proporção original, é possível definir diretamente no CSS o iframe de embed do YouTube
iframe[src^="https://www.youtube.com/embed/";] {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
}
Medições reais e crescimento linear
- Mesmo colocando apenas um embed do YouTube em uma página vazia, o custo de carregamento já é alto
-
32 requisições
- 1,3 MB de transferência de dados
- 2,76 segundos de carregamento no Wi‑Fi do autor
- Zach Leatherman registrou que, à medida que o número de embeds aumenta, o peso cresce linearmente porque os recursos não são compartilhados
- 2 embeds: 2,4 MB
- 3 embeds: 3,6 MB
- Atualmente, o tamanho parece ter aumentado ainda mais em relação ao momento em que Zach verificou isso
A UI que o usuário vê primeiro é simples
- No embed do YouTube, os elementos com que o usuário se depara primeiro são limitados
- A imagem de pôster do vídeo
- O título do vídeo
- Um grande botão de reproduzir que inicia o vídeo ao clicar
- Esse nível de UI e comportamento pode ser implementado sem carregar antes todos os recursos do player completo do YouTube
- A ideia de que embeds mais leves reduziriam o engajamento é difícil de avaliar sem a divulgação da metodologia e dos dados
- No passado, quando um engenheiro do YouTube testou uma página de vídeo mais leve, o tempo médio de carregamento chegou até a aumentar
- A página mais leve passou a alcançar também usuários com dispositivos fracos e internet lenta
- O uso desses novos usuários que ganharam acesso pode ter tornado o indicador de tempo médio de carregamento mais lento
- Se olhar só o tempo médio de carregamento, dá para deixar passar melhorias reais de velocidade para cada usuário
Alternativa: Web Component ``
- O lite-youtube-embed, criado por Paul Irish, uma referência do Google em desempenho, é um Web Component que recria de forma mais leve a experiência do embed padrão
- A descrição do projeto diz que ele renderiza como o embed real, mas é cerca de 224 vezes mais rápido
- A experiência do usuário é praticamente igual à do embed padrão do YouTube
- Exibição da imagem de pôster
- Exibição do título
- Exibição de um grande botão de reproduzir
- Reprodução do vídeo ao clicar
- A diferença está no uso e no compartilhamento de recursos
- Embed padrão do YouTube: cerca de 1,3 MB
- ``: cerca de 100 KB
- Possibilidade de compartilhar recursos entre vários embeds
- Dá para obter velocidade, eficiência e proteção básica de privacidade sem perda de funcionalidade
Forma de uso e implementações relacionadas
- A forma de uso é registrar o Web Component em JavaScript e depois usar o elemento ``
- É possível instalar via npm, copiar diretamente ou usar link de CDN
import "https://esm.sh/lite-youtube-embed";;
- A forma recomendada no README é colocar primeiro o HTML e carregar o script de forma assíncrona, aplicando progressive enhancement
- Para que ele apareça corretamente mesmo antes do JavaScript carregar,
background-image pode ser colocado dentro do HTML
[Play Video: Keynote (Google I/O '18)](https://youtube.com/watch?v=ogfYd705cRs)
- Também há implementações e alternativas relacionadas
2 comentários
lite-youtube-embed - incorporação do YouTube mais rápida
Comentários no Hacker News
Em uma plataforma de fóruns da comunidade, detectamos embeds do YouTube e os trocamos por miniaturas em proxy que não carregam antes do clique
Só porque alguém compartilhou um vídeo do YouTube em uma thread não significa que todo mundo que abrir a página precise baixar mais de 1 MB de JavaScript e ainda ter o IP rastreado pelo Google
Não me preocupo tanto com rastreamento, então continuo usando as miniaturas fornecidas pelo próprio YouTube
O player do SoundCloud também é absurdamente pesado
Se você fizer hotlink da miniatura, o Google também pode rastrear por ali
O autor disse que não acredita nas evidências de que uma versão mais leve reduza o engajamento, mas eu acho totalmente plausível
A demo do projeto lite-youtube-embed que foi recomendado tem tanto o player leve quanto o normal, e a versão leve leva visivelmente mais tempo até começar a reproduzir o vídeo
Cada aumento de 1 milissegundo no tempo de carregamento reduz o engajamento, e aqui a diferença parece ser de várias centenas de milissegundos
https://paulirish.github.io/lite-youtube-embed/
A lógica de que cada milissegundo importa também se aplica à página. Se o usuário abandonar a página, ele nem chega ao vídeo
E também pode ser ok que o usuário não queira ver o vídeo. Pessoalmente, gosto quando a página tem um resumo, porque assim posso evitar o vídeo
Também não gosto da reformulação do YouTube no desktop; ele usa espaço demais para promover outros vídeos em vez daquele que você realmente foi ver. Queria menos distrações
Fazendo uma analogia com semáforos: prefiro que o sinal ao qual eu me aproximo esteja verde, em vez de todos os sinais ficarem brevemente vermelhos
Se você olhar para o comportamento real das grandes empresas, fica claro que elas não ligam tanto para isso, e se não é importante para elas, não vejo por que nós deveríamos otimizar no lugar delas
Neste caso de uso não é um grande problema, mas no restante da stack ainda vale prestar atenção em performance
Não sei como houve uma regressão dessas, e parece que o Google vai estragando cada vez mais coisas que antes funcionavam bem
Isso pode variar conforme o ambiente: Firefox, notebook i7-1185G7 de cerca de 2 anos, Windows 11, Edge em modo 32 bits atualizando em segundo plano e sem reinicialização há algumas semanas
Grande parte da impressão de lentidão vem do indicador giratório de carregamento. É como se estivesse anunciando que é lento
O atraso entre o clique e o início da reprodução certamente influencia, mas para medir isso de forma adequada seria preciso uma entidade do porte do YouTube
Sobre o rumor de que embeds mais leves reduzem o engajamento e sobre o lite-youtube-embed sugerido, o usuário pode interpretar qualquer pequena diferença visual ou comportamental do player como algo estranho e pouco confiável
Na demo do lite-youtube-embed, mesmo com o título visível, não há link para a página real do YouTube, o que até passa uma sensação hostil, como se impedisse o acesso ao “conteúdo” original
Claro, essa função pode ser adicionada facilmente, mas isso revela um problema maior
Eu quase nunca reproduzo vídeos embutidos, mas quando reproduzo, a experiência normal do YouTube já basta. Se estiver embrulhado em mais uma camada desconhecida, fico menos propenso a clicar
A expressão deste texto de que “nada é sacrificado” é um exemplo de desenvolvedor achando que sabe como o usuário usa o software. Na prática, é sempre só um palpite
Espero que haja menos vídeos e menos dependência do Google e de blocos de JavaScript em todo lugar. Para uma web melhor, seria melhor não embutir vídeos do YouTube em qualquer canto
https://paulirish.github.io/lite-youtube-embed/
Agora que sei disso, seria bom se esses players leves também tivessem esse botão. Ainda assim, essa implementação não bloqueia completamente uma forma fácil de obter o link
Dá para acessar isso depois de iniciar a reprodução, mas aí foge do propósito. Eu não quero reproduzir o vídeo, nem esperar ele carregar, pausar e só então apertar o botão de salvar
Agora só falta impedir os blogueiros de usarem embeds do GitHub Gist
O Hugo e provavelmente outros geradores de sites estáticos já oferecem suporte nativo a trechos de código com realce de sintaxe, e até sites mais dinâmicos podem eliminar a dependência de serviços de terceiros com
highlight.jsÉ realmente estranho usar um iframe pesado para um trecho pequeno de código
https://gohugo.io/content-management/syntax-highlighting/
https://highlightjs.org
Mesmo que eu não goste, não faz sentido “forçar” mudanças no site para se adequar ao meu gosto
Foi corrigido em poucas semanas, mas me surpreendeu que aquilo tivesse ficado assim por anos
Se for possível usar Content Security Policy na página, dá para bloquear anúncios e reduzir o peso total do embed, além de melhorar a experiência do usuário
Mais informações: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...
Content-Security-Policysem pensarPorque isso desativa a proteção da CSP contra ataques de injeção. Se realmente precisar, há formas mais seguras de permitir scripts inline
https://content-security-policy.com/
Parece que está faltando uma parte importante na história de que “embeds mais leves reduziram o engajamento”
Naturalmente, se o tempo de carregamento cai, o engajamento deveria melhorar. Então, se o engajamento caiu com o embed mais leve, isso significa que alguma funcionalidade ou comportamento foi sacrificado
Mas este texto diz que nada foi sacrificado, então alguma parte da história está faltando
Pode ser algo semelhante aqui. Graças ao embed mais leve, muita gente talvez tenha conseguido carregar o vídeo pela primeira vez, mas, por causa de dispositivos ou conexões lentas, pode ter desistido na etapa de reprodução
Nesse caso, pessoas que antes nem conseguiam carregar totalmente o player e não deixavam dado algum agora podem aparecer como aumento na taxa de “abandono ao assistir vídeo”
Os usuários têm expectativas e tolerâncias diferentes para tempo de carregamento dependendo do alvo, e a página e o vídeo dentro dela são alvos diferentes
O tempo de carregamento da página inteira nem sempre está atrelado ao tempo de carregamento do embed, e o carregamento total da página pode até mascarar o tempo de carregamento do conteúdo
Um indicador mais importante talvez não seja o tempo de carregamento do embed, mas sim a latência entre o clique e a reprodução
Como solução do lado do usuário para quem usa uBlock, dá para usar filtros click2load
Só que o Chrome está migrando para o Manifest V3, então talvez isso não funcione. Basta consultar o filtro de yokoffing/filterlists
https://raw.githubusercontent.com/yokoffing/filterlists/main...
É o criador do Betterfox e também tem outros filtros úteis no GitHub
O que eu queria era só um link comum, então antigamente fiz um script de usuário curto que trocava iframes do YouTube na página por links
Funciona surpreendentemente bem para uma implementação tão simples. Ele procura iframes
youtube.com/embedeyoutube-nocookie.com/embed, troca por linkswatch?v=e também mantém o timestamp, além de poder incluir imagem de miniatura se quiserA parte de que “à medida que o número de embeds aumenta, o peso também cresce linearmente. Dois dão 2,4 MB, três dão 3,6 MB” é estranha
Fico me perguntando por que esses recursos não estão vindo do cache. Se todos são carregados de
www.youtube.com, não deveria ser possível usar recursos em cache pela política de mesma origem?A melhor parte do texto foi quando trocaram para uma página mais leve e o tempo médio de carregamento da página acabou aumentando
Olhando mais de perto, usuários com dispositivos fracos e internet lenta passaram pela primeira vez a conseguir usar o YouTube de fato, e como usaram bastante, a média passou a parecer mais lenta
Foi marcante perceber que a velocidade de uso real ficou relativamente mais rápida para todo mundo, e que a métrica de velocidade média de carregamento da página no fim era só uma isca sem sentido
Há muito tempo eu fiz uma extensão para Firefox que trocava todos os embeds do YouTube por miniaturas e, ao clicar, abria o YouTube
Originalmente fiz isso porque celulares não tinham Flash, mas embeds em Flash eram comuns, e depois expandi a extensão para lidar também com embeds em iframe
Na maioria dos casos, abrir o site ou app completo do YouTube oferecia uma experiência melhor do que uma janelinha pequena de embed
Na época eu a escrevi para a nova API de extensões de alto nível, mas o suporte entre versões do navegador não continuou tanto quanto eu esperava, então fiquei irritado e não a portei para WebExtension. Ver este texto me dá vontade de portar de novo