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
- Não inserir URIs com muitos dados in-line
- Não inserir atributos CSS in-line
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).