0Pricing
Frontend Academy · Aula

Verificações automatizadas do Lighthouse

Adicionar a ação do Lighthouse CI para GitHub, definir limiares de desempenho e acessibilidade e bloquear fusões que diminuam os Core Web Vitals.

Verificações automatizadas do Lighthouse é uma aula grátis de Frontend Academy 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que automatizar o Lighthouse?

As execuções manuais do Lighthouse detectam regressões de desempenho tarde demais — geralmente depois que um usuário real reclama. O Lighthouse CI automatizado é executado em cada PR, faz as compilações falharem quando as principais métricas pioram e acompanha as pontuações ao longo do tempo. Trate o desempenho como uma suíte de testes.

Lighthouse CI

O conjunto de ferramentas de código aberto Lighthouse CI (lhci), criado pelo Google: executa o Lighthouse várias vezes, calcula a mediana, verifica os limites e envia os resultados.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — configuração

Configure as URLs a serem testadas, o número de execuções e as verificações.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Integração com o GitHub Actions

A ação oficial treosh/lighthouse-ci-action executa o lhci em cada PR e publica uma verificação de status.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Mediana de várias execuções

As pontuações do Lighthouse variam entre as execuções por causa de ruídos de temporização. numberOfRuns: 5 calcula a mediana — estável o suficiente para ser comparada com um limite. Menos de 3 execuções produz resultados instáveis.

Orçamentos de desempenho

Além das pontuações, defina limites rígidos para o tamanho e a quantidade de recursos. A compilação falha quando os limites são ultrapassados.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Servidor do Lighthouse CI

Hospede o servidor do LHCI por conta própria para manter dados históricos, visualizar gráficos de tendência e comparar ramificações ao longo do tempo. Ou use o armazenamento público temporário para resultados pontuais de PRs.

Testando páginas autenticadas

Use scripts do Puppeteer para fazer login antes das execuções do Lighthouse.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Notificações do Slack e Discord

Envie os resultados do LHCI para o chat da equipe — as regressões de desempenho merecem a mesma atenção que as falhas nos testes.

Celular versus desktop

O Lighthouse usa o celular como padrão (4G lento e CPU intermediária). Para desktop, defina preset: 'desktop'. A maioria dos aplicativos em produção deve ser analisada nos dois ambientes — use trabalhos separados no CI.

Calibrando os limites

Comece usando as pontuações atuais como referências. Não faça os PRs falharem no primeiro dia — primeiro registre e avise. Quando sua equipe estiver acostumada ao fluxo de trabalho, aumente gradualmente o rigor dos limites.

Além do Lighthouse

O Lighthouse fornece dados de laboratório. Combine-o com o monitoramento de usuários reais (RUM): o pacote npm web-vitals junto com suas análises, ou serviços como SpeedCurve e Calibre, oferece tendências reais de desempenho.

Verificação rápida

Por que o Lighthouse CI normalmente calcula a mediana de várias execuções (por exemplo, 5) em vez de usar uma única execução?

Recapitulação: Lighthouse automatizado

O lhci autorun integra-se ao CI. Configure-o em lighthouserc.json: URLs, execuções (5 ou mais), verificações de categorias e métricas e orçamentos de desempenho. Use treosh/lighthouse-ci-action no GitHub. Hospede o servidor do LHCI por conta própria para acompanhar tendências. Use scripts do Puppeteer para páginas autenticadas. Analise dispositivos móveis e desktops. Comece com avisos e torne os limites mais rigorosos com o tempo. Combine com RUM para obter uma visão completa.

Perguntas Frequentes

A aula “Verificações automatizadas do Lighthouse” é grátis?

Sim — o texto completo de “Verificações automatizadas do 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Verificações automatizadas do Lighthouse”?

Adicionar a ação do Lighthouse CI para GitHub, definir limiares de desempenho e acessibilidade e bloquear fusões que diminuam os Core Web Vitals. Você pratica Frontend Academy 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy 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 “Verificações automatizadas do 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 Frontend Academy?

Sim. Cada aula de Frontend Academy 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. GitHub Actions para frontend: lint, testes e compilação
  2. Implementação no Vercel, Netlify e Cloudflare Pages
  3. Variáveis de ambiente na integração contínua
  4. Verificações automatizadas do Lighthouse
← Voltar para Frontend Academy