Diversos fatores são necessários para que o Google Pagespeed Insights dê uma nota boa para seu site, várias destas métricas são atualizadas em alguns momentos e mesmo com essas dicas é sempre bom estar testando seu site na ferramenta da Google de tempos em tempos.

É bom ressaltar também que, além de nota no Google Pagespeed Insights, o mais importante mesmo é a experiência do usuário. E é o que a Google leva em consideração na hora de rankear seu site.

Claro que boa parte dessa nota é levando em consideração boas práticas de UX (User Experience), mas é bom pensar que não adianta seu site ter nota 100 se o seu usuário não conseguir utilizar seu site.

Dizendo isso, neste post vou explicar diversas dicas que utilizo diariamente em projetos WordPress para melhorar a performance e consequentemente a nota no Google Pagespeed Insights.

Introdução

Antes de tudo, é importante notar que o WordPress é uma ferramenta completa mas que também dá muito espaço para fazer coisas erradas, pois é muito fácil instalar vários plugins para fazer coisas simples que no final carregam diversos assets desnecessários.

Então a primeira dica é evite usar muitos plugins e quando for usar, pesquise bem o que esse plugin adiciona na raiz do seu site pois pode acabar prejudicando muito a performance.

Plugin de cache

Cachear e minificar seus assets é importantíssimo para uma melhor performance em seu site WordPress.

O plugin que mais dá resultado nos projetos que faço é o WP Fastest Cache.

Prefira font-face, estilos e scripts locais ao invés de CDNs

A facilidade de só adicionar um <link> do CDN é tentadora, mas é uma requisição e quanto mais requisições mais lento seu site fica. Pensando nisso, prefira sempre:

  • Baixar as fontes do Google Fonts e usar o transfonter.org para criar os estilos
  • Baixar os scripts e estilos por NPM e criar um bundle de vendors com Gulp ou Webpack

Dessa forma você evita requisições externas e deixa tudo a disposição do servidor, pronto para ser usado.

Faça preload dos arquivos de fontes

Importante para evitar quebras de textos no carregamento, o que gera uma piora na nota do CLS (Cumulative Layout Shift).

<link
  rel="preload"
  href="Roboto-Regular.woff2"
  as="font"
  crossorigin="anonymous"
/>

Lazy loading nas imagens

Carregue suas imagens por demanda com o atributo loading="lazy" em suas imagens

<img src="foto.png" loading="lazy" />

Adicione width e height nas imagens

Para evitar pioras notas no CLS é importantíssimo falar para o navegador qual o tamanho da imagem para que aquele espaço seja reservado na renderização antes da requisição da imagem.

<img src="foto.png" loading="lazy" width="800" height="600" />

Dessa forma o navegador já reservará os 800x600px da imagem e não ficará empurrando o conteúdo quando a imagem for requisitada.

Utilize imagens otimizadas e no formato webp

O formato webp é importantíssimo para um melhor carregamento de sua página em navegadores que já tem suporte para este formato.

Há alguns plugins que facilitam a conversão e otimização, os que eu mais tive resultado foram o WebP Express e EWWW Image Optimizer, este último conta com diversas possibilidades de integração com CDNs o que facilita na hora de utilizar outro servidor para hospedar suas imagens.

Reduza as queries

Muitas das funções WordPress geram queries, pois essas funções fazem buscas no banco de dados e nos retornam resultados.

Para ter uma performance melhor, ao invés de por exemplo, chamar várias vezes o título de um post com o get_the_title() prefira criar uma variável $title = get_the_title() e reutilize. Da mesma forma, invés de puxar várias vezes uma thumbnail com get_the_post_thumbnail_url(), crie uma variável $thumbnail_url = get_the_post_thumbnail_url() e reutilize. E assim com diversas outras funções, dessa forma você evita chamadas desnecessárias e além disso, código repetido.

Conclusão

Mas estas são apenas alguns dos pontos que deixam seu site WordPress mais leve e consequentemente com a nota melhor no Google Pagespeed Insights e para fechar saiba que cada caso é um caso, pois cada tema WordPress foi feito de um jeito, com muitos plugins ou com poucos plugins, temas comprados ou temas feitos, servidores bons e ruins.

Antes de procurar uma bala de prata verifique toda a condição daquele site e procure melhorar ponto por ponto. Melhorar a performance e a nota no Google Pagespeed Insights é um trabalho de formiguinha e tire da cabeça que você fará isso em um dia, é um trabalho recorrente, por isso tenha calma e vá refatorando aos poucos.

E, claro, salve este post nos favoritos pois sempre que eu descobrir coisas novas sobre performance no WordPress atualizarei este post.