Seguindo os conselhos do Google Lighthouse

Apesar de ter experiência como webdesigner há um bom tempo, há um pequeno vício que ainda me pega: minha paixão por imagens transparentes, especialmente aquelas adoráveis em formato PNG. Entretanto, essa obsessão por transparência às vezes me leva a cometer alguns deslizes que podem prejudicar a performance do site.

Pode parecer estranho, mas sim, eu cometo erros! 🤣 😂 😇 Por mais brilhantes e nítidas que sejam as imagens em PNG, sua qualidade e tamanho podem, inadvertidamente, diminuir a velocidade de carregamento de um site.

A mudança. Graças a ferramenta Google Lighthouse

Após realizar uma bateria de testes utilizando a ferramenta Google Lighthouse, cheguei a uma conclusão clara: precisava seguir os conselhos oferecidos por essa poderosa ferramenta de análise de desempenho. E o conselho principal era evidente - era hora de fazer uma mudança radical no tipo de imagens utilizadas no site.

Uma das valiosas informações que a ferramenta me trouxe foi esta: “Imagens otimizadas carregam mais rapidamente e consomem menos dados nos celulares.” Num mundo onde economizar é essencial, isso se torna ainda mais relevante. Portanto, não há dúvida de que precisamos adotar práticas que poupem recursos, e isso nesse caso começa pela troca do tipo de imagem utilizada em meu blog.

Convenhamos, quem não deseja uma navegação mais veloz e, ao mesmo tempo, economizar aqueles preciosos dados do plano de celular?

Por isso, é hora de agir em direção a um blog mais eficiente. Trocar para imagens no formato WebP é uma escolha inteligente e necessária. Essa simples mudança não só aprimorará a experiência dos usuários ao carregar o blog de forma mais ágil, mas também aliviará a utilização dos dados móveis, algo que se tornou uma preocupação cotidiana para muitos de nós.

Portanto, sim, vamos economizar! rsrs… Decidi abraçar essa mudança e fazer a transição para imagens otimizadas. Porque afinal, cada byte economizado é um passo em direção a um ambiente online mais ágil e responsável.

Mas como fazer isso com inúmeros posts já publicados. A tarefa parecia intimidadora a princípio, mas foi aí que enxerguei a luz no fim do túnel: a solução estava nas mãos da poderosa e versátil regex. E adivinha onde isso aconteceu? No incrível Notepad++!

Aqui está um passo a passo simplificado de como usei a expressão regular no Notepad++ para realizar essa migração:

A primeira etapa foi abrir o Notepad++, gosto muito do Pulsar, mas já tô viciado no Notepad++, uma ferramenta confiável e poderosa para manipulação de texto usando expressões regulares.

Pressionei Ctrl + F para abrir a janela de busca e, em seguida, cliquei na guia Localizar nos arquivos:

Ativei o modo de expressão regular: Selecionei a opção “Expressão Regular” para permitir que o Notepad++ interpretasse a busca conforme as regras da expressão regular.

---

Continua após a publicidade

---

No campo Localizar, inseri a expressão regular: (?<=\.)\b(jpg|jpeg|png)\b Isso é para procurar pelas extensões jpg, jpeg e png nos textos desejados. No campo Substituir por: inseri webp

No campo Pasta coloquei o caminho da pasta principal, onde ficam os arquivos html, md e markdown do meu blog. Nestes arquivos é que estavam as ocorrências das extensões jpg, jpeg e png. Cliquei em Substituir nos arquivos para realizar a mudança de forma automática. E a magia aconteceu.

Com a eficiência das expressões regulares e a facilidade de uso do Notepad++, fiz a substituições em todos os arquivos que referenciavam as extensões de imagem jpg, jpeg e png em todos os meus arquivos e posts em um piscar de olhos. Bendito, Notepad++ e as regex, meus salvadores neste momento.

Mas uma vez essa experiência me mostrou o poder das ferramentas certas e a eficácia das expressões regulares para realizar tarefas complexas de maneira rápida e precisa. Eu amo Regex, rsrs…

Após o incrível trabalho realizado pelo Notepad++ e as poderosas expressões regulares, no próximo artigo, mostrarei exatamente como transformei imagens nos formatos jpg, jpeg e png para o moderno formato WebP. Porque para otimizar a performance, não era suficiente simplesmente substituir as referências aos formatos jpg, jpeg e png nos posts e layouts. Também era necessário converter as imagens dos formatos jpg, jpeg e png para o formato WebP. Se a curiosidade bateu à sua porta, Clique aqui para mergulhar nessa transformação!

---

Publicidade

---

---

📢 Quer ficar por dentro de todas as novidades do nosso blog? Não perca os últimos artigos, dicas valiosas e informações relevantes!

Junte-se a nós nas redes sociais para receber em primeira mão:

• Artigos exclusivos;
• Dicas práticas;
• Ofertas especiais e descontos exclusivos para nossos seguidores.

Não vamos inundar sua caixa de entrada com newsletters! Simplesmente nos siga em uma de nossas redes sociais para garantir que você não perca nenhum conteúdo interessante. Estamos ansiosos para tê-lo(a) conosco! 🚀