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. As páginas da Web que contêm folhas de estilo desnecessariamente grandes levam mais tempo para serem renderizadas.
Aprenda a adiar o CSS não essencial para otimizar o caminho crítico de renderização e melhorar o First Contentful Paint (FCP).
Carregamento de CSS abaixo do ideal
O exemplo a seguir contém um acordeão com três parágrafos de texto ocultos, cada um estilizado com uma classe diferente:
Essa 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 essa 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 de forma não bloqueadora.
Medir
Execute o Lighthouse no DevTools para analisar métricas importantes.
- Abra a demonstração no Chrome.
- Abra o Chrome DevTools.
- Selecione o painel de desempenho.
- No painel, atualize a página.
O relatório mostra a métrica First Contentful Paint com o valor "1s" e a oportunidade Eliminar recursos de bloqueio de renderização, apontando para o arquivo style.css:
No rastreamento resultante, o marcador FCP é colocado imediatamente depois que o CSS termina de carregar: