9 Formas de Acelerar Páginas com Vídeos do YouTube Incorporados

As páginas com vídeos do YouTube incorporados são uma causa comum de tempos de carregamento lentos, principalmente porque cada iframe incorporado carrega os próprios scripts do leitor e os recursos de pré-visualização assim que aparece no código da página. Aqui estão nove formas concretas de acelerar páginas com vídeos do YouTube incorporados sem abdicar do vídeo incorporado.

1. Adicione carregamento lento nativo

A alteração com maior impacto individual também é a mais simples: adicione o atributo loading=”lazy” a cada iframe incorporado.

<iframe src="..." loading="lazy"></iframe>

Isto indica ao navegador para adiar o pedido do conteúdo do iframe até este estar prestes a entrar na área visível ao percorrer a página, pelo que incorporações abaixo da dobra não custam nada no carregamento inicial. Todos os navegadores modernos suportam isto nativamente, sem necessidade de JavaScript.

2. Use um padrão de clicar para carregar em páginas com muitos vídeos

Para páginas que mostram vários vídeos ao mesmo tempo (por exemplo, um resumo dos “melhores vídeos do ano”), considere não carregar nenhum iframe real até o visitante clicar. Mostre uma imagem de miniatura estática com um botão de reprodução sobreposto, e substitua-a pela incorporação real apenas quando houver um clique. Isto exige mais trabalho de implementação, mas elimina essencialmente os pedidos relacionados com o YouTube para vídeos que um visitante nunca chega a reproduzir.

3. Use o domínio com privacidade reforçada

Mudar para youtube-nocookie.com em vez de youtube.com não altera diretamente o tempo de carregamento, mas reduz o número de scripts de terceiros relacionados com cookies que são executados antes da reprodução, o que reduz indiretamente o trabalho que o navegador tem de fazer ao carregar a página.

https://www.youtube-nocookie.com/embed/VIDEO_ID

4. Evite reprodução automática em incorporações que carregam com a página

Uma incorporação com reprodução automática tem de começar a armazenar dados de vídeo em memória imediatamente, o que compete pela largura de banda com o resto dos recursos da sua página durante a janela crítica de carregamento inicial. Reserve a reprodução automática para incorporações que um visitante tenha acionado deliberadamente, como uma lightbox aberta por um clique.

5. Dimensione a incorporação corretamente, em vez de a redimensionar por CSS

Servir uma incorporação num tamanho muito maior do que aquele em que é efetivamente exibida (confiando no CSS para a reduzir) não poupa largura de banda, já que é o próprio iframe, e não uma imagem, que está a ser carregado; mas definir corretamente a largura e a altura (ou o rácio de aspeto do seu invólucro responsivo) evita alterações de layout, o que afeta diretamente métricas de Core Web Vitals como o CLS.

6. Reserve espaço com um invólucro responsivo

Uma incorporação sem tamanho definido até carregar faz com que o resto da página salte quando esta aparece, uma má experiência e uma penalização de Core Web Vitals. Um invólucro responsivo com um padding-bottom baseado em percentagem reserva imediatamente o espaço correto:

<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" loading="lazy"></iframe>
</div>

7. Limite o número de incorporações por página

Mesmo com carregamento lento, uma página com quinze ou vinte vídeos incorporados exige bastante da ligação de um visitante à medida que percorre a página. Sempre que possível, considere paginar resumos de vídeos longos, ou use miniaturas estáticas que liguem a páginas individuais de vídeo, em vez de incorporar tudo numa única página.

8. Faça preconnect aos domínios do YouTube para incorporações que sabe que vão carregar

Para uma página onde sabe que uma incorporação perto do topo vai carregar de imediato (sem carregamento lento), uma dica de recurso pode reduzir o tempo de configuração da ligação:

<link rel="preconnect" href="https://www.youtube-nocookie.com">

Use isto com moderação, apenas para incorporações genuinamente acima da dobra, já que fazer preconnect a domínios que não usa de imediato desperdiça os mesmos recursos que está a tentar poupar.

9. Meça com ferramentas reais, não por suposição

O Google PageSpeed Insights e o painel Lighthouse incorporado nas ferramentas de programador da maioria dos navegadores assinalam especificamente incorporações de terceiros não otimizadas e estimam o tempo que estas custam. Teste uma página antes e depois de aplicar carregamento lento e um invólucro responsivo para ver a diferença concreta em vez de assumir.

Resumo de impacto

Técnica	Benefício principal
Carregamento lento nativo	Adia por completo as incorporações fora do ecrã
Clicar para carregar	Elimina pedidos para vídeos não reproduzidos
Domínio com privacidade reforçada	Menos scripts relacionados com cookies antes da reprodução
Sem reprodução automática por predefinição	Liberta largura de banda durante o carregamento inicial
Invólucro responsivo	Evita alterações de layout (melhor CLS)
Preconnect para incorporações acima da dobra	Configuração de ligação mais rápida onde importa

Leitura relacionada

Consulte o nosso guia completo de incorporação do YouTube para o panorama completo, e 12 parâmetros de incorporação do YouTube explicados para todas as opções de reprodução.

Perceber o que realmente carrega quando uma incorporação aparece

Para acelerar algo de forma eficaz, ajuda saber o que essa coisa realmente faz. Quando um iframe do YouTube carrega, pede a aplicação JavaScript do leitor, uma imagem de pré-visualização em miniatura, e um conjunto de recursos de rastreamento e configuração dos domínios da Google, tudo isto antes de o visitante premir reproduzir. Isto representa uma carga inicial significativamente maior do que, por exemplo, uma única imagem estática, o que explica exatamente por que razão uma página com várias incorporações a carregar em simultâneo parece mais pesada do que a mesma página com o número equivalente de imagens. Perceber isto é o que torna técnicas como o carregamento lento e o clicar para carregar tão eficazes: têm como alvo especificamente este custo de carregamento anterior à reprodução, em vez de tentarem acelerar a própria transmissão do vídeo, que está largamente fora do seu controlo, já que acontece na infraestrutura da Google.

Medir o impacto específico nos seus Core Web Vitals

Os Core Web Vitals da Google, especificamente o Largest Contentful Paint (LCP) e o Cumulative Layout Shift (CLS), são diretamente afetados pela forma como as incorporações são tratadas. Uma incorporação posicionada perto do topo de uma página e sem carregamento lento pode ela própria tornar-se o elemento LCP, o que significa que o seu tempo de carregamento determina diretamente a pontuação de velocidade reportada para a página. Uma incorporação sem um contentor reservado e corretamente dimensionado é uma das causas mais comuns de penalizações de CLS, já que o conteúdo circundante se desloca visivelmente assim que o leitor finalmente carrega e reclama o seu espaço. Testar uma página no painel Lighthouse do Chrome (incorporado nas DevTools, ou disponível através do PageSpeed Insights) identifica exatamente qual destas duas métricas uma incorporação está a afetar numa página específica, o que lhe indica se precisa de atenção o carregamento lento, o dimensionamento, ou ambos.

Um erro comum: aplicar carregamento lento a tudo, incluindo incorporações acima da dobra

Vale a pena assinalar um erro que vai no sentido contrário: aplicar loading=”lazy” a uma incorporação que já está visível sem ser necessário percorrer a página, mesmo no topo. Aplicar carregamento lento a um elemento acima da dobra pode, na verdade, atrasá-lo ligeiramente em comparação com carregá-lo de forma imediata, já que o navegador tem primeiro de determinar que está na área visível antes de o pedir. A regra geral é aplicar carregamento lento a incorporações abaixo da dobra, e deixar que incorporações genuinamente visíveis no carregamento inicial, se as houver, carreguem normalmente ou até com uma dica explícita de fetchpriority se forem particularmente proeminentes.

Combinar técnicas para um blogue ou site de análises com muito vídeo

Um site que publica regularmente análises ou resumos em vídeo beneficia de combinar deliberadamente várias destas nove técnicas em vez de aplicar apenas uma. Um padrão prático: usar miniaturas de clicar para carregar em cada incorporação de um artigo de resumo estilo lista, reservar espaço corretamente dimensionado para cada miniatura para evitar alterações de layout, usar o domínio com privacidade reforçada em todo o site, e reservar incorporações realmente com reprodução automática e carregamento imediato apenas para um único vídeo de destaque no topo de uma página dedicada a esse vídeo. Esta combinação mantém rápidas as páginas estilo resumo, ao mesmo tempo que oferece a uma página de vídeo principal a experiência mais imediata e de maior qualidade que merece.

Como a velocidade das incorporações se enquadra na estratégia geral de velocidade da página

Vale a pena situar os vídeos do YouTube incorporados no contexto do restante trabalho de velocidade de página de um site. Para a maioria dos sites de conteúdo, as imagens e as fontes web continuam a ser, no geral, o maior contribuinte para o peso da página, com incorporações de terceiros como o YouTube a ocupar tipicamente o segundo lugar. Isto significa que a otimização de incorporações traz ganhos reais e mensuráveis, mas funciona melhor como parte de um esforço mais amplo de velocidade de página do que isoladamente; uma página com uma incorporação do YouTube não otimizada e imagens não otimizadas não se tornará genuinamente rápida corrigindo apenas uma das duas coisas. Priorize aquilo que uma auditoria Lighthouse assinalar como a maior oportunidade nas suas páginas específicas.

Uma nota sobre alternativas a incorporações de terceiros

Alguns sites tentam evitar por completo o custo das incorporações de terceiros alojando os próprios ficheiros de vídeo. Isto troca um conjunto de custos por outro: o vídeo autoalojado exige a sua própria largura de banda e armazenamento, tipicamente não tem a seleção de qualidade de transmissão adaptativa do YouTube, e elimina os benefícios de descoberta e análise de ter o conteúdo também disponível no YouTube. Para a maioria dos sites, uma incorporação do YouTube bem otimizada, usando as nove técnicas deste guia, continua a ser um melhor equilíbrio entre desempenho e funcionalidade do que o autoalojamento, embora plataformas de vídeo de tráfego muito elevado por vezes façam um cálculo diferente.

Uma palavra final sobre a priorização destas nove técnicas

Se só puder implementar uma alteração hoje, faça o carregamento lento nativo; é um único atributo HTML, não tem desvantagens reais para incorporações abaixo da dobra, e tipicamente proporciona a maior melhoria individual das nove técnicas aqui abordadas. Trate o invólucro responsivo como a segunda prioridade, já que as penalizações de alteração de layout se acumulam com cada incorporação numa página que não o tenha, e vá trabalhando nas restantes sete conforme o tempo permitir, mais ou menos pela ordem apresentada acima.

Como isto se relaciona especificamente com o desempenho móvel

As ligações e os dispositivos móveis ampliam o custo de incorporações não otimizadas mais do que os computadores, já que as redes móveis têm mais probabilidade de ter largura de banda limitada e os processadores móveis têm menos margem para lidar com vários elementos de página pesados em simultâneo. Todas as técnicas deste guia ajudam o desempenho móvel pelo menos tanto quanto o desempenho em computador, e o carregamento lento em particular tende a mostrar uma melhoria relativa maior em dispositivos móveis, já que adiar pedidos desnecessários importa mais quando a largura de banda disponível já é, à partida, mais limitada. Se as análises do seu site mostrarem uma audiência móvel relevante, priorize testar estas técnicas especificamente numa ligação móvel simulada com limitação nas DevTools do Chrome, em vez de apenas numa ligação de computador rápida, onde a diferença pode ser muito menos percetível.

Um resumo final das nove técnicas

Entre carregamento lento nativo, padrões de clicar para carregar, o domínio com privacidade reforçada, evitar reprodução automática desnecessária, dimensionamento correto, invólucros responsivos, limitar incorporações por página, dicas de preconnect direcionadas e medição contínua, o fio condutor comum é adiar ou reduzir o trabalho que o navegador tem de fazer antes de um visitante realmente querer assistir a um vídeo específico. Nenhuma destas técnicas exige abdicar do vídeo incorporado do YouTube ou passar para o autoalojamento; simplesmente garantem que o custo de incorporar só é pago quando e onde é realmente necessário.

Uma nota sobre testar em condições reais

Ferramentas de laboratório como o Lighthouse são úteis, mas representam um teste controlado e idealizado; os dados de campo de ferramentas como o Chrome User Experience Report (CrUX) da Google refletem o que os visitantes reais, em redes e dispositivos reais, experienciaram efetivamente. Quando os dois divergem, os dados de campo são geralmente o reflexo mais preciso da experiência real da sua audiência com o vídeo incorporado no seu site.

Perguntas frequentes