Usar o Lighthouse para orçamentos de performance

Katie Hempenius
Katie Hempenius
X

O Lighthouse agora é compatível com montantes de desempenho. Esse recurso, conhecido como LightWallet, pode ser configurado em menos de cinco minutos e fornece feedback sobre métricas de performance e o tamanho e a quantidade de recursos da página.

Instalar o Lighthouse

A LightWallet está disponível na versão de linha de comando do Lighthouse v5+.

Para começar, instale o Lighthouse:

npm install -g lighthouse

Criar 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
      }
    ]
  }
]

Este exemplo de arquivo budget.json define cinco orçamentos separados:

  • Um orçamento de 3.000 ms para o Time to Interactive.
  • Um orçamento de 125 KB para a quantidade total de JavaScript na página.
  • Um orçamento de 300 KB para o tamanho geral da página.
  • Um orçamento de 10 solicitações para o número de solicitações feitas a origens de terceiros.

Para ver uma lista completa de métricas de performance e tipos de recursos compatíveis, consulte a seção Montantes de desempenho da documentação do Lighthouse.

Executar o Lighthouse

Execute o Lighthouse usando a flag --budget-path. Essa flag informa ao Lighthouse o local do 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 vai conter uma seção Orçamentos na categoria Desempenho.

Seção "Orçamentos" do relatório do Lighthouse

Na versão JSON do relatório do Lighthouse, os resultados do Lightwallet podem ser encontrados nas descobertas da auditoria performance-budget.