Você já abriu o PageSpeed Insights do Google, testou seu site e sentiu uma ponta de decepção com o resultado? Se a resposta for sim, este guia é para você. Por muito tempo, nós também buscamos a fórmula ideal para otimizar nosso site WordPress e, após muitos testes, finalmente alcançamos a nota máxima: 100/100 em Desempenho. Agora, vamos compartilhar o passo a passo completo, de forma simples, para que você também possa acelerar seu site.
A Base de Tudo: Hospedagem e Tema
Antes de qualquer otimização, o fundamental é ter uma boa base. De nada adianta ter o carro mais rápido do mundo se a estrada é cheia de buracos.
- Hospedagem de Qualidade (Cloudways): Usamos a Cloudways, que nos dá acesso a tecnologias de ponta como Varnish Cache e Redis. Pense nisso como ter assistentes super rápidos no servidor, que já deixam boa parte do site pré-pronta para entregar aos visitantes.
- A Dupla Poderosa (WordPress + Divi): Nosso site é construído em WordPress com o tema e construtor Divi. Amamos o Divi pela sua flexibilidade, mas ele precisa dos ajustes certos para ser realmente rápido. Se precisar de ajuda profissional com seu design, conheça nossos serviços de design gráfico.
A Estratégia para Otimizar seu Site WordPress
Aqui é onde a mágica acontece. O segredo não é usar dezenas de plugins, mas usar os plugins certos da maneira certa, fazendo com que eles trabalhem em harmonia para melhorar a performance do WordPress.
1. Caching: A Memória Rápida do Site
Imagine um barista que, sabendo que todos pedem café expresso de manhã, já deixa várias xícaras prontas. Isso é o cache. Para otimizar o site WordPress, usamos três camadas de cache:
- Cache do Servidor (Varnish na Cloudways): A primeira e mais rápida camada.
- Cache do Site (Plugin Breeze): Um plugin de cache que organiza os arquivos do próprio WordPress. Como ele é da Cloudways, a integração é perfeita.
- Cache de Borda (Cloudflare): A Cloudflare cria cópias do seu site em servidores ao redor do mundo (CDN), entregando o conteúdo de forma quase instantânea em qualquer lugar do planeta.
2. Otimização de Arquivos: O Fim da Bagunça
Todo site usa arquivos de estilo (CSS) e de interatividade (JavaScript – JS). O problema é que, muitas vezes, o tema e os plugins carregam dezenas desses arquivos, o que deixa o carregamento lento.
A Solução: Nós usávamos dois plugins, Breeze e Autoptimize, mas isso pode gerar conflitos. Para simplificar, desativamos o Autoptimize e centralizamos tudo no Breeze. A configuração que mais ajudou a otimizar o site WordPress foi:
- Atrasar a Execução do JavaScript (Delay JS Execution): Esta opção é um super-trunfo. Ela faz com que os scripts só carreguem quando o visitante interage com a página (rola a tela ou clica em algo). Para o Google, o site parece carregar instantaneamente, o que eleva a nota de desempenho.
3. Otimização de Conteúdo: Fontes e Imagens
- Fontes Rápidas: Garantimos que o texto do site apareça imediatamente, mesmo que a fonte personalizada ainda não tenha carregado (usando
font-display: swap) e demos uma “dica” para o navegador carregar as fontes importantes primeiro (preload). - Imagens Leves (WebP): Através da Cloudflare, ativamos a função Polish. Ela comprime as imagens e as converte para o formato WebP, que é muito mais leve que JPG ou PNG, sem perda de qualidade perceptível. Confira a qualidade em nossos projetos de impressão.
4. Ajustes Finos no Servidor para Acelerar o WordPress
Um site como o nosso, feito com Divi, precisa de um pouco mais de “fôlego” para trabalhar. Fizemos um ajuste simples na Cloudways para acelerar o WordPress de vez:
- Aumentamos o Limite de Memória do PHP: Passamos de um valor baixo para 256M. Isso é como dar mais memória RAM para um programa pesado rodar sem travar, evitando erros e tornando o painel mais estável.
Conclusão: A Receita para um Site Rápido
Alcançar a nota 100 não é sobre um único truque, mas sobre a combinação inteligente de boas práticas. Para otimizar seu site WordPress, siga este resumo:
- Escolha uma hospedagem de alta performance.
- Use a Cloudflare como sua CDN.
- Centralize a otimização em um único plugin de cache e ative o atraso na execução do JavaScript.
- Otimize fontes e imagens (use WebP!).
- Dê ao seu servidor os recursos necessários (aumente a memória do PHP).
Esperamos que nosso caminho ajude você a trilhar o seu. Com paciência e as configurações certas, um site incrivelmente rápido está ao seu alcance! Se tiver dúvidas, entre em contato conosco.
Recurso Bônus: Código para Pré-carregar Fontes
Para usuários mais avançados, aqui está um código que você pode adicionar ao seu site para pré-carregar fontes importantes. Use o bloco “HTML Personalizado” para inserir este código no seu post, ou adicione a um plugin de snippets.
<?php
/**
* Adiciona tags de pré-carregamento (preload) para fontes importantes no head do site.
* Cole este código no final do arquivo functions.php do seu tema filho.
* * Lembre-se de substituir os caminhos '/caminho/para/sua/fonte.woff2' pelos caminhos reais
* das suas fontes mais importantes para o carregamento da página.
*/
function bhg_preload_critical_fonts() {
?>
<!-- Pré-carrega a fonte principal de ícones do Divi -->
<link rel="preload" href="/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff" as="font" type="font/woff" crossorigin>
<!-- Exemplo: Adicione outras fontes importantes aqui -->
<!-- <link rel="preload" href="/wp-content/uploads/fonts/sua-fonte-principal.woff2" as="font" type="font/woff2" crossorigin> -->
<?php
}
add_action( 'wp_head', 'bhg_preload_critical_fonts' );
?>