Criar tema WordPress leve para empresa SEO em Uberlândia performar rápido

Uma agência de SEO em Uberlândia nos procurou com um problema clássico: o site institucional carregava em 6,8 segundos no mobile, LCP de 4,2s e CLS instável por causa de fontes e anúncios injetados tardiamente. Eles vendiam performance para clientes, mas o próprio site falhava nos Core Web Vitals. O diagnóstico mostrou um tema filho de framework popular com 14 arquivos CSS, 22 scripts JavaScript (incluindo jQuery Migrate) e 340KB de CSS não utilizado. A solução não foi otimizar o existente — foi reescrever do zero com foco em performance real.

O novo tema precisava atender a três restrições: carregar o conteúdo principal em menos de 1,8s no mobile 3G, manter nota 90+ no Lighthouse mobile e permitir que a equipe de conteúdo publicasse landing pages via editor de blocos sem depender de page builders. Decidimos por um block theme híbrido: templates em PHP para áreas críticas (header, footer, loop) e blocos nativos para conteúdo. O resultado: 42KB de CSS gzipped, 18KB de JS, LCP de 1,6s e a equipe interna publicando páginas sem chamar desenvolvedor.

Este artigo documenta a arquitetura, decisões técnicas e ferramentas usadas para que você possa replicar ou adaptar em projetos similares. Não há mágica — apenas priorização rigorosa do que impacta métricas reais e eliminação do que não impacta.

Arquitetura de block theme híbrido para controle total

Block themes puros (theme.json + templates HTML) são o futuro, mas ainda apresentam lacunas para projetos enterprise: controle granular de output HTML, integração com ACF Pro complexa e hooks de performance em pontos específicos. A abordagem híbrida mantém theme.json para configurações globais (cores, tipografia, spacing, layout) e usa templates PHP em templates/ para regiões onde o output precisa ser cirúrgico.

Estrutura de pastas adotada:

tema-seo-uberlandia/
├── assets/
│   ├── css/
│   │   ├── critical.css          # CSS crítico inline (above-the-fold)
│   │   └── main.css              # CSS restante (carregado assíncrono)
│   ├── js/
│   │   ├── main.js               # Vanilla ES6+ módulos
│   │   └── navigation.js         # Menu mobile acessível
│   └── fonts/
│       └── inter-var-latin.woff2 # Subset variável auto-hospedado
├── inc/
│   ├── schema.php                # JSON-LD dinâmico
│   ├── performance.php           # Otimizações de carregamento
│   └── blocks.php                # Registro de blocos customizados
├── templates/
│   ├── index.html                # Fallback (block theme)
│   ├── front-page.php            # Home estática otimizada
│   ├── header.php                # Header semântico + schema
│   ├── footer.php                # Footer leve
│   └── singular.php              # Posts/páginas
├── patterns/
│   └── hero-seo.php              # Pattern de hero para landing pages
├── functions.php                 # Ponto de entrada único
├── theme.json                    # Configurações globais do editor
└── style.css                     # Apenas cabeçalho do tema

O functions.php carrega apenas o necessário: require_once dos arquivos em inc/, enqueue de assets condicional e suporte a recursos (title-tag, html5, editor-styles, responsive-embeds). Nada de add_theme_support('custom-logo') se o logo é SVG inline no header — menos uma requisição HTTP.

CSS crítico inline e carregamento assíncrono do restante

A técnica mais impactante para LCP é entregar o CSS do above-the-fold inline no <head> e carregar o restante sem bloquear renderização. No inc/performance.php:

function tema_seo_critical_css_inline() {
    $critical_path = get_parent_theme_file_path('/assets/css/critical.css');
    if (file_exists($critical_path)) {
        $css = file_get_contents($critical_path);
        echo "<style id='critical-css'>{$css}</style>";
    }
}
add_action('wp_head', 'tema_seo_critical_css_inline', 1);

function tema_seo_enqueue_main_css_async() {
    wp_enqueue_style(
        'tema-seo-main',
        get_parent_theme_file_uri('/assets/css/main.css'),
        [],
        filemtime(get_parent_theme_file_path('/assets/css/main.css')),
        'print' // media='print' + onload = assíncrono
    );
    wp_add_inline_script('tema-seo-main', "document.getElementById('tema-seo-main-css').media='all';", 'after');
}
add_action('wp_enqueue_scripts', 'tema_seo_enqueue_main_css_async');

O critical.css contém apenas: reset mínimo, variáveis CSS, tipografia fluida (clamp), layout do header/hero, botões primários e utilitários de spacing. Tudo gerado via script de build (Vite + PostCSS + PurgeCSS) que analisa os templates reais. O main.css carrega o resto: grid de blog, formulários, tabelas, animações sutis.

Fontes: usamos Inter Variable (WOFF2, subset latino, ~45KB) com font-display: swap e preload no header. Zero fontes do Google Fonts — elimina DNS lookup, conexão TLS e dependência externa. O theme.json referencia a fonte local via settings.typography.fontFamilies.

JavaScript vanilla modular e carregamento condicional

Zero jQuery. Zero bibliotecas de slider, lightbox ou animação. O assets/js/main.js usa ES Modules e importa apenas o necessário:

// main.js
import { initNavigation } from './navigation.js';
import { initSmoothScroll } from './smooth-scroll.js';

// Inicialização condicional baseada em elementos presentes
document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('.site-navigation')) {
        initNavigation();
    }
    if (document.querySelector('[data-smooth-scroll]')) {
        initSmoothScroll();
    }
});

No functions.php, scripts são registrados com wp_script_add_data($handle, 'strategy', 'defer') e enfileirados apenas onde existem:

function tema_seo_enqueue_scripts() {
    // Navigation script: apenas se houver menu mobile
    if (has_nav_menu('primary')) {
        wp_enqueue_script(
            'tema-seo-navigation',
            get_parent_theme_file_uri('/assets/js/navigation.js'),
            [],
            filemtime(get_parent_theme_file_path('/assets/js/navigation.js')),
            true
        );
        wp_script_add_data('tema-seo-navigation', 'strategy', 'defer');
    }

    // Main script: sempre (leve, 3KB gzipped)
    wp_enqueue_script(
        'tema-seo-main',
        get_parent_theme_file_uri('/assets/js/main.js'),
        [],
        filemtime(get_parent_theme_file_path('/assets/js/main.js')),
        true
    );
    wp_script_add_data('tema-seo-main', 'strategy', 'defer');
    wp_script_add_data('tema-seo-main', 'type', 'module');
}
add_action('wp_enqueue_scripts', 'tema_seo_enqueue_scripts');

O menu mobile acessível (navigation.js) tem 40 linhas: toggle aria-expanded, foco no primeiro link ao abrir, trap de foco, fechamento com ESC e click fora. Zero dependências.

Schema markup dinâmico para Organization e WebSite

SEO técnico exige schema markup correto. Em vez de plugin, implementamos no inc/schema.php com JSON-LD gerado dinamicamente a partir de options do Customizer (logo, nome, telefone, endereço, redes sociais):

function tema_seo_output_schema() {
    $org = [
        '@context' => 'https://schema.org',
        '@type' => 'Organization',
        'name' => get_bloginfo('name'),
        'url' => home_url(),
        'logo' => get_theme_mod('custom_logo_url', get_parent_theme_file_uri('/assets/images/logo.svg')),
        'sameAs' => array_filter([
            get_theme_mod('social_linkedin'),
            get_theme_mod('social_instagram'),
            get_theme_mod('social_youtube'),
        ]),
        'address' => [
            '@type' => 'PostalAddress',
            'addressLocality' => 'Uberlândia',
            'addressRegion' => 'MG',
            'addressCountry' => 'BR',
        ],
        'telephone' => get_theme_mod('phone_number'),
    ];

    $website = [
        '@context' => 'https://schema.org',
        '@type' => 'WebSite',
        'url' => home_url(),
        'name' => get_bloginfo('name'),
        'potentialAction' => [
            '@type' => 'SearchAction',
            'target' => home_url('/?s={search_term_string}'),
            'query-input' => 'required name=search_term_string',
        ],
    ];

    echo "<script type='application/ld+json'>" . wp_json_encode([$org, $website]) . "</script>";
}
add_action('wp_head', 'tema_seo_output_schema', 5);

Isso garante schema válido no Google Rich Results Test sem overhead de plugin. Para artigos e páginas de serviço, o schema Article e Service é injetado via filtro the_content condicional — mantendo o head limpo.

Padrões de bloco (patterns) para landing pages autonomia

A equipe de conteúdo precisava criar landing pages de serviços (“SEO local”, “Link building”, “Auditoria técnica”) sem desenvolvedor. Criamos patterns registrados no inc/blocks.php:

function tema_seo_register_patterns() {
    register_block_pattern('tema-seo/hero-servico', [
        'title' => 'Hero de Serviço SEO',
        'categories' => ['hero'],
        'content' => file_get_contents(get_parent_theme_file_path('/patterns/hero-seo.php')),
        'keywords' => ['serviço', 'hero', 'cta', 'seo'],
    ]);
    // ... outros patterns: grade-de-servicos, depoimentos, faq-accordion
}
add_action('init', 'tema_seo_register_patterns');

O patterns/hero-seo.php entrega markup semântico pronto:

<!-- wp:cover {"overlayColor":"base","isDark":true,"className":"hero-servico"} -->
<div class="wp-block-cover hero-servico">
  <span aria-hidden="true" class="wp-block-cover__background has-base-background-color has-background-dim-100 has-background-dim"></span>
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"level":1,"className":"hero-title","fontSize":"xx-large"} -->
    <h1 class="wp-block-heading hero-title has-xx-large-font-size">Título do Serviço</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph {"className":"hero-subtitle","fontSize":"large"} -->
    <p class="wp-block-paragraph hero-subtitle has-large-font-size">Descrição curta do benefício principal para o cliente.</p>
    <!-- /wp:paragraph -->
    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons"><!-- wp:button {"className":"btn-primary"} -->
      <div class="wp-block-button"><a class="wp-block-button__link btn-primary" href="#contato">Solicitar orçamento</a></div>
    <!-- /wp:button --></div>
    <!-- /wp:buttons -->
  </div>
</div>
<!-- /wp:cover -->

Editores arrastam o pattern, alteram textos e publicam. O CSS do hero já está no critical.css — zero layout shift, LCP estável.

Orçamento de performance e automação no CI/CD

Definimos orçamento rígido no lighthouse-ci.js:

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "settings": {
        "preset": "mobile",
        "throttlingMethod": "simulate",
        "formFactor": "mobile"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:best-practices": ["error", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.9 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "interaction-to-next-paint": ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-byte-weight": ["warn", { "maxNumericValue": 300000 }]
      }
    }
  }
}

No GitHub Actions, o job roda npm run build (Vite: minify, hash, purgecss), sobe para staging, executa lhci autorun e bloqueia merge se falhar. Métricas históricas ficam no dashboard do Lighthouse CI — a equipe vê regressões antes do deploy.

Resultados medidos e lições para próximos projetos

Após deploy em produção (hospedagem VPS com Nginx, Brotli, cache estático de 1 ano para assets com hash):

A empresa de SEO em Uberlândia passou a usar o próprio site como case comercial: “Nosso site carrega em 1,6s no mobile — o seu pode também”.

Lições transferíveis: (1) comece pelo orçamento de bytes, não por features; (2) CSS crítico inline é a alavanca única de maior impacto no LCP; (3) block themes híbridos dão controle de output com autonomia de editor; (4) automação de Lighthouse CI evita regressões silenciosas; (5) schema markup no tema remove dependência de plugin e garante validade.

Para equipes que vão iniciar projeto similar: clone a estrutura acima, ajuste o theme.json para a identidade visual, gere o critical.css real com PurgeCSS apontando para seus templates e configure o CI. A performance não é opcional — é requisito de credibilidade para quem vende SEO.

Para aprofundar em automação de landing pages para SEO programático, veja como automatizar geração de landing pages WordPress para SEO programático. Para entender como estruturar Custom Post Types escaláveis, consulte estruturar custom post types WordPress para SEO programático escalável. E para otimizar Core Web Vitals em projetos de serviço, revise otimizar Core Web Vitals WordPress para serviços SEO em Taubaté.

Checklist prático

Perguntas frequentes