Introdução

Fala pessoal, para quem me segue no Twitter deve ter visto que eu ando falando bastante sobre performance e talvez vocês tenham percebido também que o nosso blog lindinho tem estado bem mais rápido e “diferente”. Fazia um tempo que eu num estudava um pouquinho e aí usei meu blog como cobaia, porque ele foi criado para isso né.

Eu sou extremamente aficcionado por performance e por mais que o blog já fosse rápido, muitas coisas me deixavam agoniado e quando rodei o Lighthouse no blog e vi várias notas baixas, foi a gota d’água, eu precisava fazer alguma coisa!

Eu fiz muiiiitas mudanças no blog, desde o servidor, até fontes e funcionamento offline. E bom, como eu aprendi vários detalhes, por que não compartilhar com vocês? A partir de hoje, vou começar vários posts sobre tudo que fiz e dicas sobre isso, se você não quiser perder nada, adiciona o feed do blog no seu Feedly ou me segue no Twitter/Facebook/Slack, acessa o blog todo dia ok, não precisa, mas se quiser...

Enquanto eu vou escrevendo esse post, vou ouvindo uma Playlist que acabei de criar com várias músicas acústicas calminhas e de bandas desconhecidas.

Por que performance importa?

Antes mesmo de começar a falar mais sobre a ferramenta do Lighthouse, a gente precisa entender porque performance é tão importante.

É basicamente sobre reter usuários! Nós queremos que os usuários usem nosso site e que eles gostem disso. Se for um blog, nós queremos que as pessoas leiam os posts, se é uma loja, nós queremos que eles comprem o que oferecemos. Se é site institucional, nós queremos que a pessoa veja sobre a nossa empresa e que tenham confiança naquilo que estão vendo. E a performance é um fator muito significa nessa interação! Seguem alguns dados:

E da mesma forma que uma boa performance traz dados bons, uma performance com problemas pode trazer sérios problemas.

É meus amigos, vocês não querem que o usuário abra o seu site e ele demore tanto que o usuário decida sair né? Então performance importa e muito! Não é só para os robôs do Google, é para algo maior, os seus usuários.

O que é o Lighthouse?

Pegando a descrição que a própria Google dá para o Lighthouse:

O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web.

Abaixo você consegue ver como é a arquitetura do projeto e o processo que ela faz para analisar o seu site, é bem genial a parada!

Arquitetura

Na imagem acima só mostra 4 categorias mas a ferramenta analisa o site através de 5 categorias específicas que são:

E para cada uma dessas categorias a nota pode ser de 0 a 100. Tipicamente sites que tem valor acima de 90 representam o top 5% dos sites com melhor performance. Aqui tem uma lista com todos os detalhes de pontuação, com todos os seus pesos.

Eles tem as referências para todas as regras no site deles, lá você consegue ver separadinho cada ponto em cada categoria, vale a pena olhar também, muitas dicas de boas práticas.

Como usar?

Existem algumas formas possíveis de utilizar o Lighthouse hoje, que são:

Analisando o relatório

Relatório do Lighthouse

Dentro do relatório ele mostra separadamente cada uma das categorias e mostra também uma separação em 3 partes:

Cada um desses pontos sempre vem com boas explicações do que fazer para melhorar e o porque de serem dessa forma. Acho os relatórios do Lighthouse um prato cheio para se aprender boas práticas na Web. Leia tudo com calma e tente seguir os conselhos, mas uma dica:

Seu site não precisa ter os absolutos 100 em tudo! Existem pontos que você pode ou não mudar. Então analise com calma e veja os prós e contras daquilo que o Google recomenda.

Se o seu site já estiver com 90+, é um ótimo sinal! E se ele não estiver, também não tem problema, veja os problemas e vá melhorando conforme você achar necessário.

Conclusão

Bom, esse é o primeiro post dessa parte sobre performance que eu vou falar. Nos próximos posts eu vou mostrar as coisas que eu fui melhorando no blog e também trazendo alguns resultados que eu já obtive, sim, tem menos de uma semana das mudanças, mas já notei crescimentos bem relevantes!

Se você tem alguma dúvida ou pedido, faz aí nos comentários. Você também pode postar as notas do seu site e até pedir ajuda de outros leitores, vamos ser participativos! =D