Use o Lighthouse para orçamentos de desempenho

Jun 14, 2019 — Atualizado Apr 3, 2020

Available in: English, Español, Русский, 中文, 日本語, and 한국어

Appears in: Tempos de carregamento rápidos

Katie Hempenius

TwitterGitHubGlitchHomepage

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

Instale 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 e 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
      }
    ]
  }
]

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

• Um orçamento de 3000 ms para Time to Interactive (TTI), ou tempo até interatividade
• Um orçamento de 1000 ms para First Meaningful Paint (FMP), ou primeira exibição importante
• 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 feitas a origens de terceiros

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

Execute o Lighthouse #

Execute o Lighthouse usando a flag --budget-path , que informa a localização do seu arquivo de orçamento à ferramenta.

lighthouse https://example.com --budget-path=./budget.json

Veja os resultados #

Se o LightWallet tiver sido configurado corretamente, o relatório do Lighthouse conterá uma seção de Orçamentos na categoria Desempenho.

Na versão JSON do relatório do Lighthouse, é possível encontrar os resultados do LightWallet nos achados da auditoria de performance-budget.