Extraia e insira CSS crítico inline com código

Se você usa uma biblioteca de interface ou cria seus estilos manualmente, o envio de uma quantidade significativa de CSS atrasa a renderização porque o navegador precisa fazer o download e analisar os arquivos CSS antes de mostrar a página.

Esta galeria responsiva de sorvetes foi criada com o Bootstrap. Bibliotecas de interface, como o Bootstrap, aceleram o desenvolvimento, mas isso geralmente acontece às custas de CSS inchado e desnecessário, o que pode retardar os tempos de carregamento. O Bootstrap 4 tem 187 KB, enquanto o Semantic UI, outra biblioteca de interface, tem 730 KB descomprimidos. Mesmo quando minimizado e compactado com Gzip, o Bootstrap ainda pesa cerca de 20 KB, bem acima do limite de 14 KB para a primeira ida e volta.

Critical é uma ferramenta que extrai, reduz e in-line do CSS acima da dobra. Isso permite que o conteúdo acima da dobra seja renderizado o mais rápido possível, mesmo que o CSS para outras partes da página ainda não tenha sido carregado. Neste codelab, você vai aprender a usar o módulo npm do Critical.

Medir

  • Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.

Para executar uma auditoria do Lighthouse neste site:

  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  2. Clique na guia Lighthouse.
  3. Clique em Dispositivos móveis.
  4. Marque a caixa de seleção Performance.
  5. Desmarque as outras caixas de seleção na seção "Auditoria".
  6. Clique em Conexão 3G rápida simulada, lentidão da CPU 4x.
  7. Marque a caixa de seleção Limpar armazenamento. Com essa opção selecionada, o Lighthouse não vai carregar recursos do cache, o que simula a experiência da página para visitantes novos.
  8. Clique em Executar auditorias.

Painel de auditorias do Chrome DevTools, com tecnologia do Lighthouse

Ao fazer uma auditoria na sua máquina, os resultados exatos podem variar, mas, na visualização de tira de filme, você notará que o app ficará com a tela em branco por um tempo antes de finalmente renderizar o conteúdo. É por isso que a First Contentful Paint (FCP) é alta e a pontuação de performance geral não é boa.

Auditoria do Lighthouse mostrando a pontuação de desempenho de 84, 3 segundos de FCP e uma visualização de tira de filme do carregamento do aplicativo

O Lighthouse ajuda você a corrigir problemas de desempenho. Procure soluções na seção Oportunidades. A opção Eliminar os recursos de bloqueio de renderização é listada como uma oportunidade, e é aí que a Crítica brilha.

Seção "Oportunidades" da auditoria do Lighthouse, que lista "Eliminar recursos que impedem a renderização"

Otimizar

  • Clique em Remix to Edit para tornar o projeto editável.

Para acelerar as coisas, a seção "Critical" já está instalada e um arquivo de configuração vazio foi incluído no codelab.

No arquivo de configuração critical.js, adicione uma referência a "Critical" e invoque a função critical.generate(). Essa função aceita um objeto que contém a configuração.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

O tratamento de erros não é obrigatório, mas é uma maneira fácil de avaliar o sucesso da operação no console.

Configurar como crítico

A tabela abaixo contém algumas opções críticas úteis. Confira todas as opções disponíveis no GitHub.

Opção Tipo Explicação
base string O diretório base para seus arquivos.
src string Arquivo de origem HTML.
dest string O destino do arquivo de saída. Se o CSS estiver inline, o arquivo de saída será HTML. Caso contrário, a saída será um arquivo CSS.
width, height números Largura e altura da viewport em pixels.
dimensions matriz Contém objetos com propriedades de largura e altura. Esses objetos representam as viewports que você quer segmentar com o CSS acima da dobra. Se você tiver consultas de mídia no CSS, será possível gerar um CSS essencial que abrange vários tamanhos de janela de visualização.
inline booleano Quando definido como "true", o CSS crítico gerado é incorporado no arquivo de origem HTML.
minify booleano Quando definida como "true", a Critical reduz o CSS crítico gerado. Pode ser omitido ao extrair CSS crítico para várias resoluções porque o estado crítico o reduz automaticamente para evitar a inclusão de regras duplicadas.

Confira abaixo um exemplo de configuração para extrair CSS crítico para várias resoluções. Adicione-o ao critical.js ou teste as opções e ajuste as opções.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Neste exemplo, index.html é o arquivo de origem e de destino porque a opção inline está definida como verdadeira. O recurso crítico primeiro lê o arquivo de origem HTML, extrai o CSS crítico e, em seguida, substitui index.html pelo CSS crítico inline no <head>.

A matriz dimensions tem dois tamanhos de viewport especificados: 300 x 500 para telas extrapequenas e 1.280 x 720 para telas de laptop padrão.

A opção minify é omitida porque o Critical minimiza automaticamente o CSS extraído quando há vários tamanhos de janela de visualização especificados.

Executar crítico

Adicione "Critical" aos seus scripts em package.json:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. Clique em Terminal. Se o botão "Terminal" não aparecer, talvez seja necessário usar a opção "Tela cheia".

Para gerar um CSS essencial, execute o seguinte no console:

npm run critical
refresh
Mensagem de sucesso &quot;CSS crítico gerado&quot; no console
Mensagem de sucesso no console

Agora, na tag <head> de index.html, o CSS crítico gerado é inline entre as tags <style>, seguido por um script que carrega o restante do CSS de forma assíncrona.

index.html com CSS essencial inline
CSS essencial inline

Medir de novo

Siga as etapas do início do codelab para executar a auditoria de desempenho do Lighthouse novamente. Os resultados serão parecidos com estes:

Auditoria do Lighthouse mostrando a pontuação de desempenho de 100, FCP de 0,9 segundos e visualização de tira de filme melhorada do carregamento do app