Core Web Vitals Perfeitos no YouTube

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

O YouTube tornou muito simples incorporar um vídeo em sua página. Primeiro, navegue até a página do vídeo e clique em compartilhar abaixo do vídeo

Em seguida, selecione incorporar e copie o código de incorporação:

Copie o código e cole-o no HTML do seu site. Quando você executar uma auditoria no Lighthouse, notará que todas as métricas importantes, como First Contentful Paint, Speed Index, Largest Contentful Paint e o Total Blocking Time aumentaram em cerca de 1 a 1,5 segundos. Uma incorporação padrão do YouTube carrega entre 1,3 e 2,6 MB de JavaScript, CSS, fontes e scripts de rastreamento. Ela faz mais de 20 requisições HTTP para 8 a 10 domínios diferentes. Tudo isso acontece antes mesmo do visitante pressionar play. Vamos consertar isso:

Incorporação padrão do YouTube

Incorporação inteligente do YouTube

Conserte os Core Web Vitals do YouTube!

Vamos consertar os Core Web Vitals criando um placeholder para a imagem. Durante o carregamento da página, o placeholder será carregado. Somente quando realmente precisarmos do vídeo do YouTube, trocaremos o placeholder pelo vídeo real. Isso é chamado de facade pattern: mostre um substituto leve primeiro, carregue o recurso de terceiros pesado apenas na interação. A mesma técnica funciona para Google Maps e widgets de chat.

Passo 1: Baixe a imagem de placeholder

Baixar a imagem de placeholder é muito fácil. Olhe para a url do vídeo do YouTube. Para este exemplo, usaremos esta url: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Como você deve notar, há uma variável na url: 'Oxv6IRcuNaI'. Copie essa variável e cole-a no local da imagem padrão para 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 a imagem, redimensione-a de acordo com suas necessidades.

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 questões de privacidade, você pode usar youtube-nocookie.com em vez de youtube.com na URL de incorporação. Isso evita 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>

Até aqui tudo bem, agora vamos adicionar um pouco de estilo. O padding no placeholder do YouTube é um pequeno truque para garantir que o vídeo seja dimensionado em todos os dispositivos. A imagem é colocada com posição absoluta no topo e possui uma propriedade object-fit:cover. Isso imita uma imagem de fundo, mas permite lazy loading e imagens responsivas. Finalmente, o próprio iframe tem uma posição absoluta e cobre todo o placeholder assim que se torna visível.

Agora a mágica: vamos transformar a imagem de placeholder em um vídeo real. Eu adiciono um event listener ao placeholder do YouTube. Assim que um visitante passa o mouse sobre a imagem, o iframe do YouTube carrega e se torna visível devido à 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);

Sempre mostrar o vídeo do YouTube

Vamos um passo além e colocar o vídeo do YouTube na fila para sempre substituir a imagem de placeholder, mesmo sem qualquer interação. Não quero fazer isso imediatamente, vamos esperar até que o navegador esteja ocioso. Usarei um setTimeout por simplicidade, mas o método requestIdleCallback() seria uma ótima escolha também. Note que o requestIdleCallback ainda não é suportado no Safari 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>

Aí está, pessoal, uma pontuação de page-speed perfeita com um vídeo do YouTube incorporado em apenas algumas linhas de código.

Alternativa: a técnica srcdoc

Se você quiser evitar JavaScript totalmente, você pode usar o atributo srcdoc no iframe. Isso incorpora uma mini página HTML (apenas a miniatura e um botão de play) diretamente na tag iframe. Quando o visitante clica em play, o navegador a substitui 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 srcdoc não carrega nenhum recurso externo até que o visitante interaja. A desvantagem é que em alguns navegadores móveis ela exige dois toques (um para ativar o link srcdoc, outro para reproduzir o vídeo).

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

Se você preferir uma solução drop-in, o web component lite-youtube-embed do Paul Irish faz tudo isso em um único elemento customizado. Ele é aproximadamente 224 vezes mais rápido do que a incorporação padrão do YouTube e é a solução recomendada pelo web.dev.

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

Ele lida com a miniatura, o botão de play, o dimensionamento responsivo e a acessibilidade de forma nativa. Ele usa youtube-nocookie.com por padrão.

Estenda essa técnica

É claro que este é apenas um exemplo simples que funciona somente para um único vídeo do YouTube com um id específico. No seu site, seria uma boa ideia anexar o event listener a um querySelector e também anexar um IntersectionObserver para carregar automaticamente os vídeos do YouTube antes que eles rolem para a área de visualização. Como você quiser estender: a ideia continua a mesma!

Em sites monitorados pelo CoreDash, páginas usando um facade pattern do YouTube têm um LCP médio que é 800ms mais rápido do que páginas carregando a incorporação diretamente. Se você implementou o facade pattern, use Real User Monitoring para verificar a melhoria com dados reais de visitantes.