Regras e recomendações do PageSpeed

Este guia examina as regras do PageSpeed Insights no contexto: o que devemos considerar ao otimizar o caminho crítico de renderização e por quê.

Elimine JavaScript e CSS que bloqueiam a renderização

Para agilizar a primeira renderização, minimize e, quando possível, elimine o número de recursos críticos na página, minimize o número de bytes críticos baixados e otimize o tamanho do caminho crítico.

Otimizar o uso do JavaScript

Por padrão, os recursos JavaScript bloqueiam o analisador, a menos que marcados como async ou adicionados com um snippet de JavaScript especial. O JavaScript que bloqueia o analisador força o navegador a aguardar o CSSOM e pausa a construção do DOM, o que, por sua vez, pode atrasar significativamente o tempo da primeira renderização.

Dar preferência a recursos JavaScript assíncronos

Recursos assíncronos desbloqueiam o analisador de documentos e permitem que o navegador evite bloqueios no CSSOM antes de executar o script. Muitas vezes, se o script puder usar o atributo async, isso também significa que ele não é essencial para a primeira renderização. Considere carregar scripts de forma assíncrona após a renderização inicial.

Evitar chamadas síncronas do servidor

Use o método navigator.sendBeacon() para limitar os dados enviados por XMLHttpRequests nos gerenciadores unload. Como muitos navegadores exigem que essas solicitações sejam síncronas, eles podem retardar, às vezes visivelmente, as transições entre as páginas. O código a seguir mostra como usar navigator.sendBeacon() para enviar dados ao servidor no gerenciador pagehide em vez de no gerenciador unload.

    <script>
      function() {
        window.addEventListener('pagehide', logData, false);
        function logData() {
          navigator.sendBeacon(
            'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
            'Sent by a beacon!');
        }
      }();
    </script>

O novo método fetch() oferece uma maneira fácil de solicitar dados de forma assíncrona. Como ele ainda não está disponível em todos os lugares, use a detecção de recursos para testar a presença dele antes do uso. Esse método processa respostas com promessas em vez de vários manipuladores de eventos. Ao contrário da resposta a um XMLHttpRequest, a resposta de busca é um objeto de stream a partir do Chrome 43. Isso significa que uma chamada para json() também retorna uma promessa.

    <script>
    fetch('./api/some.json')
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +  response.status);
            return;
          }
          // Examine the text in the response
          response.json().then(function(data) {
            console.log(data);
          });
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
      });
    </script>

O método fetch() também pode processar solicitações POST.

    <script>
    fetch(url, {
      method: 'post',
      headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
      },
      body: 'foo=bar&lorem=ipsum'
    }).then(function() { // Additional code });
    </script>

Adiar a análise de JavaScript

Para minimizar a quantidade de trabalho que o navegador precisa executar para renderizar a página, adie todos os scripts não essenciais que não são essenciais para a construção do conteúdo visível para a renderização inicial.

Evitar JavaScript de longa duração

O JavaScript de longa duração impede que o navegador construa o DOM, o CSSOM e renderize a página. Por isso, adie todas as lógicas e funcionalidades de inicialização que não forem essenciais para a primeira renderização. Se for necessário executar uma sequência de inicialização longa, considere dividi-la em várias etapas para permitir que o navegador processe outros eventos entre elas.

Otimizar o uso do CSS

O CSS é necessário para construir a árvore de renderização, e o JavaScript geralmente é bloqueado no CSS durante a construção inicial da página. Verifique se todos os CSSs não essenciais estão marcados como não críticos (por exemplo, impressões e outras consultas de mídia) e se a quantidade de CSS crítico e o tempo para enviá-los são os menores possíveis.

Colocar CSS no cabeçalho do documento

Especifique todos os recursos CSS o mais cedo possível no documento HTML para que o navegador possa descobrir as tags <link> e enviar a solicitação do CSS o mais rápido possível.

Evitar importações de CSS

A diretiva de importação de CSS (@import) permite que uma folha de estilo importe regras de outro arquivo de folha de estilo. No entanto, evite essas diretivas porque elas introduzem mais idas e voltas ao caminho crítico. Os recursos CSS importados são descobertos somente depois que a folha de estilo CSS com a própria regra @import é recebida e analisada.

Incorporar in-line a CSS de bloqueio de renderização

Para obter o melhor desempenho, considere a inserção do CSS essencial em linha diretamente no documento HTML. Isso elimina idas e voltas adicionais no caminho crítico e, se feito corretamente, pode proporcionar um tamanho de caminho crítico de "uma ida e volta", em que apenas o HTML é um recurso bloqueador.

Feedback