🏡 Ferramenta Google Lighthouse: Monitore o desempenho do seu site

Obtenha dados relacionados a Performance, SEO e Acessibilidade sem instalar nenhuma extensão ou Plugin.

Antes de conhecer está ferramenta, sempre que eu terminava o desenvolvimento de um site, eu ficava me perguntando:

• Será que a performance do meu site está OK ?
• Será que as implementações de Acessibilidade que fiz estão corretas ? Falta algo ?
• Caso fosse um projeto em uma empresa, será que o Google o ranquearia bem ?

E é claro que existem diversas ferramentas/extensões que você pode baixar para testar isso. Mas e se eu te dissesse que há uma delas "escondida" no seu próprio navegador (Chrome ou Microsoft Edge), sem precisar instalar nada. Sim isso mesmo, você consegue obter métricas de desempenho, acessibilidade e SEO direto da Ferramenta de Desenvolvedor do seu navegador. Ou seja, além de visualizar/debugar seu código no console (Aba Console - console.log) ou ver as informações de requisições que o seu site fez (Aba Network), você também pode analisa-lo. Como exemplo, vou fazer essa análise no próprio site do TabNews, para demonstrar o processo e o que ele retorna.

🔍 Analisando o site do TabNews

1. Vamos abrir a página do TabNews, e com o botão direito do mouse, selecionar a opção Inspecionar, para abrir a Ferramenta de Desenvolvedor.

2. Abrindo a ferramenta, veremos várias abas que auxiliam o desenvolvimento do site. Iremos procurar pela aba Lighthouse (Dependendo do tamanho da sua tela, pode ser que ela esteja escondida, como no exemplo a baixo).

3. Após clicar nessa aba, iremos configurar quais métricas queremos receber, em qual tipo de dispositivo queremos testar, de que forma será feita a análise, etc. Vou deixar tudo como está, e só vou alterar para ele fazer a análise em um Computador.

4. Selecionada as configurações, clicaremos no botão Analisar o Carregamento da Página. Neste momento, a ferramenta irá recarregar seu site algumas vezes, para capturar os dados (tempo de resposta, análise do código fonte, tamanho dos arquivos, etc.). Finalizada a análise, ele gera um gráfico, mostrando em uma escala de 1 a 100 (0-49:ruim, 50-89:regular, 90-100:bom/ótimo) para cada métrica avaliada. Além do gráfico, ele mostra detalhadamente cada aspecto que ele avaliou e qual foi o resultado, e o mais importante: Quais os pontos que merecem atenção, e de que forma corrigi-los.

Com base nos dados recebidos, você consegue aplicar mudanças com as recomendações que a ferramenta forneceu, melhorando o seu site.

Claro que para uma aplicação que irá para produção, existem outras ferramentas mais completas, porém o Lighthouse é um bom começo durante ou após o desenvolvimento, e com certeza vale muito a pena utiliza-lo. Espero que tenha ajudado. Se eu deixer faltar algo, deixa aqui nos comentários. Abraços!