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.
.![Ilustração de um laptop e um dispositivo móvel com páginas da Web ultrapassando as bordas das telas](https://web.dev/static/articles/extract-critical-css/image/an-illustration-a-laptop-aa65b58e2ff2a.png?authuser=8&hl=pt)
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.
![Arquivo HTML com CSS essencial inline no cabeçalho](https://web.dev/static/articles/extract-critical-css/image/html-file-critical-css-i-fe0cbe9d63e5.png?authuser=8&hl=pt)
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.
![Comparação de visualizações em tira de filme do carregamento de uma página com CSS de bloqueio de renderização (parte superior) e a mesma página com CSS crítico inline (na parte inferior) em uma conexão 3G. A tira de filme superior mostra seis frames em branco antes de finalmente exibir o conteúdo. A tira de filme inferior mostra conteúdo significativo no primeiro frame.](https://web.dev/static/articles/extract-critical-css/image/filmstrip-view-comparison-d7cdd821e772.png?authuser=8&hl=pt)
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.