Reduzir o tamanho do conteúdo da região acima da dobra

Esta regra é acionada quando o PageSpeed Insights detecta os movimentos de ida e volta adicionais na rede que são necessários para processar o conteúdo da região acima da dobra na página.

Visão geral

Se a quantidade de dados exigida exceder a janela inicial de congestão, serão necessários envios adicionais de dados entre o servidor e o navegador do usuário. Para usuários em redes com latências altas, como as redes móveis, isso pode causar atrasos significativos no carregamento da página.

Recomendações

Para acelerar o carregamento das páginas, limite o tamanho dos dados (marcação HTML, imagens, CSS, JavaScript) que são necessários para processar o conteúdo da região acima da dobra na página. Há diversas maneiras de fazer isso:

Estruture seu HTML para carregar primeiramente somente o conteúdo crítico, da região acima da dobra

Primeiro, carregue o conteúdo principal da sua página. Estruture-a para que a resposta inicial do servidor envie os dados necessários para processar imediatamente a parte crítica da página e adiar o resto. Isso pode tornar necessária a divisão de seu CSS em duas partes: uma parte in-line, sendo responsável por configurar a parte ATF do conteúdo, e a parte que pode ser adiada.

Considere os exemplos a seguir de como é possível reestruturar um site para que ele carregue mais rápido:

  • Caso seu HTML carregue os widgets de terceiros antes do conteúdo principal, altere a ordem para carregar o conteúdo principal primeiramente.
  • Se o site usa um layout de duas colunas com uma barra lateral de navegação e um artigo, mas o HTML carrega a barra lateral antes do artigo, considere carregar o artigo antes.

Reduza a quantidade de dados usados pelos recursos

Assim que seu site for reprojetado para funcionar com eficiência em vários dispositivos e carregar o conteúdo crítico primeiramente, use as técnicas a seguir para reduzir a quantidade de dados necessários para processar sua página: