Lighthouse é meu pastor...

Publicado originalmente em 03/2019

Photo by Adrien Tutin on Unsplash

Continuando nossa série sobre PWAs, Performance e UX, trago dessa vez uma das ferramentas essenciais para quem quer construir um PWA incrível. O Lighthouse.

Segundo o Google, criador da ferramenta

O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web. Ele pode ser executado como extensão do Chrome ou na linha de comando. Informe ao Lighthouse um URL que você quer auditar. Ele executará uma série de testes na página e gerará um relatório sobre o desempenho da página. Nesse relatório, você poderá usar os testes que apresentaram falha como indicadores do que pode ser feito para aprimorar o aplicativo.

Ou seja, é uma ferramenta que vai fazer toda uma varredura da sua aplicação e lhe dar um relatório com todas as dicas do que pode ser feito para melhorar sua performance.

Durante muito tempo o lighthouse foi uma extensão do chrome, mas hoje, desde o Chrome 60 (na data da publicação deste post ele estava na 72) ele vem embutido no Chrome Dev Tools na aba Audits. Você pode acompanhar o projeto no Github aqui.

Vídeo do release do Chrome 60 explicando a adição do Lighthouse nos Audits.

Uma mão na roda né?

Mas Mitrut, eu nunca ouvi falar nisso!

Tudo bem, estamos aqui pra isso. Este blog foi construido totalmente de olho no que ocorre no score do lighthouse dele - ou seja. Pensado para ter performance e um score alto. No post anterior eu mostrei o score básico e como este blog foi construido para ser um PWA:

Resultados do Blog no Lighthouse

Usando o lighthouse

Partindo do princípio que você está utilizando o Google Chrome como navegador na versão 60+ desktop aperte:

• Windows/Linux: F12 ou Ctrl+Shift+I
• MacOs: Cmd + Option + I
• Todas: Botão direito > inspecionar

Observação: O lighthouse só pode ser usado no desktop.

Isso vai abrir o seu Chrome Dev Tools. Procure pela aba Audits:

Quando você abrir esta aba, ele já vai te mostrar o Lighthouse com todas as opções possíveis para serem auditadas, sendo elas: Performance, Progressive Web App, Best Pratices, Accessibility e SEO - sim, SEO, ele te ajuda desde como seu app está se comportando performaticamente até de como ele pode ser melhor indexado pelos buscadores.

Ainda existem opções de teste para mobile e desktop, bem como simular redes para ver como ele se sai em 3Gs e afins. Pense no lighthouse como um Pagespeed com esteróides.

Agora, depois de selecionados os filtros, é só clicar em Run Audits e esperar. Ele vai demorar mesmo (uns 30 - 40 s), vai fazer uma varredura completa no seu app.

Neste meio tempo ele testa tudo: como seu site se comporta em redes móveis lentas, se ele tem webapp manifest, como ele se comporta com JS desabilitado, se ele possui suporte offline, se ele é acessível, como estão as chamadas de JS e se elas demoram muito e no final ele te dá um relatorio.

É importante salientar que você não precisa perder o sono se seu app não bateu 100% de primeira em tudo, muitos blogs, sites e apps já o fazem mas se você ainda não chegou lá tudo bem. O importante é você estar preocupado com estas métricas.

Meu blog antigo passou pelo lighthouse com os seguintes resultados:

Entendendo o relatório

As 5 seções do lighthous que já citamos aqui possuem subsessões que são os checks auditados. Caso esteja tudo bem em uma sessão você vai encontrar o seguinte:

Senão...

E é aqui que você vai pegar as dicas principais do que você precisa melhorar. O lighthouse vai te dar dicas do que pode ser feito para melhorar o score, coisas tais quais: criar um webapp manifest, suporte offline, minificar JS, requisições que estão bloqueando a renderização, classes css não utilizadas, falta de metatags importantes...

Aqui entra um outro post que veremos futuramente sobre padrão PRPL de entrega de assets para sua aplicação rodar, o que é intrinsecamente ligado ao Lighthouse e performance.

Usando Lighthouse no CI

Digamos que você já está habituado com o Lighthouse e possui um serviço de integração contínua tal qual o TravisCI. É possível automatizar a checagem do Lighthouse e colocar "metas" de score.

Para isso existe o LighthouseBot

O LighthouseBot pode ser colocado junto à sua integração e deixar essa checagem automatica e mais fácil, ele comenta nos seus pull requests e ainda pode impedir que um build ruim vá para produção

Abaixo você pode ver um build com lighthouse com métricas ruins sendo barrado.

CLI

Sim, também é possível rodar o lighthouse via CLI - para quem prefere ter o Firefox como navegador é uma boa pedida. Para testar o CLI é só instalar:

    npm install -g lighthouse

Depois de instalado você roda apenas

    lighthouse <url>

Sendo que é o parâmetro da URL a ser auditada. Existe uma série de flags que podem ser adicionadas como --verbose, --output json e etc. para personalizar o report ao seu gosto.

A documentação é bem completa e vai te ajudar com tudo. Ele gerará um arquivo HTML com as mesmas informações que você vê no Audits do Chrome Dev Tools.

Ainda existe uma série de integrações interssantes e possíveis com ele bem como uma gama enorme de projetos derivados.

Abaixo um vídeo com mais detalhes de como usar o Lighthouse:

Enfim...

Se você se importa com performance e você DEVE se importar, o lighthouse é uma ferramenta indispensável para se criar um bom PWA. Indico aqui dois posts para que você se aprofunde mais no assunto, um do Addy Osmani e outro post onde o William Justen também fala da experiência dele em melhorar o seu blog e ter um bom score no lighthouse.

Mais uma coisa

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

▶ Tome vacina. Não existe tratamento precoce, Fora Bolsonaro.

▶ Não caia em papo de dev coach nóia.

▶ O meu projetinho que você pode contribuir, o AWESOME BRAZILIAN DEV BLOGS. Uma compilação de blogs de desenvolvedores e comunidades brasileiros que estejam em PORTUGUÊS. Visa ser um hub/ponto de partida pra quem busca bom conteúdo de desenvolvimento em português - PRs bem vindas!

▶ Como a Netflix fez o Bandersnatch do ponto de vista de desenvolvimento: