Os arquivos CSS são recursos que bloqueiam a renderização: eles precisam ser carregados e processados antes que o navegador processe a página. As páginas da Web que contêm folhas de estilo desnecessariamente grandes levam mais tempo para serem renderizadas.
Neste guia, você vai aprender a adiar CSS não essencial para otimizar o caminho crítico de renderização e melhorar a primeira exibição de conteúdo (FCP, na sigla em inglês).
Exemplo: carregamento de CSS abaixo do ideal
O exemplo abaixo contém um acordeão com três parágrafos ocultos de texto, cada um deles estilizado com uma classe diferente:
Esta página solicita um arquivo CSS com oito classes, mas nem todas são necessárias para renderizar o conteúdo "visível".
O objetivo deste guia é otimizar a página para que apenas os estilos críticos sejam carregados de forma síncrona, enquanto o restante (incluindo os estilos de parágrafo) seja carregado sem bloqueio.
Medição
Execute o Lighthouse na página e navegue até a seção Performance.
O relatório mostra a métrica Primeira exibição de conteúdo com um valor de "1s" e a oportunidade Eliminar os recursos de bloqueio de renderização, apontando para o arquivo style.css:
![Relatório
do Lighthouse para página não otimizada, mostrando FCP de "1s" e "Eliminar recursos
de bloqueio" em "Oportunidades"](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?authuser=4&hl=pt-br)
Para conferir como este CSS bloqueia a renderização:
- Abra a página no Chrome.
- Pressione
Control+Shift+J
(ouCommand+Option+J
no Mac) para abrir o DevTools. - Clique na guia Desempenho.
- No painel "Desempenho", clique em Atualizar.
No rastreamento resultante, você verá que o marcador FCP é posicionado imediatamente após o CSS terminar de carregar:
![Rastreamento de desempenho do DevTools para página não otimizada, mostrando a FCP começando após o carregamento do CSS.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?authuser=4&hl=pt-br)
Isso significa que o navegador precisa aguardar todo o CSS ser carregado e processado antes de pintar um único pixel na tela.
Otimizar
Para otimizar esta página, você precisa saber quais classes são consideradas críticas. Para determinar isso, use a Ferramenta de cobertura:
- No DevTools, abra o Menu de comando
pressionando
Control+Shift+P
ouCommand+Shift+P
(Mac). - Digite "Cobertura" e selecione Mostrar cobertura.
- Clique em Atualizar para atualizar a página e começar a capturar a cobertura.
![Cobertura para arquivo CSS, mostrando 55,9% de bytes não utilizados.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?authuser=4&hl=pt-br)
Clique duas vezes no relatório para consultar os detalhes:
- As classes marcadas em verde são essenciais. O navegador precisa deles para renderizar o conteúdo visível, incluindo os botões de título, subtítulo e acordeão.
- As classes marcadas em vermelho não são críticas, apenas afetando conteúdo que não é imediatamente visível, como os parágrafos ocultos.
Com essas informações, otimize o CSS para que o navegador comece a processar estilos essenciais imediatamente após o carregamento da página e adie os CSS não essenciais para mais tarde:
Extraia as definições de classe marcadas com verde no relatório de cobertura e coloque essas classes em um bloco
<style>
no cabeçalho da página:<style type="text/css"> .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;} </style>
Carregue o restante das classes de forma assíncrona aplicando o seguinte padrão:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript>
Essa não é a maneira padrão de carregar CSS. Veja como funciona:
link rel="preload" as="style"
solicita a folha de estilo de forma assíncrona. Saiba mais sobrepreload
no Guia de pré-carregamento de recursos essenciais.- O atributo
onload
emlink
permite que o navegador processe o CSS quando a folha de estilos terminar de carregar. - "anular" o gerenciador
onload
após o uso ajuda alguns navegadores a evitar chamar o gerenciador quando eles mudam o atributorel
. - A referência à folha de estilo dentro do elemento
noscript
fornece um substituto para navegadores que não executam JavaScript.
A página resultante é exatamente igual à versão anterior, mesmo quando a maioria dos estilos é carregada de maneira assíncrona. Veja como os estilos inline e a solicitação assíncrona ao arquivo CSS aparecem no arquivo HTML:
Monitorar
Use o DevTools para executar outro trace de Performance na página otimizada.
O marcador FCP aparece antes da página solicitar o CSS. Isso significa que o navegador não precisa esperar o carregamento do CSS antes de renderizar a página:
![Rastreamento de desempenho
do DevTools para página otimizada, mostrando a FCP antes do carregamento do
CSS.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?authuser=4&hl=pt-br)
Por fim, execute o Lighthouse na página otimizada.
No relatório, você verá que a página FCP foi reduzida em 0,2 s (uma melhoria de 20%):
![Relatório do Lighthouse com um valor de FCP de "0, 8s".](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?authuser=4&hl=pt-br)
A sugestão Eliminar recursos de bloqueio de renderização não aparece mais em Oportunidades. Em vez disso, ela está na seção Auditorias aprovadas:
![Relatório do Lighthouse
mostrando a opção "Eliminar recursos de bloqueio" na seção "Auditorias
aprovadas".](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?authuser=4&hl=pt-br)
Próximas etapas e referências
Neste guia, você aprendeu como adiar CSS não essencial extraindo manualmente o código não utilizado na página. Para ambientes de produção mais complexos, o guia de extração de CSS essencial aborda algumas das ferramentas mais conhecidas para extrair CSS essencial e inclui um codelab para entender como elas funcionam na prática.