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
.
Para executar uma auditoria do Lighthouse neste site:
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Lighthouse.
- Clique em Dispositivos móveis.
- Marque a caixa de seleção Performance.
- Desmarque as outras caixas de seleção na seção "Auditoria".
- 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.
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.
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 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"
}
- 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
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.
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:
