Os arquivos CSS são recursos de bloqueio de renderização: eles precisam ser carregados e processados antes que o navegador renderize a página. Páginas da Web que contêm folhas de estilo grandes demais levam mais tempo para renderizar.
Neste guia, você vai aprender a adiar o CSS não essencial para otimizar o caminho crítico de renderização e melhorar a First Contentful Paint (FCP).
Exemplo: carregamento de CSS subótimo
O exemplo a seguir contém um acordeão com três parágrafos de texto ocultos, cada um com um estilo de classe diferente:
Esta página solicita um arquivo CSS com oito classes, mas nem todas elas são necessárias para renderizar o conteúdo "visível".
O objetivo deste guia é otimizar essa página para que somente os estilos críticos sejam carregados de maneira síncrona, enquanto o restante (incluindo os estilos de parágrafo) seja carregado sem bloqueio.
Medir
Execute o Lighthouse na página e acesse a seção Performance.
O relatório mostra a métrica First Contentful Paint com um valor de "1s" e a oportunidade Eliminar recursos de bloqueio de renderização, apontando para o arquivo style.css:
Para visualizar como esse 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 "Performance", clique em Reload.
No trace resultante, você verá que o marcador FCP é colocado imediatamente após o carregamento do CSS:
Isso significa que o navegador precisa aguardar o carregamento e o processamento de todo o CSS antes de exibir um único pixel na tela.
Otimizar
Para otimizar essa 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.
Clique duas vezes no relatório para conferir os detalhes:
- As classes marcadas em verde são essenciais. O navegador precisa deles para renderizar o conteúdo visível, incluindo o título, o subtítulo e os botões de acordeão.
- As classes marcadas em vermelho não são críticas e afetam apenas o conteúdo que não está imediatamente visível, como os parágrafos ocultos.
Com essas informações, otimize seu CSS para que o navegador possa começar a processar estilos críticos imediatamente após o carregamento da página e adiar o CSS não crítico para depois:
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 críticos.- O atributo
onload
emlink
permite que o navegador processe o CSS quando a folha de estilo termina de carregar. - "Nullificar" o gerenciador
onload
depois que ele é usado ajuda alguns navegadores a evitar a chamada novamente do gerenciador quando eles mudam o atributorel
. - A referência à folha de estilo dentro do elemento
noscript
oferece uma alternativa para navegadores que não executam JavaScript.
A página resultante tem a mesma aparência da versão anterior, mesmo quando a maioria dos estilos é carregada de forma assíncrona. Veja a aparência dos estilos inline e da solicitação assíncrona ao arquivo CSS no arquivo HTML:
Monitoramento
Use as Ferramentas do desenvolvedor para executar outro rastreamento de performance na página otimizada.
O marcador FCP aparece antes de a página solicitar o CSS. Isso significa que o navegador não precisa aguardar o carregamento do CSS para renderizar a página:
Como etapa final, 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%):
A sugestão Eliminar recursos de bloqueio de renderização não aparece mais em Oportunidades. Agora, ela está na seção Auditorias aprovadas:
Próximas etapas e referências
Neste guia, você aprendeu a adiar o CSS não crítico extraindo manualmente o código não usado na página. Para ambientes de produção mais complexos, o guia de extração essencial de CSS aborda algumas das ferramentas mais usadas para extrair CSS essencial e inclui um codelab para ver como elas funcionam na prática.