Saiba como melhorar os tempos de renderização com uma técnica importante do CSS.
O navegador precisa fazer o download e analisar os arquivos CSS antes de mostrar a página, o que faz do CSS um recurso bloqueador de renderização. Se os arquivos CSS forem grandes ou as condições da rede forem ruins, as solicitações de arquivos CSS poderão aumentar significativamente o tempo de renderização de uma página da Web.
.
A inserção in-line de estilos extraídos no <head> do documento HTML elimina a necessidade de fazer uma solicitação adicional para buscar esses estilos. O restante do CSS pode ser carregado de forma assíncrona.
Melhorar os tempos de renderização pode fazer uma enorme diferença no desempenho percebido (link em inglês), especialmente em condições de rede ruins. Nas redes móveis, a alta latência é um problema, independentemente da largura de banda.
Se a First Contentful Paint (FCP) estiver ruim e a mensagem "Eliminar o recurso de bloqueio de renderização" for exibida oportunidade em auditorias do Lighthouse, é uma boa ideia testar os CSS essenciais.
Para minimizar o número de idas e voltas até a primeira renderização, mantenha o conteúdo acima da dobra abaixo de 14 KB (compactado).
O impacto no desempenho que você pode alcançar com essa técnica depende do tipo de site. De modo geral, quanto mais CSS um site tiver, maior será o impacto possível do CSS inline.
Visão geral das ferramentas
Existem várias ferramentas excelentes que determinam automaticamente o CSS essencial para uma página. Essa é uma boa notícia, porque fazer isso manualmente seria um processo tedioso. É necessário analisar todo o DOM para determinar os estilos aplicados a cada elemento na janela de visualização.
Crítico
Critical extrai, reduz e in-line o CSS acima da dobra e está disponível como módulo npm. Ele pode ser usado com o Gulp (diretamente) ou com o Grunt (como um plug-in). Também há um plug-in para webpack (links em inglês).
É uma ferramenta simples que exige muito pensamento para o processo. Não é necessário especificar as folhas de estilo, pois elas são detectadas automaticamente. Ele também oferece suporte à extração de CSS essencial para várias resoluções de tela.
criticalCSS
CriticalCSS é outro módulo npm que extrai CSS acima da dobra. Ele também está disponível como CLI.
Ele não tem opções para in-line e minificar CSS crítico, mas permite que você force a inclusão de regras que não pertencem ao CSS crítico e oferece controle mais granular sobre a inclusão de declarações @font-face.
Cobertura
A Penthouse é uma boa opção quando o site ou app tem um grande número de estilos ou estilos que estão sendo injetados dinamicamente no DOM (comum em apps do Angular). Ele usa o Puppeteer internamente e também apresenta uma versão hospedada on-line.
A Penthouse não detecta folhas de estilo automaticamente. Você deve especificar os arquivos HTML e CSS para os quais deseja gerar CSS crítico. A vantagem é que ele é bom para executar muitos jobs em paralelo.