Google Lighthouse: Uma ferramenta fácil para a otimização de sítios Web
Se precisa de pôr o seu sítio Web a funcionar de forma eficiente, há vários aspectos que tem de ter em conta. Felizmente, ferramentas versáteis como o Google Lighthouse podem ajudá-lo a otimizar e a acompanhar factores como o desempenho, a acessibilidade e muito mais.
Para tal, executa uma auditoria que analisa as informações de uma aplicação Web ou página de um sítio Web. Ao fazê-lo, compila um relatório sobre o desempenho da aplicação ou da página. Verifica a página Web com um padrão de baixo desempenho para ver como se sairia contra uma má ligação ou um dispositivo mais antigo, fornecendo informações úteis sobre o seu funcionamento em condições menos que o padrão.
Embora o seu principal objetivo seja a Web aplicações e sítios móveis, continua a fornecer muitas informações e recomendações úteis que podem ser aplicadas a qualquer sítio Web. Como meio de monitorizar o desempenho do seu sítio Web, juntamente com várias métricas úteis, é indispensável.
Como utilizar o Google Lighthouse
Há muitas formas de utilizar o Lighthouse, e a melhor pode depender da forma como se sente mais à vontade. Os vários fluxos de trabalho incluem:
No Chrome DevTools: Audite facilmente as páginas que requerem autenticação e leia os seus relatórios num formato fácil de utilizar. Utilizando o Google Chrome, pode auditar qualquer URL na Web acedendo ao Chrome DevTools com este procedimento:
- Carregue a página que pretende auditar no navegador Chrome.
- Abra o Chrome DevTools.
- Windows: Tecla F12, ou Control+Shift+I, Mac: Command+Opção+I
- No menu principal do Chrome: Clique em "Personalizar e controlar o Google Chrome" no canto superior direito e, em seguida, selecione Mais ferramentas > Ferramentas de desenvolvimento.
- Clique no separador Auditorias.
- Clique no botão "Executar auditorias
A partir da linha de comando: Automatize as execuções do Lighthouse por meio de scripts de shell, usando-o como uma extensão do Google Chrome. Clique no ícone do Lighthouse ao lado da barra de endereços do Chrome.
Como um módulo Node: Incorporar o Lighthouse nos seus sistemas de integração contínua.
A partir de uma interface Web: Execute o Lighthouse e ligue-se aos relatórios sem instalar nada. Nesta versão, pode inserir o URL no campo Medida para executar a auditoria. Demorará alguns segundos e deverá ver o relatório detalhado com a pontuação global.
Principais métricas
Em termos simples, o Lighthouse é uma ferramenta de monitorização e avaliação de sítios Web que efectua auditorias de desempenho, acessibilidade e aplicações Web progressivas, SEOe muito mais (testa mais de 75 métricas no total). Estas métricas de dados cobrem quase tudo o que precisa de saber para corrigir o sítio Web e torná-lo mais apelativo e visível.
Desempenho
A métrica de desempenho diz respeito principalmente à velocidade, latência, otimização de recursos, etc. Primeira pintura com conteúdo é uma medida do tempo que demora a aparecer um conteúdo de qualquer tipo no ecrã.
- Primeira pintura significativa: A duração necessária para a primeira significativo conteúdo a aparecer no ecrã. Uma pontuação mais baixa indica que a página é mais rápida.
- Índice de velocidade: Um teste de velocidade de um sítio que mostra a rapidez com que o conteúdo completo de uma página pode ser visualizado. O índice baseia-se num tempo de carregamento inferior a 1,25 segundos.
- Primeira CPU inativa: A duração entre o carregamento e o momento em que o dispositivo deixa de estar a funcionar para processar a página.
- Tempo para a interatividade: A rapidez com que a página se torna interactiva. Esta medida analisa principalmente o tempo necessário para que a maior parte dos elementos da interface do utilizador se tornem interactivos e para que o ecrã responda à entrada do utilizador.
- Latência de entrada estimada mede o tempo que uma página demora a responder ao input do utilizador. Quanto menor for a latência, mais rápida será a página. O objetivo da latência de entrada é inferior a 50 milissegundos.
Acessibilidade
Esta secção do relatório inclui várias verificações para o formato da página, incluindo títulos, cores de fundo e de primeiro plano, contraste de cores, textos alternativos de imagens, etiquetas de título de documentos e nomes de ligações. A secção Acessibilidade do Google Lighthouse também fornece uma lista de "itens adicionais a verificar manualmente", que contém itens que não são possíveis de automatizar uma verificação para atingir todos os parâmetros de referência possíveis.
Abaixo da auditoria, o Lighthouse apresenta os elementos que não cumprem as suas normas. Isto forma uma lista de verificação que os utilizadores podem aplicar às suas páginas para obter o máximo impacto em termos de SEO, formato e visibilidade.
Melhores práticas
Esta secção aborda o HTTPS, a cache de aplicações e a segurança das ligações entre origens. Além disso, monitoriza pedidos de permissão de geolocalização, bibliotecas JavaScript vulneráveis, APIs obsoletas e se os utilizadores podem colar em campos de palavra-passe. Inclui também a otimização de imagens, bibliotecas JS, registo de erros do navegador, vulnerabilidades JS conhecidas, etc.
SEO
Como verificação básica de SEO, procura sobretudo etiquetas de página e códigos de estado. Algumas partes têm de ser introduzidas manualmente, pelo que esta secção pode dar instruções sobre meta descrições, títulos, tamanhos de letra, etc.
Aplicação Web progressiva
Redirecionar HTTP para HTTPS, código de resposta ok, carregamento rápido em 3G, ecrã inicial, janela de visualização, etc.
As Progressive Web Apps têm de o ser:
Fiável - Carrega instantaneamente e nunca mostra o "downasaur" (a página de erro do Chrome), mesmo em condições de rede incertas.
Rápido - Responda rapidamente às interações do utilizador com animações suaves e sem deslocações irregulares.
Envolvente - Parece uma aplicação natural no dispositivo, com uma experiência de utilizador envolvente.
Artigo relacionado: Como o esquema pode impulsionar a sua SEO e visibilidade
