Otimizar o fornecimento de CSS

Esta regra é acionada quando o PageSpeed Insights detecta que uma página inclui folhas de estilo externas que bloqueiam o processamento e atrasam a exibição do conteúdo na tela.

Visão geral

Os navegadores são bloqueados por arquivos CSS externos antes de exibir o conteúdo na tela. Isso implica em latência adicional da rede e aumenta o tempo necessário para exibir o conteúdo na tela.

Recomendações

Se os recursos 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 o processamento da página. Se o arquivo CSS for grande, a inserção in-line total do CSS pode fazer com que o PageSpeed Insights notifique que a região acima da dobra na página é muito grande por meio de Priorizar conteúdo visível. No caso de um grande arquivo de CSS, será necessário identificar e inserir in-line o CSS necessário para processar o conteúdo da região acima da dobra e adiar o carregamento dos estilos restantes até mesmo depois que o conteúdo acima da dobra for 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 crítico in-line da seguinte maneira:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

O small.css original é carregado após o carregamento inicial da página. A ordem de aplicação das regras de CSS é mantida ao injetar todos os elementos <style> e <link> no documento por meio de JavaScript.

Não inserir in-line URIs com grande dados

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

Não inserir in-line atributos CSS

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