O Lighthouse é uma ferramenta que ajuda a medir e encontrar maneiras de melhorar a performance de uma página. Confira o fluxo de trabalho geral para usar o Lighthouse:
- Você informa ao Lighthouse qual página auditar.
- O Lighthouse carrega essa página e registra quanto tempo ela leva para atingir vários marcos de desempenho. Esses marcos são chamados de métricas.
- O Lighthouse mostra um relatório sobre o desempenho da página. O relatório mostra uma pontuação para cada métrica e uma lista de oportunidades que, se implementadas, devem acelerar o carregamento da página.
Sua missão é melhorar as pontuações das métricas ao longo do tempo ou, pelo menos, garantir que elas não piorem. No entanto, não é possível trabalhar diretamente com as métricas. Em vez disso, você segue as oportunidades que o Lighthouse oferece. Trabalhar nessas oportunidades tende a melhorar as pontuações das métricas.
Executar o Lighthouse na página do perfil
Execute o Lighthouse na página do perfil da web.dev:
Informe qualquer URL, e o Lighthouse vai executar uma série de auditorias que geram um relatório sobre o desempenho da página.
Analise o relatório de auditorias para identificar áreas em que sua página pode ser melhorada.
Para cada auditoria, você vai encontrar orientações e etapas imediatas que pode seguir para melhorar suas pontuações.
Executar o Lighthouse no Chrome DevTools
O Chrome DevTools é o conjunto de ferramentas para desenvolvedores da Web integradas diretamente no navegador Google Chrome. Não é necessário fazer o download de nada para usar as Ferramentas do desenvolvedor. Se você tem o Chrome, também tem o DevTools.
- No Chrome, acesse a página que você quer auditar.
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
Clique na guia Auditoria. Se você não encontrar essa guia, clique no símbolo » e selecione Audits na lista. O Lighthouse é o motor que alimenta o painel Audits. É por isso que você vê uma imagem de um farol.
- Verifique se o botão de opção Mobile está selecionado. Quando o Lighthouse faz uma auditoria na sua página, ele simula a viewport de um dispositivo móvel e a string do agente do usuário.
- Verifique se a caixa de seleção Performance está ativada. Você pode ativar ou desativar o restante das caixas de seleção na seção Audits. Se você ativar essas opções, vai encontrar várias oportunidades para melhorar esses outros aspectos da página.
- Verifique se o botão de opção Simulated Fast 3G, 4x CPU Slowdown está selecionado. O Lighthouse não limita sua rede ou CPU enquanto carrega a página. Em vez disso, ele analisa quanto tempo a página levou para carregar em condições normais e estima quanto tempo levaria em uma rede 3G rápida com uma CPU quatro vezes menos potente do que a da sua máquina.
- Verifique se a caixa de seleção Limpar armazenamento está ativada. Essa opção força o Lighthouse a acessar a rede para cada recurso de página, que é a experiência dos visitantes pela primeira vez.
- Clique em Executar auditorias. Após 5 a 10 segundos, o Lighthouse mostra um relatório.
Por exemplo, se você executar algumas auditorias com Conexão 3G rápida simulada, Limitação de lentidão da CPU 4x ativada e outras vezes executar auditorias com limitação desativada, as pontuações das métricas serão significativamente mais baixas quando a limitação estiver ativada. Você pode passar muito tempo tentando descobrir por que a página está muito mais lenta agora, quando, na realidade, a única coisa que mudou foi a configuração.
Entender seu relatório
No canto superior direito do relatório, você encontra a pontuação geral de performance. 100 é a pontuação perfeita. Abaixo da pontuação geral estão as pontuações das métricas. O guia de pontuação do Lighthouse v3 explica como cada pontuação de métrica contribui para a pontuação geral.
Passe o cursor sobre uma métrica para saber mais sobre ela. Clique em Saiba mais para ler a documentação.
Abaixo das pontuações das métricas, você encontra capturas de tela de como a página ficou durante o carregamento.
Abaixo das capturas de tela, você encontra oportunidades para melhorar o desempenho da página.
Clique em uma oportunidade para saber mais sobre ela.
Próximas etapas
Tente usar o Lighthouse para auditar sua página, na página de perfil ou no Chrome DevTools. Implemente uma das oportunidades e audite sua página novamente para conferir como a mudança afetou seu relatório. As pontuações das métricas precisam ser um pouco melhores, e o Lighthouse não pode mais sinalizar essa oportunidade como algo a ser trabalhado.
Executar o Lighthouse é ótimo para detectar problemas, mas, no final, você vai querer configurar o monitoramento contínuo para garantir que seu site permaneça saudável. Para acompanhar o progresso do Lighthouse ao longo do tempo, adicione seu site ao perfil.