O Que É Critical CSS? Inlining de Estilos Above-the-Fold
Critical CSS é o conjunto mínimo de estilos necessários para renderizar a parte visível, above-the-fold, de uma página, colocado inline para que a página possa pintar sem esperar por uma folha de estilos.
Uma página não pode renderizar até que o seu CSS chegue, e uma requisição bloqueante de folha de estilos atrasa o first paint. Critical CSS extrai apenas os estilos necessários para o conteúdo inicialmente visível e os coloca inline no HTML, para que a página pinte imediatamente enquanto a folha de estilos completa carrega em segundo plano. Extraí-lo é uma etapa em tempo de build que se encaixa no seu pipeline de CI.
Por que ele acelera o first paint
Normalmente o navegador precisa baixar e analisar a folha de estilos completa antes de pintar. Colocar inline o subconjunto crítico remove essa ida e volta para a primeira visualização, então o conteúdo significativo aparece mais cedo.
Como ele é extraído
As ferramentas renderizam a página e determinam quais regras de CSS se aplicam ao conteúdo above-the-fold. Esse subconjunto é colocado inline no head do HTML, e o restante do CSS é carregado de forma assíncrona para que não bloqueie.
Os trade-offs
- First paint mais rápido e melhores métricas de carregamento.
- O CSS inline é duplicado e não é cacheável separadamente.
- Ele precisa ser regenerado quando os estilos ou o layout mudam.
Mantendo-o preciso
Critical CSS só está correto para o layout do qual foi extraído. Se o design mudar mas o critical CSS estiver obsoleto, o first paint pode parecer errado, então ele precisa ser regenerado como parte do build, não editado à mão.
Critical CSS no CI/CD
O build extrai e coloca inline o critical CSS como parte da produção do HTML, para que ele permaneça sincronizado com os estilos atuais a cada deploy. Como a extração pode exigir renderizar a página, ela adiciona tempo de build, o que é uma razão para fazer cache dele quando as entradas estão inalteradas.
Principais conclusões
- Critical CSS coloca inline os estilos above-the-fold para um first paint mais rápido.
- Ele precisa ser regenerado pelo build, não editado à mão, para permanecer preciso.
- O CI o extrai durante o build do HTML para que corresponda aos estilos atuais.