Quer você use uma biblioteca de interface ou crie 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 exibir a página.
Esta galeria de sorvetes responsivas foi criada com o Bootstrap. Bibliotecas de interface como o Bootstrap aceleram o desenvolvimento. No entanto, isso muitas vezes prejudica o uso de CSS excessivo e desnecessário, o que pode diminuir o tempo de carregamento. O Bootstrap 4 tem 187 KB, enquanto a Semantic UI, outra biblioteca de interface, tem impressionantes 730 KB descompactada. Mesmo quando minificado e compactado com gzip, o Bootstrap ainda pesa cerca de 20 KB, bem acima do limite de 14 KB da primeira viagem de ida e volta.
Crítico é uma ferramenta que extrai, reduz e in-line o 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.
Medida
- 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 Simulado 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 a experiência dos novos visitantes na página.
- Clique em Executar auditorias.
Ao fazer uma auditoria na máquina, os resultados exatos podem variar, mas, na visualização de tira de filme, você vai perceber que o app fica com uma tela em branco por um tempo antes de finalmente renderizar o conteúdo. É por isso que a Primeira exibição de conteúdo (FCP, na sigla em inglês) é 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. Eliminar os recursos que bloqueiam a renderização é uma oportunidade, e é aí que a seção crítica se destaca.
Otimizar
- Clique em Remixar para editar para tornar o projeto editável.
Para acelerar o processo, o Critical já está instalado e um arquivo de configuração vazio está incluído no codelab.
No arquivo de configuração critical.js, adicione uma referência a arquivos essenciais 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 itens críticos
A tabela abaixo contém algumas opções importantes ú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 | Destino do arquivo de saída. Se o CSS estiver em linha, 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 seu CSS, isso permitirá que você gere CSS essencial que abrange vários tamanhos de janela de visualização. |
inline |
boolean | Quando definido como verdadeiro, o CSS crítico gerado é in-line no arquivo de origem HTML. |
minify |
boolean | Quando definida como verdadeira, a função Critical minimiza o CSS crítico gerado. Pode ser omitido ao extrair o CSS crítico para várias resoluções, porque a função Crítica o reduz automaticamente para evitar a inclusão de regras duplicadas. |
Veja abaixo um exemplo de configuração para extrair CSS essencial para várias resoluções. Adicione a critical.js ou teste 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');
}
});
Nesse exemplo, index.html é o arquivo de origem e de destino porque a opção inline está definida como verdadeira. O crítico primeiro lê o arquivo de origem HTML, extrai o CSS essencial e substitui index.html por CSS essencial inline no <head>.
A matriz de dimensions tem dois tamanhos especificados da janela de visualização: 300 x 500 para telas muito pequenas e 1.280 x 720 para telas de laptop padrão.
A opção minify é omitida porque a função Crítica minimiza automaticamente o CSS extraído quando há vários tamanhos de janela de visualização especificados.
Execução crítica
Adicione itens essenciais aos seus 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 for exibido, talvez seja necessário usar a opção "Tela cheia".
Para gerar CSS essencial, no console, execute:
npm run critical
refresh
Agora, na tag <head> de index.html, o CSS crítico gerado está alinhado entre as tags <style>, seguido por um script que carrega o restante do CSS de forma assíncrona.
Medir novamente
Siga as etapas do início do codelab para executar a auditoria de desempenho do Lighthouse novamente. Os resultados obtidos serão parecidos com estes:
