Auditorias e pontuação do Lighthouse
Execute o Lighthouse no DevTools ou em CI, leia a pontuação de desempenho e os diagnósticos e priorize as oportunidades com maior potencial de economia.
Auditorias e pontuação do Lighthouse é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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.
O que é o Lighthouse?
Lighthouse é uma ferramenta de auditoria de código aberto do Google que simula o carregamento de uma página e atribui pontuações nas categorias Desempenho, Acessibilidade, Práticas recomendadas, SEO e PWA. Ela vem integrada ao Chrome DevTools e pode ser executada pela CLI ou na integração contínua.
Executando o Lighthouse no DevTools
Abra o DevTools, clique na aba Lighthouse, escolha as categorias e o dispositivo (celular/computador) e clique em 'Analisar o carregamento da página'. O teste simulado leva cerca de 30 segundos.
Detalhamento da pontuação de desempenho
A pontuação de desempenho (0–100) é uma média ponderada de: LCP (25%), tempo total de bloqueio (30%), CLS (25%), FCP (10%) e índice de velocidade (10%). O nível é exigente: 90 ou mais é considerado 'Bom'.
Primeira renderização de conteúdo (FCP)
FCP indica quando o primeiro conteúdo (texto ou imagem) é renderizado. É diferente do LCP: FCP considera qualquer conteúdo, enquanto LCP considera o maior elemento. Bom: abaixo de 1,8 s.
Tempo total de bloqueio (TBT)
TBT mede por quanto tempo a linha de execução principal fica bloqueada por tarefas de JavaScript com duração superior a 50 ms. Um TBT alto faz a página parecer sem resposta, mesmo quando ela parece pronta.
Lendo a seção de oportunidades
O Lighthouse lista 'Oportunidades' com economias estimadas (por exemplo, 'Elimine recursos que bloqueiam a renderização: 1,2 s'). Ordene pelas economias e corrija primeiro os itens maiores para obter o máximo impacto.
Oportunidades comuns
Correções frequentes: adiar ou carregar de forma assíncrona scripts não críticos, inserir o CSS crítico diretamente na página, pré-carregar solicitações importantes, usar uma CDN, ativar a compressão de texto (Brotli/gzip) e fornecer formatos modernos de imagem.
CLI do Lighthouse
Execute o Lighthouse pela linha de comando para realizar auditorias automatizadas.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI nas GitHub Actions
Execute auditorias em cada solicitação de alteração e faça a compilação falhar se as pontuações ficarem abaixo dos limites.
# .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
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonConfiguração do Lighthouse: verificações de pontuação
Defina verificações em lighthouserc.json para fazer as solicitações de alteração falharem quando houver regressão nas pontuações.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Limitação e simulação de dispositivos
Por padrão, o Lighthouse simula uma rede 4G lenta e uma CPU de celular intermediária. Isso é intencional: usuários em produção, com dispositivos reais, são mais lentos do que sua máquina de desenvolvimento.
Variação da pontuação: por que ela oscila
As pontuações do Lighthouse oscilam entre as execuções por causa da variação no tempo de execução do JavaScript. Execute as auditorias de 3 a 5 vezes e use a mediana. Use numberOfRuns do Lighthouse CI para calcular automaticamente a mediana.
Verificação rápida
Qual métrica do Lighthouse mede por quanto tempo a linha de execução principal fica bloqueada por tarefas longas de JavaScript?
Recapitulação: Lighthouse
O Lighthouse audita Desempenho, Acessibilidade, Práticas recomendadas, SEO e PWA. A pontuação de desempenho é uma média ponderada de LCP, TBT, CLS, FCP e índice de velocidade. A seção de oportunidades classifica as correções pelas economias estimadas. Execute-o com o DevTools, pela CLI ou na integração contínua usando treosh/lighthouse-ci-action. Para lidar com a variação da pontuação, use a mediana de várias execuções.
Perguntas Frequentes
A aula “Auditorias e pontuação do Lighthouse” é grátis?
Sim — o texto completo de “Auditorias e pontuação 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 “Auditorias e pontuação do Lighthouse”?
Execute o Lighthouse no DevTools ou em CI, leia a pontuação de desempenho e os diagnósticos e priorize as oportunidades com maior potencial de economia. 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 2 de 4.
Quanto tempo leva a aula “Auditorias e pontuação 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
- Principais métricas da Web: LCP FID CLS
- Auditorias e pontuação do Lighthouse
- Otimização de imagens: carregamento tardio e formatos WebP
- Divisão de código e rotas sob demanda