Core Web Vitals Perfeitos com YouTube

Como incorporar um vídeo do YouTube (a forma lenta)

O YouTube tornou bastante simples incorporar um vídeo na vossa página. Primeiro navegem até à página do vídeo e cliquem em partilhar abaixo do vídeo

Depois selecionem incorporar e copiem o código de incorporação:

Copiem o código e colem-no no HTML do vosso site. Quando executarem um audit Lighthouse irão notar que todas as métricas importantes como First Contentful Paint, Speed Index, Largest Contentful Paint e o Total Blocking Time aumentaram 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. Faz mais de 20 pedidos HTTP a 8 a 10 domínios diferentes. Tudo isto acontece antes do visitante sequer carregar em play. Vamos corrigir isto:

Incorporação padrão do YouTube

Incorporação inteligente do YouTube

Corrigir 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. Só quando realmente precisarmos do vídeo do YouTube é que substituiremos o placeholder pelo vídeo real. Isto chama-se o padrão facade: mostrar primeiro um substituto leve, carregar o recurso pesado de terceiros apenas na interação. A mesma técnica funciona para Google Maps e widgets de chat.

Passo 1: Descarregar a imagem placeholder

Descarregar a imagem placeholder é muito fácil. Olhem para o URL do vídeo do YouTube. Para este exemplo vamos usar este URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Como devem ter reparado, há uma variável no URL: 'Oxv6IRcuNaI'. Copiem essa variável e colem-na na localização padrão da imagem de qualquer vídeo do YouTube https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Abram esse URL, cliquem com o botão direito na imagem e selecionem 'guardar imagem como'. Depois de descarregarem a imagem, redimensionem-na conforme necessário.

Passo 2: Criar o placeholder

O próximo passo é criar o placeholder. Vou usar um div com posição relativa, colocar uma imagem com object-fit:cover e um iframe vazio que iremos preencher mais tarde. Para privacidade, podem usar youtube-nocookie.com em vez de youtube.com no URL de incorporação. Isto impede o YouTube de definir cookies de rastreamento até o vídeo ser efetivamente 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 algum estilo. O padding no placeholder do YouTube é um pequeno truque para garantir que o vídeo escala em todos os dispositivos. A imagem é posicionada de forma absoluta no topo e tem a propriedade object-fit:cover. Isto imita uma imagem de fundo mas permite lazy loading e imagens responsivas. Finalmente, o iframe em si 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 magia: vamos trocar a imagem placeholder por um vídeo real. Adiciono um event listener ao placeholder do YouTube. Quando um visitante passa o cursor sobre a imagem, o iframe do YouTube carrega e torna-se visível graças à 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);

Mostrar sempre o vídeo do YouTube

Vamos um passo mais além e agendar o vídeo do YouTube para substituir sempre a imagem placeholder, mesmo sem qualquer interação. Não quero fazer isso imediatamente, vamos esperar até o browser estar inativo. Vou usar um setTimeout por simplicidade, mas o método requestIdleCallback() também seria uma excelente escolha. Notem que o requestIdleCallback ainda não é suportado no Safari por defeito. Usem 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á, um score de PageSpeed perfeito com um vídeo do YouTube incorporado em apenas algumas linhas de código.

Alternativa: a técnica srcdoc

Se quiserem evitar JavaScript por completo, podem usar o atributo srcdoc no iframe. Isto 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 browser substitui-a 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 carrega zero recursos externos até o visitante interagir. A contrapartida é que em alguns browsers mobile requer dois toques (um para ativar o link srcdoc, outro para reproduzir o vídeo).

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

Se preferirem uma solução pronta a usar, o web component lite-youtube-embed de Paul Irish faz tudo isto num único elemento personalizado. É aproximadamente 224 vezes mais rápido que a incorporação padrão do YouTube e é a solução recomendada pelo web.dev.

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

Trata da miniatura, do botão de play, do dimensionamento responsivo e da acessibilidade automaticamente. Usa youtube-nocookie.com por defeito.

Expandir 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 vosso site seria boa ideia associar o event listener a um querySelector e também associar um IntersectionObserver para carregar automaticamente os vídeos do YouTube antes de entrarem na área visível. Independentemente de como queiram expandir: a ideia permanece a mesma!

Nos sites monitorizados pelo CoreDash, as páginas que usam o padrão facade do YouTube têm um LCP médio que é [CD:placeholder]ms mais rápido do que as páginas que carregam a incorporação diretamente. Se implementaram o padrão facade, usem Real User Monitoring para verificar a melhoria com dados reais de visitantes.