Todo desenvolvedor web se preocupa com a qualidade do site que ele está desenvolvendo. No entanto, classificar um site como “bom” é algo bem difícil já que existem vários pontos de vista sobre os quais um site pode ser avaliado:
- Performance
- Acessibilidade
- SEO (Search Engine Optimization)
- Comportamento em dispositiviso mósiveis
- Experiência do usuário com a tecnologia
- Segutança da aplicação
- Etc.
Assim, apresento neste artigo a ferramenta Lighthouse que é uma ferramenta de auditoria de websites que pode ajudar a identificar problemas em alguns dos tópicos acima.
Essa ferramenta tem como objetivo auditar websites e gerar um relatório sobre a qualidade do site. Apesar de não ser capaz de prover estatísticas sobre todos os tópicos que citei acima, o Lighthouse considera a performance, progressividade da aplicação, acessibilidade, SEO e boas práticas de programação na geração dos relatórios. Isso torna a ferramenta um primeiro passo no caminho de criação de um bom website.
Acessando o Lighthouse
Você pode acessar o Lighthouse sendo a primeira através de uma extensão para o navegador. Existem versões do Lighthouse para Google Chrome e Firefox e você pode baixar a extensão pela loja de extensões do navegador. As extensões são mostradas nas imagens abaixo:
Logo após a instalação, o ícone de um farol irá aparecer na barra de ferramentas do seu navegador. Para auditar uma página só é preciso clicar no farol e em generate report.
No entanto, estas extensões só permitem a auditoria de páginas que já estão online. Portanto, para auditar páginas locais você precisa usar a versão do Lighthouse nativa no DevTools do Chrome.
Gerando um relatório com o Lighthouse
Para demonstrar a ferramenta, vamos utilizar um do projeto desenvolvido em um curso da Cod3r como teste. Este projeto estará rodando de forma local, ou seja, apenas auditável pelo DevTools.
Depois que você acessar a aba do Lighthouse, vai se deparar com o menu da ferramenta. Nesta aba você pode selecionar as métricas que quer observar no relatório.
Eu selecionei todas as categorias e a opção de dispositivo de desktop para a análise. Feito isso, basta clicar em Generate report e então sua página passará por alguns testes. Estes testes irão gerar o relatório, o que pode demorar alguns segundos. A sua página pode ter alterações de aparência durante a auditoria, então não se assuste hehe.
Os resultados do relatório
Na imagem abaixo temos o relatório gerado para o teste. Já que nosso exemplo não se encaixa categoria Progressive Web App, e por isso, não levaremos essa categoria em consideração neste artigo.
Usando a barra de rolagem, você pode ver com mais detalhes os motivos da pontuação em cada categoria bem como alguns comentários da ferramenta.
Nos resultados de performance podemos ver métricas com relação ao tempo de resposta da página, classificadas com as cores vermelho, amarelo e verde.
Nos resultados de acessibilidade podemos ver ferramentas assim como comentários de coisas que tornam a sua página menos acessível. A acessibilidade deste projeto está alta, então trago aqui a análise de um projeto pessoal meu cuja pontuação é mais baixa:
Uma lista similar aparece na seção de boas práticas. Nesta seção recebemos um aviso sobre a falta do HTTPS, o que é normal, já que estou utilizando um servidor local na minha máquina . As práticas de programação também recebem uma nota aqui, no entanto muitas más práticas “leves” acabam não sendo detectadas.
O relatório de SEO mostra o quão otimizado seu site está para o rankeamento dos mecanismos de pesquisa. No caso deste projeto, temos o aviso de que o documento não tem meta descrição, que é aquele texto de descrição que aparece abaixo do link para uma página no resultado de buscas do Google.
Considerações finais
O LightHouse é uma ferramenta simples e rápida de usar, que pode ser muito a todos os tipos de desenvolvedores web, já que ajuda o programador a encontrar problemas na sua aplicação. Uma vez sabendo que estes problemas existem correções podem ser aplicadas, deixando a sua aplicação cada vez melhor.
Bons estudos!!
