O Lighthouse é uma ferramenta automatizada que aprimora a qualidade dos apps da Web. Ele pode ser executado como extensão do Chrome ou por linha de comando (NodeJS). Para isso ele simula diversas situações que podem afetar a experiência do usuário, executando uma série de testes na página e gera um relatório sobre o desempenho.
No relatório final, você poderá usar os testes que apresentaram falhas como indicadores do que pode ser melhorado no seu site.
Quais métricas são testadas?
Existem mais de 75 métricas que são testadas e fornecem pontuação geral. Alguns dos seguintes populares você pode estar interessado em como proprietário de um site, analista de SEO, webmasters.
- Desempenho: tempo para interativo, latência, índice de velocidade, otimização de recursos, TTFB, entrega de ativos, tempo de execução de scripts, tamanho do DOM, etc.
- SEO: Mobile friendly, meta, rastreamento, canônico, estrutura, etc.
- Melhores práticas: Otimização de imagem, bibliotecas JS, registro de erros do navegador, acesso via HTTPS, vulnerabilidades conhecidas do JavaScript, etc.
- Acessibilidade: Elementos da página, idioma, atributos ARIA, etc.
- PWA (Progressive Web Application): Redireciona HTTP para HTTPS, código de resposta "ok", carregamento rápido em 3G, tela inicial, viewport, etc.
Se você for um desenvolvedor (que é o meu maior foco para transmitir conhecimento), poderá usá-lo com o Node.js para executar um teste de maneira programática. Já que existem poucas ferramentas no mercado alimentadas pela Lighthouse, que oferecem monitoramento contínuo do desempenho do site, o relatório do seu site fornecerá uma análise abrangente dos seguintes itens:
- Desempenho: Quão rápido está o desempenho do seu site (por exemplo, com que rapidez as páginas estão sendo carregadas, etc.)?
- Progressive Web Application: O seu site fornece uma experiência moderna e semelhante a um aplicativo para os visitantes?
- Acessibilidade: Quão acessíveis são as suas páginas da Web? Quais são as suas vulnerabilidades?
Melhores práticas: O seu site está de acordo com as práticas recomendadas do Google?
SEO: você precisa revisar ou melhorar o seu SEO para ajudar o seu site a ter melhor classificação?
Análisando com web.dev (Irmão do Lighthouse)
O Google lançou o web.dev há alguns meses e ganhou grande popularidade. A ferramenta permite testar seu site de forma fácil e entregando resultados bem semelhantes ao que o Lighthouse entrega para isso:
Vá para a página Web.dev e insira a URL para executar a auditoria. Levará alguns segundos e você deverá ver os relatórios detalhados com a pontuação geral.
⚠ Não gaste seu tempo para chegar na pontuação 100, os sites do Google não pontuam isso, considere-os como diretrizes e tente melhorar o máximo que puder.
Utilizando o Lighthouse Chrome / Edge ou Mozilla (com extensão)
Uma das maneiras de utilizar o Lighthouse é instalando a extensão do mesmo, onde para realizar a analise basta apenas 2 cliques e é exibido as métricas do seu site
Utilizando o Lighthouse nativamente no Chrome (sem extensão)
Você sabia que o Lighthouse está disponível em seu navegador Chrome? E a ótima notícia é que você pode optar por analisar usando o Mobile ou o Desktop.
1º) Abra o navegador Google Chrome
2º) Acesse o site que deseja analisar ou execute o site que você está desenvolvendo
3º) Abra as ferramentas do desenvolvedor (pressionando F12 se estiver usando o Windows) ou clique com o botão direito do mouse na página e clique em Inspecionar
4º) Vá para a aba de Auditorias
Como você pode ver, tem a opção de escolher o que deseja testar. Isso é ótimo, pois você pode se concentrar em seu objetivo e obter os resultados da auditoria mais rapidamente e específicas.
Em relação ao Design/Aparência o Chrome e o web.dev são quase semelhantes. Mas, se você observar com atenção, há um grupo de métricas extras - o Progressive Web App. Então aí está um motivo para auditar usando o Chrome
Instalando o Lighthouse no Ubuntu
A instalação desse post eu testei em um servidor Ubuntu 19.04 local para isso o Lighthouse requer o Node LTS 8.9 ou posterior e claro também o navegador do Chromium deverá estar instalado no servidor. A instalação do Lighthouse é direta, como você faz com outros módulos, veja:
1º) Vamos atualizar nosso índice de pacotes:
sudo apt-get update
2º) Instala o NodeJS:
sudo apt-get install nodejs
3º) Instala o NPM:
sudo apt-get install npm
4º) Para instalar o Lighthouse:
npm install -g lighthouse
Estou usando -g aqui para que seja instalado como módulo global.
Depois de instalado, execute o comando Lighthouse para garantir que ele tenha sido instalado corretamente.
Agora para executar um teste usando um navegador sem cabeçalho digite:
lighthouse URL --chrome-flags="--headless"
⚠ É preciso fornecer a URL absoluta, incluindo HTTP ou HTTPS.
Na segunda última linha, você pode ver que imprimiu o caminho onde posso encontrar o relatório. Por padrão, ele gerará um relatório em formato HTML, que você pode visualizar baixando em seu PC ou servindo-o através de algum servidor web.
Mas, e se você tiver que gerar um relatório no formato JSON ? É simples basta executar o seguinte comando:
lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json
Usando o Lighthouse CLI, você tem total controle para usar da maneira que quiser. Eu recomendaria fortemente verificar o repositório do GitHub para saber mais sobre como usar o CLI ou programaticamente
Por que o Lighthouse deve fazer parte do seu teste regular do site?
O que o Lighthouse faz é testar os aspectos de web design que o Google considera críticos. A partir desses resultados, você receberá conselhos sobre como corrigir problemas para melhorar o seu desempenho, o que deve resultar em melhores classificações no ranking Google. Aqui estão algumas razões pelas quais você deve ter o Lighthouse:
Facilidade de uso: se você é novato, o SEO e métricas de segurança e desempenho podem ser confusas. O Lighthouse é simples de usar, e você pode analisar o seu site com um clique.
Itens acionáveis: quando o Lighthouse detecta um problema, ele fornece um checklist para correção, a fim de melhorar o desempenho. Geralmente, os relatórios apontam para seções específicas e até mesmo linhas de código que podem ser corrigidas ou melhoradas.
Atualizado continuamente: o Lighthouse é continuamente atualizado pelos desenvolvedores do Google para garantir que os padrões mais recentes da Web sejam testados. Você não precisa se preocupar com essa ferramenta usando diretrizes desatualizadas, pois quem faz as diretrizes é quem atualiza o programa.
O Google Lighthouse é uma ótima ferramenta para realizar testes de desempenho, usabilidade e segurança. Independente a plataforma a ferramenta pode ser útil, recomendo que faça os testes e otimize seu site o quanto antes.
Fontes onde pesquisei esse conteúdo:
Top comments (0)