Estilize a primeira tela sem demora
CSS crítico é o conjunto de regras necessário para estilizar a viewport inicial de uma página específica. Entregar essas regras logo no começo pode permitir que a primeira tela seja renderizada enquanto o restante da folha de estilos ainda carrega.
Incorporar o CSS tem um custo: as regras aumentam o HTML e podem duplicar uma folha de estilos baixada separadamente. Vale a pena quando elimina um atraso real de renderização, e não quando apenas transfere para o documento todas as regras de estilo.
Encontre as regras que a viewport precisa
Inspecione a primeira tela em larguras representativas de desktop e mobile. Identifique o cabeçalho, a navegação, o título principal, a imagem e os controles, e depois verifique quais regras de layout, tipografia e componentes eles exigem.
Uma página de produto e uma listagem de categoria podem precisar de regras diferentes. Menus ocultos, breakpoints responsivos e fallbacks de fonte podem criar dependências que uma captura de tela do desktop não mostra.
Teste os estilos extraídos
Mantenha a folha de estilos completa disponível para o restante da página. Em um navegador de teste, atrase o carregamento dela de propósito e inspecione a tela inicial em busca de elementos sem estilo, regras de layout ausentes e controles ilegíveis. Confira o fallback caso algum mecanismo de carregamento baseado em JavaScript falhe.
Compare a primeira visita com as visitas repetidas. Uma melhora na primeira visita pode ser anulada por CSS duplicado ou pela perda do benefício do cache. Use a cascata de requisições e o rastreamento de renderização para ver se a mudança elimina o atraso original.
Mantenha-o alinhado ao design
Refaça a extração após qualquer mudança em fonte, componente ou breakpoint. CSS crítico desatualizado pode causar um flash de estilos incorretos ou um deslocamento quando a folha de estilos completa chega.
Não existe um limite universal de bytes que torne a extração correta. O resultado útil é uma primeira tela renderizada logo no início, estável, com o restante dos estilos carregado de forma confiável.