Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Instale o Lighthouse
  • Crie um orçamento
  • Execute o Lighthouse
  • Veja os resultados
  • Home
  • All articles

Use o Lighthouse para orçamentos de desempenho

Jun 14, 2019 — Atualizado Apr 3, 2020
Available in: English, Español, Русский, 中文, 日本語 e 한국어
Appears in: Tempos de carregamento rápidos
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Nesta página
  • Instale o Lighthouse
  • Crie um orçamento
  • Execute o Lighthouse
  • Veja os resultados

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
Observação: um arquivo de orçamento não precisa ser nomeado 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.

Seção 'Orçamentos' no relatório do Lighthouse

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

Desempenho
Last updated: Apr 3, 2020 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.