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 a Semantic UI, outra biblioteca de interface, tem 730 KB descompactados. Mesmo quando minificado e compactado com gzip, o Bootstrap ainda pesa cerca de 20 KB, bem acima do limite de 14 KB da 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 de 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 Ver app. Em seguida, pressione
Tela cheia
Para executar uma auditoria do Lighthouse neste site:
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
- Clique na guia Lighthouse.
- Clique em Dispositivo móvel.
- Marque a caixa de seleção Desempenho.
- Desmarque o restante das caixas de seleção na seção Auditorias.
- Clique em Simular 3G rápido, 4x lentidão da CPU.
- 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.
- Clique em Executar auditorias.
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.
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.
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 de Críticas úteis. Confira todas as opções disponíveis no GitHub (link em inglês).
| 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 janela de visualização em pixels. |
dimensions |
matriz | Contém objetos com propriedades de largura e altura. Esses objetos representam as janelas de visualização que você deseja segmentar com 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 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 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. Ele primeiro lê o arquivo de origem HTML, extrai o CSS essencial e substitui o 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 foi omitida porque Crítica reduz automaticamente o CSS extraído quando vários tamanhos de janela de visualização foram especificados.
Executar crítico
Adicione itens críticos aos scripts em package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Clique em Terminal. Observação: 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
Agora, na tag <head> de index.html, o CSS crítico gerado está inline entre as tags <style>, seguido por um script que carrega o restante do CSS de forma assíncrona.
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:
