Como otimizar um site com Google Lighthouse, Flying Images e Flying Scripts. Bom, como já dissemos em um artigo anterior, cuidar do SEO OnPage é uma tarefa essencial para o sucesso do seu projeto nas interwebs.
Inclusive, existem várias ferramentas de SEO disponíveis para que você alcance o topo da busca orgânica! Além da apresentação de alguns itens essenciais para otimização de sites e blogs!
Seções desta página
O que é Google Lighthouse?
Lighthouse é uma super ferramenta que realiza o aprimoramento da qualidade dos aplicativos da web de forma automatizada. Esta ferramenta pode ser usada via extensão do Google Chrome ou, caso você seja familiarizado, através de linha de comando com NodeJS.
Com o Lighthouse você consegue analisar vários cenários referentes à experiência do usuário com relação ao seu site e/ou blog. Sendo assim, dentre os relatórios apresentados, estão informações detalhadas sobre:
- Acessibilidade: avaliação da exibição de todos os elementos da página;
- SEO: estrutura da otimização interna, incluindo qualidade da otimização de scripts e imagens;
- Desempenho: análise sobre a velocidade de carregamento da página;
- Vulnerabilidades: possíveis falhas de segurança.
Como turbinar um site com o Lighthouse?
Na verdade, o Google Lighthouse serve para te ajudar nessa otimização. E, além das várias dicas que a ferramenta exibe a seu favor, em muitos casos será necessário realizar algumas mudanças na estrutura do seu site. Dentre elas está a velocidade de carregamento da página. Item mais do que importante para um bom relacionamento entre seu site e a SERP. Sendo assim, recomendamos a instalação e configuração de dois plugins que podem ajudar neste quesito.
Flying Scripts
O plugin Flying Scripts é tão sagaz que seu código adia o carregamento e a execução de todos os scripts para depois que a página estiver completamente carregada. Ou seja, depois que todo o DOM (Document Object Model) já esteja todo montado.
Além disso, os scripts são ativados somente quando houver alguma interação do usuário. Trocando em miúdos, os scripts ficam inativos enquanto não serem necessários. Diminuindo consideravelmente o tempo de carregamento do site.
Flying Images
O plugin Flying Images implementa o lazy load* da forma mais inteligente possível. Por exemplo, se o navegador do visitante for Chrome/Chromium, o plugin executa o lazy load nativo desses browsers. Caso contrário ele executa de uma forma bem mais leve que o habitual.
*Lazy Load: código que adia o carregamento e a inicialização de imagens até que seja necessário.
Conclusão
Enfim, graças aos relatórios detalhados oferecidos pela ferramenta Google Lighthouse, o webmaster consegue ter uma boa noção do que precisa melhorar na estrutura de um site ou blog. E com os dois plugins citados acima — cuja configuração é bem simples e didática — com certeza, sua pontuação no Lighthouse vai subir muito. Fica a dica!
Foto: Nur Andi Ravsanjani Gusma via Pexels.