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.
![Ilustração de um laptop e um dispositivo móvel com páginas da Web ultrapassando as bordas das telas.](https://web.developers.google.cn/static/articles/extract-critical-css/image/an-illustration-a-laptop-aa65b58e2ff2a.png?authuser=2&hl=pt-br)
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.
![Arquivo HTML com CSS essencial inline no cabeçalho](https://web.developers.google.cn/static/articles/extract-critical-css/image/html-file-critical-css-i-fe0cbe9d63e5.png?authuser=2&hl=pt-br)
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.
![Comparação de visualização em tira de filme do carregamento de uma página com CSS de bloqueio de renderização (na parte superior) e a mesma página com CSS essencial 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.developers.google.cn/static/articles/extract-critical-css/image/filmstrip-view-comparison-d7cdd821e772.png?authuser=2&hl=pt-br)
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.