O Lighthouse é uma ferramenta que ajuda você a medir e encontrar maneiras de melhorar o desempenho de uma página. Veja 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 metrics.
- O Lighthouse fornece um relatório sobre o desempenho da página. O relatório fornece uma pontuação para cada métrica e uma lista de oportunidades que, se você implementá-las, acelerar o carregamento de página.
Sua missão é melhorar as pontuações das métricas ao longo do tempo ou garantir que elas não piorem. No entanto, não há como trabalhar diretamente nas 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 web.dev:
Forneça qualquer URL, e o Lighthouse vai executar uma série de auditorias que geram um relatório do 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ê encontrará orientações e medidas imediatas que podem ser seguidas para melhorar suas pontuações.
Executar o Lighthouse no Chrome DevTools
O Chrome DevTools é o conjunto de ferramentas para desenvolvedores da Web integrado diretamente ao navegador Google Chrome. Não é necessário fazer o download de nada para instalar o DevTools. Se você tem o Chrome, então 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 o DevTools.
Clique na guia Auditorias. Se essa guia não aparecer, clique no símbolo » e selecione Auditorias na lista. O Lighthouse é o mecanismo que alimenta o painel Auditorias. É por isso que temos a imagem de um farol.
- Verifique se o botão de opção Dispositivo móvel está selecionado. Quando o Lighthouse audita sua página, ele simula a janela de visualização e a string do user agent de um dispositivo móvel.
- Verifique se a caixa de seleção Desempenho está marcada. É possível ativar ou desativar o restante das caixas de seleção na seção Auditorias. Se você ativá-los, verá várias oportunidades para melhorar esses outros aspectos da sua página.
- Verifique se o botão de opção Simulado 3G rápido, 4x Lentidão da CPU está selecionado. O Lighthouse não limita a rede ou a CPU enquanto carrega a página. Em vez disso, ele observa quanto tempo a página levou para carregar em condições normais e, em seguida, estima quanto tempo levaria em uma rede 3G rápida com uma CPU quatro vezes menos potente que a da máquina.
- Verifique se a caixa de seleção Limpar armazenamento está marcada. Essa opção força o Lighthouse a acessar a rede de todos os recursos da página, que é a experiência dos visitantes que acessam a página pela primeira vez.
- Clique em Executar auditorias. Depois de 5 a 10 segundos, o Lighthouse mostra um relatório.
Por exemplo, se você executar algumas auditorias com 3G rápido simulado, limitar a lentidão de CPU 4x ativada e, em seguida, executar auditorias com a limitação desativada, suas pontuações de métricas serão significativamente menores quando a limitação estiver ativada. Você pode passar muito tempo tentando descobrir por que sua página está tão mais lenta agora, quando, na realidade, a única coisa que mudou foi sua configuração.
Como interpretar seu relatório
O canto superior direito do relatório lista sua pontuação de desempenho geral. 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 sobre ele.
Abaixo das pontuações das métricas, você verá capturas de tela que mostram a aparência da página durante o carregamento.
Abaixo das capturas de tela, você vê 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, seja na página do perfil ou no Chrome DevTools. Implemente uma das oportunidades e faça uma nova auditoria da página para ver como a mudança afetou o relatório. O ideal é que suas pontuações de métricas sejam um pouco melhores, e o Lighthouse não deve mais sinalizar essa oportunidade como algo em que trabalhar.
Executar o Lighthouse por conta própria é ótimo para verificar problemas. No entanto, é recomendável configurar o monitoramento contínuo para garantir a integridade do site. Para acompanhar o progresso do Lighthouse ao longo do tempo, adicione seu site ao perfil.