Joana Kerr No artigo da semana passada, mencionamos a relação das Core Web Vitals com a conquista de novos clientes através do website da empresa. Nós mostramos como esse conjunto de métricas é analisado, a partir de dados reais da navegação dos visitantes do site, e sua importância para a realização de ajustes de performance conforme a análise da experiência do usuário. Hoje, porém, vamos mostrar como verificar as necessidades de melhorias antes mesmo de finalizar o desenvolvimento do site, por meio do Lighthouse.
Entendemos que o período de desenvolvimento é justamente quando a equipe está mais empenhada em deixar o site completamente otimizado, para que já apresente alta performance em sua publicação. É por isso que, além de conhecer os recursos do PageSpeed Insights para avaliar essa performance, sua equipe de desenvolvimento vai precisar do Lighthouse para ter uma estimativa de como o site funcionará quando estiver sendo acessado pelo seu público.
No vídeo abaixo explicamos como você pode fazer o teste do Lighthouse usando o console do Google Chrome.
Diferença entre o Lighthouse e o PageSpeed Insights
A principal diferença entre os testes do Lighthouse e do PageSpeed Insights está na fonte da análise da performance, visto que apenas o PageSpeed utiliza os dados de navegação para mensurar o nível de performance do site. O Lighthouse, por sua vez, não conta com os dados de navegação dos usuários em seu site, mas dispõe de uma análise de código também baseada nas práticas recomendadas pelas Core Web Vitals.
Em termos de resultados, ambas trazem informações semelhantes. O que muda, neste caso, é o contexto dessa análise. Se o site já está no ar há certo tempo e tem um número considerável de visitas diárias, convém mensurar os dados de performance com base na experiência que o seu público tem tido ao navegar em suas páginas. Mas, se o site for novo ou se ainda estiver em fase de desenvolvimento, não será possível analisar dados de navegação, então o tipo de análise do Lighthouse se fará necessário.
Variáveis dos dados analisados em cada tipo de teste
Em qualquer teste de performance que você se basear, sempre haverá algum tipo de oscilação de dados quando você comparar resultados do mesmo site testado em dias e/ou horários diferentes.
Um exemplo, que inclusive citamos no vídeo acima, é a pontuação do site da Visie, quando avaliado para computador pelo Lighthouse, que às vezes é de 100 e às vezes de 99. É importante, porém, entender as variáveis que podem gerar grandes alterações nas pontuações finais para eliminar erros de interpretação dos testes.
Lighthouse X PageSpeed Insights
O Lighthouse parte das informações do seu computador, que é por onde seu teste é executado. Portanto, se houver outros programas rodando simultaneamente, se o computador estiver com programas pesados abertos ou até se a conexão com a internet for ruim no momento, a análise de performance do site será comprometida.
Esse tipo de interferência no teste pode ser evitada se você deixar apenas o teste do Lighthouse rodando, durante essa análise. Também é interessante fazer o teste em uma janela anônima, para não sofrer interferências das extensões do navegador.
Ainda assim, tomando esses cuidados, pode ser que os números apresentem pequenas diferenças ao repetir o teste, mas nada que mude o diagnóstico geral da performance do site.
O PageSpeed Insights toma como base os dados de navegação no site coletados nos últimos 28 dias. Então as mudanças de comportamento do usuário, ao navegar por suas páginas, interferem diretamente nessa análise.
Outras análises do Lighthouse
Além da performance de carregamento, o Lighthouse traz dados para sites que são PWA (Progressive Web App). Se o site não for PWA, o teste não mostrará dados desta seção.
O Lighthouse também tem uma seção chamada Total Blocking Time, que mostra o tempo que o navegador precisou para renderizar CSS ou executar JavaScript.
E, para que o desenvolvedor possa ter uma visão geral dos diversos tempos de carregamento, existe também a métrica ponderada Speed Index.
Os detalhes dessas métricas, você pode conferir no vídeo acima, caso ainda não tenha assistido.
Lista de práticas recomendadas
A realização desses testes é importante não apenas para saber o nível de performance do site, mas para identificar o que precisa ser feito para alcançar melhores pontuações. Assim fica mais fácil chegar ao término do desenvolvimento com o site realmente otimizado conforme as Core Web Vitals do Google.
Por isso, independentemente da nota que o seu site obtiver no teste do Lighthouse, dê uma atenção especial às orientações de melhorias que aparecerem na seção de performance. Ao atender aos requisitos desta lista, seu site terá uma alta performance e mais chances de se destacar no Google, em relação aos de seus concorrentes.
Por Joana Kerr
9 de julho de 2024
