Melhorar Pontuação Google PageSpeed Insights de Vídeo

Vamos dar uma orientada para que sua pontuação melhore na questão de vídeos e sem plugin para isso.

Se o seu site Wordpress está lento e obtendo pontuação baixa no PageSpeed Insights, há um meio para melhorar.

Porém, você terá que editar o arquivo header.php do wordpress, que está dentro da pasta do seu tema, no meu caso, para esse teste, a pasta está localizada em wp-content/themes/oceanwp

Esse código fará sua página carregar muito mais rápido e a pontuação aumenta.

Ele não irá puxar direto o vídeo para a página, somente após clicar no vídeo, que ele virá.

Com isso sua página terá uma pontuação melhor no Google PageSpeed Insights.

Nota: Não usei plugin de otimização nesse teste para mostrar o carregamento mais rápido da página.

No seu caso, acredito que possa usar o cPanel, pois a maioria usa empresa de hospedagem compartilhada, então você terá que ir no gerenciador de arquivos e editar lá.

Caso queira já fazer no site, ok. Mas também aconselho a fazer o backup do arquivo  header.php. Pode salvar em seu computador  ou copiar o conteúdo e colar em um novo arquivo, renomeando conforme quiser, caso aconteça um erro, basta colocar no header.php e tudo se resolve.

 No arquivo header.php após aberto, pesquise por /head

Observe bem a imagem abaixo, na linha 117 está o /head

Então copie os códigos e cole acima do /head, exatamente como está na imagem, na linha 116, salve e pronto. O código está abaixo a última imagem.

Eu uso o Editor Notepad++

Cole e salve, verifique se ficou exatamente conforme a imagem abaixo

 Código abaixo

<script>
  /*
   * Light YouTube Embeds by @labnol
   * Credit: https://www.labnol.org/
   */

  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute(
      'src',
      'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'
    );
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute(
      'allow',
      'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
    );
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName('youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace(
        'ID',
        videoId
      );
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('//i.imgur.com/TxzC70f.png') no-repeat;
    cursor: pointer;
  }
</style>

Agora a parte simples, tome como referência o código, basta substituir o VIDEO_ID

<div class="youtube-player" data-id="VIDEO_ID"></div>

ou seja, pegue o final da url

se o link for  https://youtu.be/Ao33uiuyiI8 

pegue após a última barra

<div class="youtube-player" data-id="Ao33uiuyiI8"></div>

E insira o código na sua página

Veja o vídeo que fiz mostrando a pontuação da página que coloquei o código e a outra sem código

Esse código eu encontrei nessa página, foi a sugestão que o PageSpeed Insights deu para um de meus sites.

O Wordpress está praticamente zerado, e somente o vídeo sem o código ferra geral na pontuação