Otimizar a exibição de CSS

Esta regra é acionada quando o PageSpeed Insights detecta que uma página inclui folhas de estilo externas com bloqueio de renderização, o que atrasa a primeira renderização.

Visão geral

Antes que o navegador possa renderizar o conteúdo, ele precisa processar todas as informações de estilo e layout da página atual. Como resultado, o navegador bloqueará a renderização até que as folhas de estilo externas sejam transferidas por download e processadas, o que pode exigir várias viagens de ida e volta e atrasar a primeira renderização. Confira o artigo sobre criação, layout e preenchimento de árvores de renderização para saber mais sobre o caminho essencial da renderização. Leia também sobre CSS de bloqueio de renderização e veja dicas para desbloquear a renderização e melhorar a exibição de CSS.

Recomendações

Se os recursos de CSS externos forem pequenos, é possível inseri-los diretamente no documento HTML, um processo denominado inserção in-line. A inserção in-line de pequenos CSS permite ao navegador prosseguir com a renderização da página. Se o arquivo CSS for grande, a inserção in-line total do CSS poderá fazer com que o PageSpeed Insights notifique que a região acima da dobra na página é grande demais por meio da Priorização do conteúdo visível. No caso de um arquivo de CSS grande, será necessário identificar e inserir in-line o CSS necessário para renderizar o conteúdo acima da dobra e adiar o carregamento dos estilos restantes até o conteúdo acima da dobra ser processado.

Exemplo de inserção in-line de um pequeno arquivo CSS

Se o documento HTML tiver esta aparência: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
 E o recurso small.css for assim: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
 Insira o CSS essencial in-line da seguinte maneira: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Essa transformação, incluindo a determinação de qual CSS é essencial/não essencial, a inserção in-line do CSS essencial e o carregamento adiado do CSS não essencial, pode ser feita automaticamente pelos módulos de otimização do PageSpeed para Nginx, Apache, IIS, ATS e Open Lightspeed ao ativar o filtro prioritize_critical_css.

Confira também a função loadCSS, que ajuda no carregamento assíncrono de CSS e pode ser usada com Critical, uma ferramenta para extração do CSS essencial de uma página.

Os estilos essenciais necessários para estilizar o conteúdo acima da dobra são imediatamente inseridos in-line e aplicados ao documento. O small.css completo é carregado após a exibição inicial da página. Os estilos dele são aplicados à página assim que ela terminar de carregar, sem bloquear a renderização inicial do conteúdo essencial.

Em breve, a plataforma Web será compatível com o carregamento de folhas de estilo sem bloquear a renderização e sem ter que recorrer ao uso de JavaScript, usando importações em HTML.

Não inserir URIs com muitos dados in-line

Tenha cuidado ao realizar a inserção in-line de URIs de dados em arquivos CSS. Embora o uso seletivo de pequenos URIs de dados no CSS possa fazer sentido, a inserção in-line de URIs de dados muito grandes pode fazer com que o tamanho do CSS acima da dobra seja maior, o que diminuirá a velocidade de renderização da página.

Não inserir atributos CSS in-line

A inserção in-line de atributos CSS em elementos HTML (por exemplo, <p style=...>) precisa ser evitada sempre que possível, porque isso muitas vezes leva à duplicação de código desnecessária. Além disso, a inserção in-line de CSS em elementos HTML é bloqueada por padrão com a Política de segurança de conteúdo (CSP, na sigla em inglês).