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 de sorvete responsiva foi criada com o bootstrap. Bibliotecas de interface como o bootstrap aceleram o desenvolvimento, mas isso geralmente acontece à custa de CSS pesado e desnecessário, o que pode diminuir os tempos de carregamento. O Bootstrap 4 tem 187 KB, enquanto o Semantic UI, outra biblioteca de interface, tem 730 KB sem compactação. 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 da 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 as Ferramentas do desenvolvedor.
  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 Simular 3G rápido, 4x lentidão da CPU.
  7. Marque a caixa de seleção Limpar armazenamento. Com essa opção selecionada, o Lighthouse não carrega recursos do cache, o que simula como os visitantes novos acessam a página.
  8. Clique em Executar auditorias.

Painel de auditorias do Chrome DevTools com tecnologia do Lighthouse

Quando você executa uma auditoria na sua máquina, os resultados exatos podem variar, mas na visualização de filme, você vai notar que o app tem uma tela em branco por um bom tempo antes de 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 Remixar para editar 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 Crítico 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 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 dos 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, poderá gerar CSS crítico que abrange vários tamanhos de janela de visualização.
inline booleano Quando definido como verdadeiro, o CSS crítico gerado é embutido 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 extração de CSS essencial para várias resoluções. Adicione-o a critical.js ou brinque 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. Ele primeiro lê o arquivo de origem HTML, extrai o CSS essencial e substitui index.html pelo CSS crítico inline no <head>.

A matriz dimensions tem dois tamanhos de janela de visualização especificados: 300 x 500 para telas muito pequenas 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 itens críticos aos 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;Generated critical CSS&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