O que é e como usar o Google Lighthouse

Estava animado para a criação desse artigo. Vamos lá.

No meu ponto de vista, a mensagem que os desenvolvedores do Google querem passar é que o desempenho é um fator muito importante na construção das aplicações.

Pensa comigo, os aplicativos para smartphones possuem uma reputação boa para os usuários em questão de desempenho e segurança. Mas o grande problema são os websites mobile.

Apesar das gigantes Google e Facebook criarem alternativas para aumentar o desempenho, Facebook Instant Articles e Google Accelerated Mobile Pages, ele ainda continua.

A Google levou tão a sério o fator desempenho que já está dando preferência nos resultados das buscas levando em conta a velocidade das páginas. E um site mais rápido significa melhores posições no Google e usuários contentes.

Nesse artigo reuni todas as informações encontradas no Blog do Google sobre o Lighthouse, e como usá-lo.

Progressive Web App

Desde o Google I / O — 2016, desenvolvedores do Google estão trabalhando duro na construção do Lighthouse, um aliado incrível para a construção de grandes Aplicativos da Web Progressiva — Progressive Web App (PWA).

Segundo Pete LePage, desenvolvedor do Google, Progressive Web Apps são experiências que combinam o melhor da Web e o melhor dos aplicativos.

Um Progressive Web App é:

  • Progressivo: Funciona para qualquer usuário, independentemente do navegador escolhido, pois é criado com aprimoramento progressivo;
  • Responsivo — Se adequa a qualquer formato: desktop, celular e tablet;
  • Independente de conectividade — trabalha off-line ou em redes de baixa qualidade;
  • Semelhante a aplicativos — Parece com aplicativos para os usuários, com interações e navegação de estilo de aplicativos;
  • Seguro — Fornecido via HTTPS para evitar invasões e garantir que o conteúdo não seja roubado ou alterado;
  • Descobrível — Pode ser identificado como “aplicativo” graças aos manifestos W3C;
  • Instalável — Permite que os usuários “guardem” os aplicativos mais úteis em suas telas iniciais sem precisar acessar uma loja de aplicativos;
  • Linkável — Compartilhe facilmente por URL, não requer instalação complexa.

O que é o Google Lighthouse

O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade dos apps da Web. Ele pode ser executado como extensão do Chrome ou por linha de comando (NodeJS).

O Lighthouse simula diversas situações que podem afetar a experiência do usuário. Ele executa uma série de teste 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.

Primeiros passos com Lighthouse

O Lighthouse pode ser executado de duas formas: pela extensão do Chrome ou por linha de comando.

A extensão do Chrome oferece uma interface mais fácil de usar para a leitura de relatórios.

A ferramenta de linha de comando permite que você integre o Lighthouse a sistemas de integração contínua.

Extensão do Chrome

Baixe o Google Chrome 52 ou posterior.

Instale a extensão do Chrome do Lighthouse.

Acesse a página que quer verificar.

Clique no ícone do Lighthouse na barra de ferramentas do Chrome.

Se o ícone não aparecer na barra de ferramentas, ele poderá estar oculto no menu principal do Chrome.

Após clicar no ícone, você deverá ver um menu.

Você pode clicar em “Options” e definir os testes a serem feitos, como

Progressive Web App,

Performance, Acessibilidade

e Melhores práticas.

E para executar os testes do Lighthouse, clique no botão “Generate report”.

Após a conclusão das avaliações, o programa abre uma nova guia e exibe um relatório com os resultados da página, confira o resultado realizado com o site do Google Brasil.

Com linha de comando

Instale o Node na versão 5 ou posterior.

Instale o Lighthouse como módulo global do Node.

npm install -g lighthouse

E para executar a avaliação do Lighthouse em uma página digite:

lighthouse https://google.com.br

Para ajuda digite:

lighthouse --help

Lembrando que é um software de código aberto, está na versão Beta e você pode alterar a qualquer momento, também pode resolver os problemas encontrados no rastreador de problemas do projeto.

Atualizações do Lighthouse

Em dezembro de 2016 o Google lançou a versão 1.3 do software, com diversas melhorias, como novos recursos, avaliações e correções de bugs.

Aparência

As principais mudanças na última atualização são o novo logotipo, alterações nos relatórios HTML e na extensão do Chrome.

A apresentação do relatório ficou mais limpa, e com links para a solução dos problemas.

Melhores Práticas

Até o momento, o Lighthouse tem se concentrado nas métricas de desempenho e na qualidade dos aplicativos. Mas uma das metas do projeto é orientar sobre práticas recomendadas para o desenvolvimento web, com dicas de desempenho e acessibilidade.

E você deve estar se perguntando: “Por que deixar o site como o Google quer?“. Eu não me preocuparia, e acredito que as aplicações do Google tem como objetivo ajudar seus usuários.

Dentro do projeto Lighthouse, existe um esforço para tornar a web melhor “Do Better Web“, com o objetivo de ajudar a modernizar e otimizar as aplicações na web. E segundo a própria Google, “desenvolvedores usam práticas desatualizadas e anti-padrões sem perceber”. Por isso o projeto, para ajudar com esses fatores.

Alguns dados sobre o projeto:

Conclusão

Apensar de ser versão Beta, o aplicativo tem muito que melhorar, mas o que promete ele cumpre com seus relatórios.

Se precisar de ajuda com desempenho do seu site, com o software da Google ou se quiser dar algum feedback sobre o artigo, deixe seu comentário.

Abraço

Fonte: O que é e como usar o Google Lighthouse — SECNET