Conheça o Google Lighthouse e saiba como utilizá-lo no seu site para melhorar o desempenho e a otimização dele! Aproveite!
Há alguns anos, o Google lançou uma nova ferramenta, o Google Lighthouse. Esta ferramenta, tem por objetivo testar e devolver aos desenvolvedores recomendações para melhorias como, por exemplo, o desempenho, o SEO, a segurança, as práticas recomendadas e a acessibilidade de um site!
Esse é um método de código aberto para auditar o seu site de maneira manual e automática, dando dicas e recomendações de como melhorá-lo para a usabilidade do usuário.
Dessa forma, a criação desse recurso do Google nos deixa uma mensagem importante: o desempenho é um fator de extrema importância na construção das aplicações.
Por isso, o Google Lighthouse veio para nortear os sites e páginas mundo afora, levando em conta parâmetros importantes como a velocidade das páginas e também a sua segurança.
Confira a seguir o artigo que preparamos especialmente para explicar a funcionalidades e, assim, entender o que é o Google Lighthouse. Esperamos que aproveite as informações que separamos e boa leitura!
Conteúdos
O que é Google Lighthouse?
De maneira simples, o Google Lighthouse pode ser definido como uma ferramenta totalmente automatizada que melhora a qualidade dos aplicativos da web.
O mesmo pode ser executado tanto como extensão do Google Chrome ou através de linha de comando (NodeJS).
Assim, o Lighthouse consegue simular diferentes situações que podem afetar a experiência do usuário e, a partir delas, consegue executar diversos testes na página. Dessa forma, ao final dos mesmos, um relatório sobre o desempenho do seu site é gerado automaticamente.
Em posse do relatório final, você consegue analisar os resultados e, assim, utilizar os testes que indicaram falhas como indicadores do que pode ser aprimorado no seu site.
Dessa maneira, o Lighthouse pode ser observado como um aliado na hora de analisar o funcionamento e resultados da sua página e também como elemento central para a melhora dela.
Caso você esteja tendo problemas com plugins, não deixe de visitar nosso artigo sobre como encontrar e desativar os plugins do Chrome.
Como surgiu o Google Lighthouse?
O Google Lighthouse surgiu há alguns anos com o objetivo de auxiliar desenvolvedores da web a aprimorar a qualidade das páginas em seus sites.
A partir de uma análise sobre o comportamento dos usuários, mecanismos de busca e outros parâmetros como acessibilidade e otimização geral do mecanismo de pesquisa SEO, ficou claro que o desempenho é um fator importante na construção das aplicações.
Originalmente, essa ferramenta era destinada a analisar os Progressive Web Apps (PAWs), entretanto, o Google expandiu a funcionalidade dessa ferramenta para que se tornasse mais acessível ao web designer comum.
Assim, o objetivo do Lighthouse é auxiliar o desenvolvedor a otimizar as velocidades de carregamento do site.
Você já ouviu falar sobre a ferramenta do google que te ajuda a lidar com um alto volume de informações? Então, vem aprender tudo sobre Google Data Studio: o que é e como utilizá-lo.
Função do Google Lighthouse
Como já vimos, o Google Lighthouse funciona a partir de uma série de testes que verificam os parâmetros de cada página. Além disso, existem mais de 75 métricas testadas. Confira as mais importantes a seguir:
- Desempenho: tempo para interativo, latência, índice de velocidade, otimização de recursos, TTFB, entrega de ativos, tempo de execução de scripts, tamanho do DOM, entre outros;
- SEO: Mobile friendly, meta, rastreamento, canônico, estrutura, entre outros;
- Melhores práticas: Otimização de imagem, bibliotecas JS, registro de erros do navegador, acesso via HTTPS, vulnerabilidades conhecidas do JS, entre outros;
- Acessibilidade: Elementos da página, idioma, atributos ARIA, entre outros,
- PWA (Progressive Web Application): redireciona HTTP para HTTPS, código de resposta “ok”, carregamento rápido em 3G, tela inicial, viewport, entre outros.
Além disso, caso você seja um desenvolvedor, é possível utilizar o Google Lighthouse com o Node.js para executar um teste de maneira programática.
Atualmente, se encontra no mercado poucas ferramentas alimentadas pelo Lighthouse, capazes de oferecer monitoramento contínuo do desempenho do site. O relatório gerado fornecerá uma vasta análise dos itens a seguir:
- Desempenho: indica a rapidez do desempenho da sua página, por exemplo, qual a rapidez que as páginas estão sendo carregadas?;
- Progressive Web Appliation: dessa forma a sua página oferece uma experiência moderna e parecida com um aplicativo aos usuários?;
- Acessibilidade: quão acessível é a sua página da web? Quais são as suas vulnerabilidades?;
- Melhores práticas: seu site está de acordo com as práticas recomendadas pelo Google?,
- SEO: existe a necessidade de revisão ou melhorar o seu SEO para auxiliar seu site e assim conseguir melhorar sua classificação?
Como utilizar Google Lighthouse?
O Google Lighthouse pode se executar de duas maneiras diferentes, elas são: através da extensão do Chrome ou por linha de comando. No entanto, a extensão do Chrome oferece uma interface mais amigável e fácil de usar para a leitura de relatórios. Já a ferramenta de linha de comando, permite que você integre o Lighthouse a sistemas de integração contínua.
Aproveite e conheça 8 extensões do Chrome para gestão de tempo e produtividade e, além disso, confira a seguir as formas de utilizar cada uma.
Extensão do Google
Para usar a extensão do Google, siga os passos a seguir:
- Baixe o Google Chrome versão 52 ou posterior;
- Instale a extensão do Chrome do Lighthouse;
- Acesse a página que deseja realizar a análise;
- Clique no ícone do Lighthouse na barra de ferramentas do Chrome que você acabou de instalar;
- Se o ícone não estiver visível na barra de ferramentas, poderá estar oculto no menu principal do Chrome;
- Após clicar no ícone, irá aparecer um menu;
- Clique em “Options” e defina os testes que gostaria de realizar como, por exemplo, Progressive Web App, Performance, Acessibilidade e melhores práticas;
- Para executá-los basta clicar no botão “generate report“;
- Após a conclusão das avaliações, o programa vai abrir uma nova guia onde exibe os resultados e o relatório da página.
Linha de comando
Para executar os testes do Google Lighthouse com linha de comando, você deverá:
- Instalar o Node na versão 5 ou posterior;
- Instalar o Google Lighthouse como módulo global do Node: npm install -g Lighthouse;
- Para executar a avaliação do Lighthouse, deverá inserir: Lighthouse https://Google.com.br,
- Para ajuda, digite: Lighthouse –help.
Não se esqueça que esse é um software de código aberto e que está na versão Beta, então você pode alterar a qualquer momento, além de resolver os problemas encontrados no rastreador de problemas do projeto.
Resumo
Por ser uma ferramenta que tem ganhado cada vez mais espaço no mercado, o Google Lighthouse está em constante atualização.
Em dezembro de 2016, o Google lançou a versão 1.3 do Lighthouse com diversas modificações, por exemplo, novos recursos, avaliações e correções de bugs.
Além disso, as principais mudanças em relação à aparência desde a última atualização da ferramenta são a criação de um novo logotipo, alterações nos relatórios HTML e na extensão do Chrome.
Além disso, é possível notar que a apresentação do relatório ficou mais limpa e com links que encaminha direto para a solução de problemas.
Atualmente, o Lighthouse tem focado principalmente nas métricas de desempenho e na qualidade dos aplicativos.
Entretanto, não por muito tempo! Já que uma das metas do projeto é orientar sobre práticas recomendadas para o desenvolvimento web com dicas de desempenho e acessibilidade.
Dessa forma, a partir dessas informações, se tornou possível entender a importância crescente que o Google Lighthouse vem tomando no cenário de desenvolvimento de sites.
Justamente por elaborar um relatório detalhado que conta com informações precisas sobre os pontos de melhora do seu site, deve ser levado a sério e implementado na rotina da página e, além disso, contar com a hospedagem ideal.
E aí, curtiu nosso artigo? Acima de tudo, se você tem interesse em mais conteúdos como esse, informativos e atuais, não deixe de visitar o blog da HostGator. Por lá você irá encontrar muito mais informação de qualidade. Esperamos sua visita!