Usar o Lighthouse para orçamentos de performance

Katie Hempenius
Katie Hempenius

O Lighthouse agora oferece suporte a orçamentos de performance. Esse recurso, conhecido como LightWallet, pode ser configurado em menos de cinco minutos e oferece feedback sobre métricas de desempenho, tamanho e quantidade dos recursos da página.

Instalar o Lighthouse

O LightWallet está disponível na versão de 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
      }
    ]
  }
]

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

  • Um orçamento de 3.000 ms para o Tempo de interação da página.
  • Um orçamento de 1.000 ms para a primeira pintura 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 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 das métricas de desempenho e dos tipos de recursos compatíveis, consulte a seção Orçamentos de desempenho da documentação do Lighthouse.

Executar o Lighthouse

Execute o Lighthouse usando a sinalização --budget-path. Essa sinalização informa ao Lighthouse a localização 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 incluirá uma seção Orçamentos na categoria Desempenho.

"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.