Otimizando WordPress e WooCommerce para o PageSpeed do Google (Sem Plugins)

Para alcançar uma pontuação alta no PageSpeed Insights do Google e melhorar a experiência do usuário em um site WordPress ou loja WooCommerce, é essencial atender aos Core Web Vitals (LCP, FID, CLS) e otimizar o desempenho sem depender de plugins. Abaixo, apresentamos os pré-requisitos do Google para um site rápido e eficiente, com soluções técnicas manuais e exemplos práticos para implementar essas otimizações.

Pré-requisitos do Google para um site rápido

O Google PageSpeed Insights avalia o desempenho com base em:

• Largest Contentful Paint (LCP): Tempo para carregar o maior elemento visível (< 2,5s).
• First Input Delay (FID): Tempo para o site responder a interações (< 100ms).
• Cumulative Layout Shift (CLS): Estabilidade visual do layout (< 0,1).
• Outros fatores: Tempo de resposta do servidor, renderização bloqueante, tamanho de recursos (imagens, CSS, JS) e eficiência de cache.

As otimizações a seguir abordam essas métricas de forma técnica, sem o uso de plugins.

1. Otimize o tempo de resposta do servidor (TTFB)

Um Time to First Byte (TTFB) baixo é crucial para um bom LCP. Para reduzir o TTFB:

• Escolha uma hospedagem otimizada: Use provedores como SiteGround, Kinsta ou Cloudways, com servidores SSD, PHP 8.2+ e cache de servidor (Varnish ou Redis).
• Habilite cache de servidor: Configure cache no nível do servidor (ex.: Redis ou Memcached) via painel da hospedagem. Por exemplo, no cPanel, ative Redis em Gerenciador de Cache.
• Use um CDN: Configure um CDN como Cloudflare para armazenar conteúdo estático em servidores globais. No painel da Cloudflare, ative Cache > Full Page Cache e configure regras para armazenar HTML, CSS e JS.

Exemplo prático: Configure cache de navegador no arquivo .htaccess:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/html "access plus 1 hour"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
</IfModule>

Edite o .htaccess na raiz do WordPress via FTP ou gerenciador de arquivos da hospedagem.

2. Reduza o tempo de renderização bloqueante (CSS/JS)

CSS e JavaScript bloqueantes aumentam o LCP. Para otimizar manualmente:

• Minifique CSS e JS: Use ferramentas como CSSNano (para CSS) e UglifyJS (para JS) em um ambiente local antes de fazer upload dos arquivos. Por exemplo, minifique o style.css do tema:cssnano style.css style.min.css Substitua o style.css pelo style.min.css no tema.
• Adie o carregamento de JS: Adicione o atributo defer aos scripts no arquivo functions.php do tema:add_filter('script_loader_tag', function ($tag, $handle) { if (is_admin()) return $tag; return str_replace(' src', ' defer src', $tag); }, 10, 2);
• Elimine CSS não utilizado: Analise o uso de CSS com ferramentas como PurgeCSS. Execute localmente para remover CSS não utilizado:purgecss --css style.css --content *.php --output style.purged.css Substitua o style.css pelo arquivo otimizado.

Exemplo prático para WooCommerce: Para evitar carregamento de JS desnecessário (ex.: wc-cart-fragments.js) em páginas não relacionadas à loja, adicione ao functions.php:

add_action('wp_enqueue_scripts', function () {
    if (!is_cart() && !is_checkout()) {
        wp_dequeue_script('wc-cart-fragments');
    }
}, 100);

3. Otimize imagens para reduzir o LCP

Imagens pesadas impactam o LCP, especialmente em lojas WooCommerce. Para otimizar manualmente:

• Converta para WebP: Use ferramentas como ImageMagick para converter imagens:convert imagem.jpg -quality 80 imagem.webp Faça upload das imagens WebP via FTP e atualize as referências no tema ou páginas.
• Comprima imagens: Use TinyPNG ou Squoosh para compressão manual antes do upload.
• Adicione lazy loading: Modifique as tags <img> no tema para incluir loading="lazy":<img src="produto.webp" alt="Produto" width="300" height="300" loading="lazy">

Exemplo prático para WooCommerce: Atualize o template de produtos (woocommerce/templates/single-product/product-image.php) para usar WebP e lazy loading:

<?php
$image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'woocommerce_thumbnail');
?>
<img src="<?php echo str_replace('.jpg', '.webp', $image[0]); ?>" alt="<?php the_title(); ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" loading="lazy">

4. Melhore a estabilidade visual (CLS)

Mudanças de layout (CLS) ocorrem quando elementos como imagens ou anúncios movem o conteúdo. Para minimizar:

• Defina dimensões de imagens: Sempre inclua width e height nas tags <img>. Edite templates do tema (ex.: single.php ou archive.php) para garantir dimensões explícitas.
• Evite anúncios dinâmicos: Use banners com tamanhos fixos. No arquivo header.php, defina um contêiner fixo:<div style="width: 300px; height: 250px; overflow: hidden;"> <img src="anuncio.webp" alt="Anúncio" width="300" height="250"> </div>
• Use fontes otimizadas: Adicione font-display: swap para fontes do Google no style.css:@font-face { font-family: 'Open Sans'; src: url('https://fonts.googleapis.com/css2?family=Open+Sans'); font-display: swap; }

5. Melhore a interatividade (FID)

O FID mede o tempo de resposta a interações. Para otimizar:

• Reduza o JavaScript executado: Desative scripts desnecessários no functions.php. Por exemplo, para o WooCommerce:add_action('wp_enqueue_scripts', function () { if (!is_woocommerce()) { wp_dequeue_script('woocommerce'); wp_dequeue_script('wc-add-to-cart'); } }, 100);
• Use temas leves: Temas como Astra ou GeneratePress são otimizados para desempenho.
• Evite bibliotecas pesadas: Substitua jQuery por JavaScript puro quando possível. Exemplo para um carrossel simples:document.querySelectorAll('.carousel img').forEach(img => { img.style.display = 'none'; }); document.querySelector('.carousel img').style.display = 'block';

6. Configure cache de navegador

Configure cabeçalhos de cache no .htaccess para reduzir o carregamento de recursos estáticos:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>
<IfModule mod_headers.c>
  Header set Cache-Control "max-age=31536000, public"
</IfModule>

7. Otimize o banco de dados do WooCommerce

Lojas WooCommerce acumulam transientes e sessões. Limpe manualmente via phpMyAdmin:

• Transientes: Execute a query SQL:DELETE FROM wp_options WHERE option_name LIKE '_transient_%' OR option_name LIKE '_site_transient_%';
• Sessões do WooCommerce: Limpe sessões antigas:DELETE FROM wp_woocommerce_sessions WHERE session_expiry < UNIX_TIMESTAMP();
• Revisões de produtos: Limpe revisões:DELETE FROM wp_posts WHERE post_type = 'revision';

Exemplo prático: Configure um cron job no servidor para limpar transientes semanalmente. Adicione ao crontab:

0 0 * * 0 mysql -u usuario -p'senha' -e "DELETE FROM wp_options WHERE option_name LIKE '_transient_%'" nome_banco

8. Use AMP para dispositivos móveis (opcional)

Implemente AMP (Accelerated Mobile Pages) manualmente para blogs. Crie templates AMP no tema (ex.: amp-single.php) e use HTML simplificado:

<!DOCTYPE html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title><?php the_title(); ?></title>
    <style amp-custom>
        body { font-family: Arial, sans-serif; }
        img { max-width: 100%; height: auto; }
    </style>
</head>
<body>
    <h1><?php the_title(); ?></h1>
    <amp-img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" width="600" height="400" layout="responsive"></amp-img>
    <?php the_content(); ?>
</body>
</html>

Evite AMP em páginas de checkout do WooCommerce para manter funcionalidades.

9. Teste e monitore o desempenho

Use PageSpeed Insights, GTmetrix e Pingdom para monitorar LCP, FID e CLS. Corrija problemas específicos, como “Reduzir recursos bloqueantes” ou “Otimizar imagens”.

Exemplo prático: Teste no PageSpeed Insights:

1. Acesse pagespeed.web.dev.
2. Insira a URL do site ou loja WooCommerce.
3. Priorize correções como minificação de CSS/JS ou conversão de imagens para WebP.

Conclusão

Otimizar um site WordPress ou loja WooCommerce para o PageSpeed Insights sem plugins exige ajustes técnicos no servidor, código e banco de dados. Com configurações no .htaccess, edições no functions.php, otimização de imagens e limpeza de banco de dados, é possível alcançar pontuações acima de 90 e melhorar a experiência do usuário. Teste regularmente e refine as otimizações para manter o desempenho.