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 do Lighthouse, notará que todas as métricas importantes como First Contentful Paint, Speed Index, Largest Contentful Paint e Time to Interactive aumentaram cerca de 1 a 1,5 segundos. Vamos corrigir isso:

Incorporação padrão do YouTube

Incorporação 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 será carregado. Somente quando realmente precisarmos do vídeo do YouTube, trocaremos o placeholder pelo vídeo real.

Passo 1: Baixe a imagem de placeholder

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

Como você pode notar, há uma variável no url: 'Oxv6IRcuNaI'. Copie essa variável e cole-a no local de imagem padrão para qualquer vídeo do YouTube https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Abra esse 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 i-frame vazio que preencheremos mais tarde.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe 
       id="ytiframe" 
       data-src="https://www.youtube.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 redimensionado em todos os dispositivos. A imagem é colocada de forma absoluta no topo e tem uma propriedade object-fit:absolute. Isso imita uma imagem de fundo, mas permite o carregamento lento (lazy loading) e imagens responsivas. Finalmente, o próprio iframe tem uma posição absoluta e cobre todo o placeholder quando fica visível.

#ytplaceholder {
    position: relative;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

#ytplaceholder img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover
}

#ytplaceholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 2.4s ease 0s;
}

Agora a mágica: vamos mudar a imagem do placeholder para um vídeo real. Adiciono um event listener ao placeholder do YouTube. Assim que um visitante passa o mouse sobre a imagem, o i-frame do YouTube é carregado 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 do placeholder, mesmo sem nenhuma interação. Não quero fazer isso imediatamente, vamos esperar até que o navegador esteja ocioso (idle). Usarei um time-out por simplicidade, mas o método requestIdleCallback() também seria uma ótima escolha

<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>

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

Estenda esta técnica.

Claro que este é apenas um exemplo simples que funciona apenas 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 interaction-observer para carregar os vídeos do YouTube automaticamente antes que eles apareçam na tela (scroll). Independentemente de como você queira estendê-lo: a ideia continua a mesma!