Web Performance Optimization & Lighthouse · Aula

Orçamentos de Desempenho com Lighthouse

Defina e aplique orçamentos de desempenho para que os limites de tamanho e das métricas sejam verificados automaticamente, evitando regressões antes que cheguem à produção.

Aula 4 de 413 etapas

Orçamentos de Desempenho com Lighthouse é uma aula grátis de Web Performance Optimization & Lighthouse no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Performance Optimization & Lighthouse, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Performance Optimization & Lighthouse inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

What Is a Performance Budget?

A performance budget is a set of agreed limits, such as max JavaScript size or a minimum LCP, that the team commits not to exceed. It turns vague goals into enforceable thresholds.

Why Budgets Matter

Without budgets, performance erodes silently as features pile on. A budget makes regressions visible and blocking, shifting performance left into development.

Two Kinds of Budgets

  • Resource budgets: byte size and request counts per type (script, image, total).
  • Timing budgets: metric thresholds like LCP, TBT, CLS.

The budget.json File

Lighthouse reads a budget.json describing resource and timing limits. It then flags any audited page that exceeds them.

[{
  "resourceSizes": [
    { "resourceType": "script", "budget": 170 },
    { "resourceType": "total", "budget": 500 }
  ]
}]

Adding Timing Budgets

Timings are listed alongside sizes. Values are in milliseconds for time metrics.

[{
  "timings": [
    { "metric": "largest-contentful-paint", "budget": 2500 },
    { "metric": "interactive", "budget": 3800 }
  ]
}]

Running with a Budget

Pass the budget file to the Lighthouse CLI. Exceeded items appear in the report's Budgets section.

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

Enforcing in CI with LHCI

Lighthouse CI (lhci) can assert budgets and fail the build when limits are breached, so regressions never merge.

// lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "resource-summary:script:size": ["error", { "maxNumericValue": 174080 }]
      }
    }
  }
}

Warn vs Error Levels

Assertions support warn and error levels. Start new budgets as warnings to gather data, then promote to errors once the team is confident.

Setting Realistic Limits

Base budgets on current measurements plus a small margin, or on competitor benchmarks. Budgets that are impossible to meet get ignored; budgets that are too loose never fire.

Tracking Over Time

The LHCI server stores historical results so you can chart metric and size trends and tighten budgets gradually as performance improves.

Workflow Summary

  • Define resource and timing budgets.
  • Run them locally via CLI.
  • Assert them in CI with LHCI.
  • Start as warnings, then enforce as errors.

Quick Check

You want a pull request to fail automatically when the script bundle grows beyond a set size. What achieves this?

Recap

You learned to set resource and timing budgets in budget.json, run them with the Lighthouse CLI, and enforce them in CI via Lighthouse CI assertions. Start with warnings, promote to errors, and track trends to keep performance from regressing.

Grátis para começar

Aprenda Web Performance Optimization & Lighthouse com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
12
Aulas
48

Perguntas Frequentes

A aula “Orçamentos de Desempenho com Lighthouse” é grátis?

Sim — o texto completo de “Orçamentos de Desempenho com Lighthouse” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Performance Optimization & Lighthouse, atualize para CoddyKit PRO. O curso de Web Performance Optimization & Lighthouse inclui 4 aulas no total.

O que vou aprender em “Orçamentos de Desempenho com Lighthouse”?

Defina e aplique orçamentos de desempenho para que os limites de tamanho e das métricas sejam verificados automaticamente, evitando regressões antes que cheguem à produção. Você pratica Web Performance Optimization & Lighthouse com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Web Performance Optimization & Lighthouse?

Nenhuma experiência prévia é necessária. Web Performance Optimization & Lighthouse no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Orçamentos de Desempenho com Lighthouse”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Web Performance Optimization & Lighthouse?

Sim. Cada aula de Web Performance Optimization & Lighthouse inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Lighthouse pela CLI e de forma programática
  2. Auditorias e asserções personalizadas
  3. Integração do Lighthouse à integração e implantação contínuas
  4. Orçamentos de Desempenho com Lighthouse
← Voltar para Web Performance Optimization & Lighthouse