Uma incorporação do YouTube traz consigo os próprios scripts do reprodutor e uma miniatura de pré-visualização no momento em que carrega, e numa página com vários vídeos isso soma-se rapidamente. Eis como manter tudo rápido sem abdicar do vídeo incorporado.
Por que motivo as incorporações afetam a velocidade da página
Mesmo antes de o visitante carregar em reproduzir, um iframe incorporado pede os recursos do reprodutor do YouTube e uma imagem de miniatura. Numa página de análise com cinco vídeos incorporados, por exemplo, isso equivale a cinco conjuntos de pedidos disparados em simultâneo ao carregar a página, competindo com os recursos do seu próprio site por largura de banda e tempo de renderização.
Solução 1: lazy loading nativo
A solução mais simples é um único atributo HTML. Adicionar loading=”lazy” a um <iframe> diz ao navegador para adiar o seu carregamento até estar prestes a entrar na área visível:
<iframe src="..." loading="lazy" ...></iframe>Isto é suportado por todos os navegadores modernos, não exige JavaScript e é a alteração de maior valor numa página com vídeo incorporado abaixo da dobra.
Solução 2: clicar para carregar
Para páginas com muitas incorporações, uma opção ainda mais agressiva é não carregar nenhum iframe até o visitante clicar nele. Mostre uma imagem de miniatura estática, retirada dos URLs públicos de miniaturas do YouTube (veja o nosso visualizador de miniaturas), com uma sobreposição de botão de reprodução, e só troque para o iframe real ao clicar. Isto significa que não acontece nenhum pedido ao YouTube para vídeos que o visitante nunca chega a reproduzir.
Solução 3: só reproduza automaticamente o que precisa disso
Reproduzir vídeo automaticamente acrescenta trabalho real no momento em que a página carrega: o reprodutor tem de armazenar em buffer imediatamente em vez de esperar pela intenção do utilizador. Reserve a reprodução automática para incorporações genuinamente importantes, e conte com o lazy loading mais um botão de reprodução visível para as restantes.
Medir o impacto
Ferramentas como o Google PageSpeed Insights ou o próprio painel Lighthouse do seu navegador assinalam diretamente incorporações de terceiros não otimizadas, e permitem comparar os tempos de carregamento antes e depois de aplicar o lazy loading. Em páginas com vários vídeos, a diferença é geralmente fácil de ver tanto nos números como na sensação percebida de carregamento.
Incluído por predefinição
O nosso gerador de código de incorporação inclui loading=”lazy” por predefinição em cada incorporação gerada, pelo que esta otimização já fica tratada no momento em que copia o código.