Otimizar a exibição de CSS

. Esta regra é acionada quando o PageSpeed Insights detecta que uma página inclui bloqueio de renderização externo as folhas de estilo, que atrasam o tempo da 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. Consulte construção, layout e pintura da árvore de renderização para saber mais sobre o caminho crítico de renderização, e renderizar bloqueio de CSS para dicas sobre como 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 será assim: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
 Em seguida, é possível inline no CSS crítico da seguinte forma: 
<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 CSS crítico/não crítico, inline do CSS crítico e carregamento adiado de CSS não crítico, podem ser feitas automaticamente Módulos de otimização do PageSpeed para nginx, apache, IIS, ATS e Open Lightspeed, ao ativar filtro prioritize_critical_css.

Consulte também loadCSS para ajudar a carregar CSS de forma assíncrona, que pode funcionar com Crítico, uma ferramenta para extrair o CSS essencial de uma página da Web.

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

Atributos CSS inline em elementos HTML (por exemplo, <p style=...>) precisa ser evitado sempre que possível, porque isso geralmente leva à duplicação desnecessária de código. Além disso, a inserção in-line de CSS em elementos HTML é bloqueada por padrão com Política de Segurança de Conteúdo (CSP).

Feedback

Esta página foi útil?