Extraia CSS crítico
Aprenda como melhorar os tempos de renderização com técnicas críticas de CSS.
O navegador deve baixar e analisar os arquivos CSS antes de mostrar a página, o que torna o CSS um recurso de bloqueio 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 de renderização de uma página da web.
Colocar inline 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 grande diferença no desempenho percebido , especialmente em caso más condições de rede. Em redes móveis, a alta latência é um problema, independentemente da largura de banda.
Se você tem um First Contentful Paint (FCP) ruim e vê a oportunidade "Eliminar recurso de bloqueio de renderização" nas auditorias do Lighthouse, é uma boa ideia dar uma chance ao CSS crítico.
Para minimizar o número de idas e voltas para a primeira renderização, tente manter o conteúdo acima da dobra abaixo de 14 KB (compactado).
O impacto no desempenho que você pode obter com essa técnica depende do tipo de seu 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 podem determinar automaticamente o CSS essencial para uma página. Esta é uma boa notícia porque fazer isso manualmente seria um processo tedioso. Requer análise de todo o DOM para determinar os estilos que são aplicados a cada elemento na janela de visualização.
Critical #
O Critical extrai, minimiza e alinha CSS acima da dobra e está disponível como módulo npm . Ele pode ser usado com Gulp (diretamente) ou com Grunt (como um plugin ) e há também um plugin webpack.
É uma ferramenta simples que exige muito raciocínio durante o processo. Você nem mesmo precisa especificar as folhas de estilo, o Critical as detecta automaticamente. Ele também suporta a extração de CSS crítico para várias resoluções de tela.
criticalCSS #
O CriticalCSS é outro módulo npm que extrai CSS acima da dobra. Também está disponível como CLI.
Ele não tem opções para embutir e minimizar CSS crítico, mas permite que você force a inclusão de regras que não pertencem realmente ao CSS crítico e dá a você um controle mais granular sobre a inclusão de declarações @font-face
Penthouse #
Penthouse é uma boa escolha se seu site ou aplicativo tem um grande número de estilos ou estilos que estão sendo injetados dinamicamente no DOM (comum em aplicativos Angular). Ele usa o Puppeteer nos bastidores e ainda apresenta também uma versão hospedada online.
O Penthouse não detecta folhas de estilo automaticamente. Você precisa 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.