O Lighthouse agora tem suporte para orçamentos de performance. Esse recurso, conhecido como LightWallet, pode ser configurado em menos de cinco minutos e fornece feedback sobre métricas de desempenho e o tamanho e a quantidade de recursos da página.
Instalar o Lighthouse
O LightWallet está disponível na versão da linha de comando do Lighthouse v5+.
Para começar, instale o Lighthouse:
npm install -g lighthouse
Crie um orçamento
Crie um arquivo chamado budget.json. Nesse arquivo, adicione o seguinte JSON:
[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]
Neste arquivo de exemplo budget.json, definimos cinco orçamentos diferentes:
- Um orçamento de 3.000 ms para o tempo para interação da página.
- Um orçamento de 1.000 ms para a Primeira exibição significativa
- Um orçamento de 125 KB para a quantidade total de JavaScript na página.
- Um orçamento de 300 KB para o tamanho total da página.
- Um orçamento de 10 solicitações para o número de solicitações feitas a origens de terceiros.
Para uma lista completa das métricas de desempenho e tipos de recursos compatíveis, consulte a seção Orçamentos de desempenho dos documentos do Lighthouse.
Executar Lighthouse
Execute o Lighthouse usando a sinalização --budget-path. Esse indicador informa ao Lighthouse a localização do seu arquivo de orçamento.
lighthouse https://example.com --budget-path=./budget.json
Ver os resultados
Se o LightWallet tiver sido configurado corretamente, o relatório do Lighthouse terá uma seção Orçamentos na categoria Desempenho.
Na versão JSON do relatório do Lighthouse, os resultados do Lightwallet podem ser encontrados nas descobertas da auditoria performance-budget.