Saiba como melhorar os tempos de renderização com uma técnica CSS essencial.
O navegador precisa fazer o download e analisar os arquivos CSS antes de mostrar a página, o que torna o 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 podem aumentar significativamente o tempo necessário para uma página da Web ser renderizada.
A inserção in-line de estilos extraídos no <head> do documento HTML elimina a necessidade de fazer outra solicitação para buscar esses estilos. O restante do CSS pode ser carregado de forma assíncrona.
Melhorar os tempos de renderização pode fazer uma grande diferença no desempenho percebido, especialmente em condições de rede ruins. Em redes móveis, a alta latência é um problema independentemente da largura de banda.
Se você tiver problemas de Primeira exibição de conteúdo (FCP) e encontrar a oportunidade "Eliminar recurso de bloqueio de renderização" nas auditorias do Lighthouse, convém testar o CSS essencial.
Para minimizar o número de idas e voltas na primeira renderização, tente manter o conteúdo acima da dobra com menos de 14 KB (compactado).
O impacto no desempenho que você pode conseguir 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
Há várias ótimas ferramentas que podem determinar automaticamente o CSS essencial para uma página. Essa é uma boa notícia, porque fazer isso manualmente seria um processo tedioso. A análise de todo o DOM é necessária para determinar os estilos aplicados a cada elemento na janela de visualização.
Crítico
Crítico 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 plugin). Também há um plug-in webpack (links em inglês).
É uma ferramenta simples que exige muita reflexão no processo. Você não precisa especificar as folhas de estilo, porque o Crítico as detecta automaticamente. Ele também oferece suporte à extração de CSS essencial para várias resoluções de tela.
criticalCSS
CriticalCSS é outro módulo npm (em inglês) que extrai CSS acima da dobra. Ele também está disponível como uma CLI.
Ele não tem opções para reduzir inline e reduzir CSSs essenciais, mas permite forçar a inclusão de regras que não pertencem a CSS essencial e oferece controle mais granular sobre a inclusão de declarações @font-face.
Cobertura
A Penthouse é uma boa opção quando seu site ou app tem um grande número de estilos ou estilos que estão sendo injetados dinamicamente no DOM (comum nos aplicativos do Angular). Ele usa o Puppeteer em segundo plano e também conta com uma versão hospedada on-line.
A Penthouse não detecta folhas de estilo automaticamente. É preciso especificar os arquivos HTML e CSS para os quais você quer gerar CSS essencial. A vantagem é que ele é bom para executar muitos jobs em paralelo.