Core Web Vitals perfeitos com o YouTube

Como incorporar um vídeo do YouTube (do jeito lento)

O YouTube tornou muito simples incorporar um vídeo na página. Primeiro, acesse a página do vídeo e clique em compartilhar abaixo do vídeo

Depois, selecione incorporar e copie o código de embed:

Copie o código e cole no HTML do site. Ao rodar uma auditoria no Lighthouse, você nota que todas as métricas importantes, como o First Contentful Paint, o Speed Index, o Largest Contentful Paint e o Total Blocking Time, aumentaram cerca de 1 a 1,5 segundo. Um embed padrão do YouTube carrega entre 1,3 e 2,6 MB de JavaScript, CSS, fontes e scripts de rastreamento. São mais de 20 requisições HTTP para 8 a 10 domínios diferentes. Tudo isso antes mesmo de o visitante clicar no play. Vamos resolver isso:

Embed padrão do YouTube

Embed inteligente do YouTube

Corrija os Core Web Vitals do YouTube!

Vamos corrigir os Core Web Vitals criando um placeholder para a imagem. Durante o carregamento da página, o placeholder é carregado. Só substituímos o placeholder pelo vídeo real quando ele for realmente necessário. Este é o padrão facade: mostre um substituto leve primeiro e só carregue o recurso pesado de terceiros na interação. A mesma técnica funciona para o Google Maps e para widgets de chat.

Passo 1: baixe a imagem do placeholder

Baixar a imagem do placeholder é bem simples. Veja a URL do vídeo no YouTube. Para este exemplo, usaremos esta URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Note que há uma variável na URL: 'Oxv6IRcuNaI'. Copie essa variável e cole no local padrão de imagem de qualquer vídeo do YouTube https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Abra essa URL, clique com o botão direito na imagem e selecione 'salvar imagem como'. Depois de baixar o arquivo, redimensione conforme o necessário.

Passo 2: crie o placeholder

O próximo passo é criar o placeholder. Vou usar uma div com posicionamento relativo, colocar uma imagem com object-fit:cover e um iframe vazio que preencheremos depois. Por privacidade, você pode usar youtube-nocookie.com em vez de youtube.com na URL de embed. Isso impede que o YouTube defina cookies de rastreamento até que o vídeo realmente seja reproduzido.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        width="560"
        height="315"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe
       id="ytiframe"
       width="560"
       height="315"
       data-src="https://www.youtube-nocookie.com/embed/Oxv6IRcuNaI">
   </iframe>
</div>

Tudo certo até aqui; agora vamos aos estilos. O padding no placeholder do YouTube é um truque para garantir que o vídeo se adapte a qualquer tela. A imagem tem posicionamento absoluto no topo e usa a propriedade object-fit:cover. Isso simula uma imagem de fundo, mas permite lazy loading e imagens responsivas. Por fim, o próprio iframe tem posição absoluta e cobre todo o placeholder assim que fica visível.

Agora vem a mágica: vamos trocar a imagem do placeholder pelo vídeo de verdade. Adiciono um event listener ao placeholder do YouTube. Assim que o visitante passa o mouse sobre a imagem, o iframe do YouTube carrega e fica visível pela mudança de opacidade.

<script>
// youtube placeholder
var ytplaceholder = document.getElementById ('ytplaceholder');

// change the video
var videolistner = function(e) {
   var ytiframe = document.getElementById('ytiframe');
   ytiframe.src = ytiframe.getAttribute('data-src');
   ytiframe.onload = ytiframe.style.opacity = 1;
   ytplaceholder.removeEventListener("mouseover", videolistner);
};

//listen to the mouseover event to change the video
ytplaceholder.addEventListener('mouseover', videolistner);

Exiba sempre o vídeo do YouTube

Vamos dar um passo além: colocar o vídeo do YouTube na fila para sempre substituir o placeholder, mesmo sem qualquer interação. Não quero fazer isso de imediato; é melhor esperar até o navegador ficar ocioso. Vou usar um setTimeout para simplificar, mas o método requestIdleCallback() também é uma ótima opção. Vale notar que o Safari ainda não é compatível com requestIdleCallback por padrão. Use um fallback: const idle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));

<script>
var ytplaceholder = document.getElementById ('ytplaceholder');

var videolistner = function (e) {
   var ytiframe = document.getElementById ('ytiframe');
   ytiframe.src = ytiframe.getAttribute ('data-src');
   ytiframe.onload = ytiframe.style.opacity=1;
   ytplaceholder.removeEventListener ("mouseover", videolistner);
   };

ytplaceholder.addEventListener ('mouseover', videolistner);

// show the YouTube video anyway after 3 seconds
setTimeout(function(){
   videolistner();
},3000);
</script>

Pronto: pontuação perfeita de velocidade com um vídeo do YouTube incorporado em poucas linhas de código.

Alternativa: a técnica do srcdoc

Se você quiser evitar JavaScript por completo, use o atributo srcdoc no iframe. Ele incorpora uma minipágina HTML (apenas a miniatura e o botão de play) direto na tag iframe. Quando o visitante clica no play, o navegador substitui tudo pelo player real do YouTube.

<iframe
   src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
   srcdoc="<style>*{padding:0;margin:0;overflow:hidden}
   html,body{height:100%}
   img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
   span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;
   color:white;text-shadow:0 0 0.5em black}</style>
   <a href=https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1>
   <img src=https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp
   alt='Video title'><span>&#x25BA;</span></a>"
   width="560"
   height="315"
   loading="lazy"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

A abordagem com srcdoc carrega zero recursos externos até a interação do visitante. A desvantagem é que alguns navegadores no celular exigem dois toques (um para ativar o link do srcdoc e outro para reproduzir o vídeo).

Pronto para produção: lite-youtube-embed

Se você prefere uma solução pronta para uso, o web component lite-youtube-embed, de Paul Irish, resolve tudo em um único custom element. Ele é cerca de 224 vezes mais rápido que o embed padrão do YouTube e é a solução recomendada pelo web.dev.

<lite-youtube videoid="Oxv6IRcuNaI"></lite-youtube>

Ele resolve miniatura, botão de play, dimensionamento responsivo e acessibilidade por padrão. E usa youtube-nocookie.com por padrão.

Como expandir essa técnica

É claro que este é apenas um exemplo simples, que funciona para um único vídeo do YouTube com um ID específico. No site, vale a pena atrelar o event listener a um querySelector e adicionar um IntersectionObserver para carregar os vídeos do YouTube antes mesmo de entrarem na tela. Não importa como decida expandir: a lógica é sempre a mesma!

Nos sites monitorados pelo CoreDash, páginas que usam o padrão facade no YouTube têm um LCP médio 800 ms mais rápido em comparação com as que carregam o embed direto. Se você implementou o padrão facade, use o Real User Monitoring para conferir o ganho com dados reais de visitantes.