Core Web Vitals Perfeitos para o 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 (share) abaixo do vídeo

Em seguida, selecione incorporar (embed) 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 solicitações HTTP para 8 a 10 domínios diferentes. Tudo isso acontece antes mesmo do visitante apertar o 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 espaço reservado (placeholder) para a imagem. Durante o carregamento da página, o placeholder será carregado. Somente quando realmente precisarmos do vídeo do YouTube, mudaremos o placeholder para o 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 para 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 mais tarde. Para privacidade, você pode usar youtube-nocookie.com em vez de youtube.com na URL de incorporação. 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>

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 em 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 possui uma posição absoluta e cobre todo o placeholder assim que se torna 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 vem a mágica: vamos transformar a imagem de placeholder em um vídeo real. Eu adiciono um event listener ao placeholder do YouTube. Quando um visitante passa o mouse sobre a imagem, o iframe do YouTube é carregado e se torna visível devido à mudança na 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 dar 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 (idle). Vou usar um setTimeout por simplicidade, mas o método requestIdleCallback() também seria uma ótima escolha. Note que 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>

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

Alternativa: a técnica srcdoc

Se você quiser evitar totalmente o JavaScript, 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 do iframe. Quando o visitante clica em play, o navegador o 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, são necessários 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 pronta (drop-in), o web component lite-youtube-embed de Paul Irish faz tudo isso em um único custom element. 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 (out of the box). Ele usa youtube-nocookie.com por padrão.

Estenda esta técnica

Claro, 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 IntersectionObserver para carregar automaticamente os vídeos do YouTube antes que eles rolem (scroll) para dentro da visualização. Não importa como você queira estendê-lo: a ideia continua a mesma!

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